Neo-brutalist rubber-stamp interaction: selecting an option scales it down (0.97) with a hard inset shadow, as if physically pressed into the surface. Bold black borders and high-contrast ink-black fills complete the aesthetic.
Goal: Create a "Stamp" radio group animation.
Visual behavior: A neo-brutalist radio group with 3 uppercase options. Unselected: transparent background, faint white border, dim text. Selected: cream/off-white background (#f5f5f0), thick black border (2.5px), scale down to 0.97 with a hard inset box-shadow (simulating rubber stamp press), bold black uppercase text. The radio dot is a filled black circle with a cream inner dot. The press snap uses a spring cubic-bezier (0.34,1.56,0.64,1) over 120ms.
Technique: React useState tracks selected option. Inline styles drive all visual states. transform: scale(0.97) + inset box-shadow create the pressed feeling. No library dependencies.
Accessibility: Hidden native <input type="radio"> per option, shared name attribute. Keyboard-navigable. Scale press 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.