Neo-brutalist hard offset shadow: unselected options sit with a (4px, 4px) black drop-shadow offset; on selection the shadow collapses to (0,0) with a snappy transition, as if the block was pushed flush into the wall.
Goal: Create an "Offset Block" radio group animation.
Visual behavior: A neo-brutalist radio group with 3 options. Each option is a block with a bright acid-yellow (#e8ff47) 2px border and monospace bold text. Unselected state: dark background (#1a1a1a), yellow text, 4px×4px hard yellow box-shadow offset (bottom-right). Selected state: yellow background, dark text, shadow collapses to 0 as the element translates by (4px,4px) — appearing to snap flush into the surface. 130ms snappy cubic-bezier(0.22,1,0.36,1) transition.
Technique: React useState tracks selected option. transform: translate and box-shadow animate together on state change. The push effect combines translate(4px,4px) with box-shadow 0 0 0 so the element appears to sink into place. Inline styles drive all transitions. No library dependencies.
Accessibility: Hidden native <input type="radio"> per option, shared name attribute. Keyboard-navigable. Shadow/translate 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.