Framer Motion animates the selection indicator through a borderRadius shape morph — circle (50%) → squircle (30%) → circle (50%) — as it slides between options via layoutId, creating a fluid shape-shifting selection ring.
Goal: Create a "Morph Ring" radio group animation.
Visual behavior: A radio group with 3 options (each 46px tall). A rose-red (#f43f5e) selection panel uses Framer Motion's animate prop to slide vertically (y: selectedIndex * 46px) with a spring, while simultaneously morphing its borderRadius through circle(50%)→squircle(30%)→circle(50%) over 400ms. The radio dot on each option also morphs its own borderRadius shape when selected. The combined sliding + shape-morphing creates a fluid, premium feel.
Technique: React useState tracks selected option. selectedIndex = OPTIONS.indexOf(). A persistent <motion.div> uses animate.y for vertical position and animate.borderRadius for shape morph. The radio dot uses animate.borderRadius + animate.scale for its own morph. framer-motion is required as a dependency (framer-core track for borderRadius animation via motion values).
Accessibility: Hidden native <input type="radio"> per option, shared name attribute. Keyboard-navigable. Framer Motion automatically respects 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.