A glowing indigo pill indicator slides smoothly between selected options via translateY, acting like a cursor homing in on the active choice. Labels brighten on select; the pill springs with a cubic-bezier overshoot.
Goal: Create a "Cursor" radio group animation.
Visual behavior: A radio group with 3 options stacked vertically (each row is 44px tall, 220px wide). A shared absolutely-positioned glowing indigo pill (border-radius: 8px, subtle indigo border + box-shadow) slides behind the selected option using transform: translateY(selectedIndex * 44px) with a spring cubic-bezier (0.34, 1.56, 0.64, 1) over 320ms. Each row has a small 16px radio circle on the left with a 6px inner dot that springs in on select. Labels brighten to near-white when selected and dim to 45% opacity when not.
Technique: React useState tracks the selected option string. selectedIndex is derived with OPTIONS.indexOf(). A single div positioned absolutely uses transform translateY to slide to the correct row. Option rows sit above it via position: relative + z-index: 1. Hidden native radio inputs provide semantics. Inline styles drive all transitions. No library dependencies.
Accessibility: Hidden native <input type="radio"> per option, shared name attribute for mutual exclusivity. Keyboard-navigable. Sliding indicator 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.