A liquid blob indicator morphs and slides between options using Framer Motion layoutId. The blob stretches horizontally during travel, then snaps back to a round pill shape, simulating organic liquid motion between selection points.
Goal: Create a "Blob" radio group animation.
Visual behavior: A radio group with 3 pill-shaped option rows (border-radius: 50px). A liquid blob (indigo-to-purple gradient, border-radius: 50px) sits behind the selected option and slides to the next via Framer Motion layoutId="blob-indicator". The spring physics (stiffness: 380, damping: 30) create an organic liquid stretch-and-settle feel as the blob travels between options. Selected labels are white bold; unselected are dim and ghost-like. A small 10px dot on the left acts as a compact radio indicator.
Technique: React useState tracks selected option. Inside each label, {checked && <motion.div layoutId="blob-indicator" />} renders the blob; Framer Motion's layout animation moves it between parent positions smoothly. 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.
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.