A dark box with a near-invisible border that transforms into a cyan neon sign on check. A brief 400ms flicker keyframe (simulating a neon tube buzzing to life) plays on activation. The check stroke has a drop-shadow glow matching the neon color.
Goal: Create a "Neon" checkbox that looks like a neon sign buzzing on.
Visual behavior: A 28×28px dark box (#0d0d0d) with a near-invisible white border. On check: border turns electric cyan (#00ffff), multi-layer box-shadow creates a neon glow (tight 4px + mid 10px + wide 22px), and a 400ms flicker keyframe fires (rapid opacity drops simulating a neon tube starting). The check stroke is also cyan with a drop-shadow filter for the glow. flickerKey state re-mounts the box to restart the flicker animation on every activation.
Technique: React useState + flickerKey for animation restart. CSS keyframes injected via useEffect. Inline style transitions for glow states. SVG drop-shadow via filter style. No library dependencies.
Accessibility: Hidden native <input type="checkbox">. Flicker animation skipped under prefers-reduced-motion.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.