On selection, an iridescent rainbow gradient sweeps left-to-right across the selected label via CSS background-position animation, then settles into a vivid prismatic shimmer. Other options show dim monochrome text.
Goal: Create a "Prism" radio group animation.
Visual behavior: A radio group with 3 options. On selection, the chosen option's label text animates with an iridescent rainbow gradient sweep (CSS background-position animation from 200% to 0%, 800ms). The label uses a rainbow linear-gradient (red→orange→yellow→green→blue→purple) clipped to text via -webkit-background-clip: text. The radio dot becomes a small rainbow circle. Other options show dim muted text. The sweep triggers on each selection by using 'key' to remount the label element.
Technique: React useState tracks selected value. Each label and span uses inline styles for the gradient and animation. The 'key' prop on the selected option's text span includes the option value so React remounts it on each selection, restarting the CSS animation. No library dependencies.
Accessibility: Hidden native <input type="radio"> per option, shared name attribute. Keyboard-navigable. Sweep 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.