A frosted glass pill slides between options using Framer Motion layoutId. The translucent backdrop-blur pill springs smoothly from one option to the next, giving a glassmorphism selection indicator.
Goal: Create a "Frost" radio group animation.
Visual behavior: A glassmorphism radio group with 3 options. A frosted glass pill (backdrop-filter: blur(12px), semi-transparent white background, white border) slides between options using Framer Motion's layoutId="frost-pill". The pill springs smoothly (spring, bounce: 0.2) from one option to the next. When selected, the option's radio dot and label brighten. Unselected options appear dim against a dark background.
Technique: React useState tracks selected option. Each option's label renders conditionally {checked && <motion.div layoutId="frost-pill" />} which Framer Motion animates between parent positions via layout animation. The radio dot and label use inline style transitions. framer-motion is required as a dependency.
Accessibility: Hidden native <input type="radio"> per option, shared name attribute. Keyboard-navigable. Framer Motion automatically reduces motion under prefers-reduced-motion by cutting the layout animation.
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.