Selected option flickers with RGB color-channel separation (CSS filter + translate offsets) then stabilizes into a cyan-tinted holographic state. Simulates a projector flickering to life, with subtle scan-line stripes overlay.
Goal: Create a "Hologram" radio group animation.
Visual behavior: A sci-fi radio group with 3 options. On selection, the label text plays a CSS animation (holo-flicker) cycling through hue-rotate (0→120→240→0deg), brightness (1→2→1), and translateX jitter (-1px→2px→0), simulating an unstable holographic projection flickering to life over 800ms. After settling, the label glows cyan (#00ffff) with text-shadow. A moving scan-line overlay (repeating horizontal gradient) scrolls vertically on the selected row. The radio dot glows cyan on select.
Technique: React useState tracks selected option and flickerKey counter. flickerKey increments on each selection to remount the animated label span and restart the holo-flicker animation. The scan-line overlay uses a separate @keyframes (holo-scanline: background-position scroll). Inline styles drive all state. No library dependencies.
Accessibility: Hidden native <input type="radio"> per option, shared name attribute. Keyboard-navigable. Flicker animation and scan-line 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.