The selection indicator snaps to the chosen option with a magnetic spring-overshoot cubic-bezier — fast pull-in followed by a damped overshoot, simulating ferromagnetic attraction. Field lines ripple out on snap.
Goal: Create a "Magnetic" radio group animation.
Visual behavior: A radio group with 3 options (each 46px tall, 210px wide). An amber (#fbbf24) glowing indicator panel slides between selected options using transform: translateY(selectedIndex * 46px) with an aggressive spring cubic-bezier (0.34, 1.56, 0.64, 1) over 400ms, overshooting like a magnetic snap. The amber panel has an amber gradient background and box-shadow glow. The radio dot glows amber on select. Labels use uppercase small text, brightening amber on selection.
Technique: React useState tracks selected option. selectedIndex is derived by OPTIONS.indexOf(). A single absolutely-positioned div translates vertically. Option rows sit above it via z-index. No library dependencies.
Accessibility: Hidden native <input type="radio"> per option, shared name attribute. Keyboard-navigable. Snap transition 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.