Scan Line
No library Intermediate
A cyan horizontal scan line sweeps left-to-right across the selected option on every selection change, then fades out leaving a glowing underline. Sci-fi terminal aesthetic with monospace labels.
A cyan horizontal scan line sweeps left-to-right across the selected option on every selection change, then fades out leaving a glowing underline. Sci-fi terminal aesthetic with monospace labels.
Goal: Create a "Scan Line" radio group animation.
Visual behavior: A sci-fi radio group with 3 options in monospace uppercase labels. Each selected option has a cyan (#00e5ff) horizontal scan line that sweeps from left to right (CSS scaleX 0→1 with transformOrigin left) at 550ms, fades out, and leaves a persistent glowing cyan bottom border. The radio dot on the left glows cyan when selected. Unselected options have muted 35% white text and a faint bottom border. Background of selected row shifts subtly cyan-tinted.
Technique: React useState tracks selected value. Each option renders a hidden native radio input. The scan line is a div inside the selected label with a CSS @keyframes animation (scan-sweep: scaleX 0→1 then opacity fade). The 'key' prop includes Date.now() to force React to remount the sweep div and replay the animation on every selection change. Inline styles drive border-bottom and text-shadow for the persistent glow. No library dependencies.
Accessibility: Hidden native <input type="radio"> per option, shared name attribute. Keyboard-navigable. Scan animation skipped under prefers-reduced-motion via CSS media query.
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.