A rubber-band selection pill stretches horizontally as it springs between options via Framer Motion layoutId with high-stiffness spring physics. The distortion gives a tactile elastic band feel to the transition.
Goal: Create an "Elastic" radio group animation.
Visual behavior: A radio group with 3 options. A green (#34d399) selection pill uses Framer Motion layoutId="elastic-pill" to spring between options with high stiffness (600) and low damping (20), creating a stretchy rubber-band transition. The pill has a translucent green background and glowing border. Selected labels turn emerald-green; unselected are dim. The radio dot glows green on select.
Technique: React useState tracks selected option. Inside each label, {checked && <motion.div layoutId="elastic-pill" />} with spring transition (stiffness: 600, damping: 20, mass: 0.8). framer-motion is required as a dependency.
Accessibility: Hidden native <input type="radio"> per option, shared name attribute. Keyboard-navigable. Framer Motion respects prefers-reduced-motion automatically.
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.