An ink blot spreads from the center of the selected radio dot — scaling from 0 to 1 with a dramatic ease-out cubic-bezier and slight overshoot. The ink bleeds into a rich dark fill with a subtle paper-like texture vibe.
Goal: Create an "Ink Drop" radio group animation.
Visual behavior: A radio group with 3 options. Each radio indicator is a 24×24px circle. Unselected: transparent with a dim white border. Selected: an ink blot scales from 0 to 1 (transform: scale with cubic-bezier(0.22,1,0.36,1) over 480ms) filling the circle with a deep indigo radial gradient (center #312e81 to edge #0f0d2b). A small white center dot springs in 100ms after the ink fills. On deselect the ink contracts with ease-in at 250ms. The label brightens to near-white when selected.
Technique: React useState tracks selected option. The ink fill and white dot are absolutely positioned spans inside a relative container (overflow: hidden) with transform: scale transitions. Inline styles drive all state. No library dependencies.
Accessibility: Hidden native <input type="radio"> per option, shared name attribute. Keyboard-navigable. Ink spread 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.