Soft clay morphing: selecting an option triggers a squish animation on the indicator dot (scaleX 1.3, scaleY 0.7 then spring back to 1,1), with a pastel fill and layered soft shadow. Feels like pressing a clay button.
Goal: Create a "Clay" radio group animation.
Visual behavior: A soft clay-aesthetic radio group with 3 options, each with a unique pastel color (rose, sky, mint). The radio indicator is a 24×24px circle. Unselected: flat dim fill. Selected: pastel radial gradient with a specular highlight (radial-gradient from bright center to mid tone), multi-layer box-shadow for depth, and a squish animation keyframe (scaleX 1.35 scaleY 0.65 → spring back to 1,1 over 500ms). The option row background and border tint to the option's pastel color when selected.
Technique: React useState tracks selected option and a squishKey counter (increments on each selection to force remount of the clay dot, restarting the CSS animation). The clay-squish keyframe animates the dot through realistic clay deformation. Inline styles drive radial-gradient and box-shadow. No library dependencies.
Accessibility: Hidden native <input type="radio"> per option, shared name attribute. Keyboard-navigable. Squish animation 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.