Neumorphic soft UI: unselected options have raised outer shadows creating a pillowed surface. Selecting presses it inward with dual inset shadows (dark and light), simulating a physical depression on a soft matte gray surface.
Goal: Create a "Pillow" radio group animation.
Visual behavior: A neumorphic radio group on a soft gray background (#e0e5ec). Each option row (border-radius: 12px) has raised outer box-shadows (5px 5px 10px #b8bec7, -5px -5px 10px #ffffff) when unselected, creating a pillowed surface effect. On selection, the shadows flip to inset (inset 4px 4px 8px #b8bec7, inset -4px -4px 8px #ffffff), simulating a physical press into a soft foam surface. The radio dot is also neumorphic: raised when unselected, pressed when selected, with a blue (#6c8ebf) inner fill. Labels darken from muted blue-gray to charcoal on selection.
Technique: React useState tracks selected option. All visual states driven by box-shadow changes on transition. The outer container also has the same background as the option rows. Inline styles drive all transitions. No library dependencies.
Accessibility: Hidden native <input type="radio"> per option, shared name attribute. Keyboard-navigable. Shadow transitions 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.