Brutalist
No library Beginner
Neo-brutalist style: on focus a hard 4px offset black box-shadow slams from an offset position to zero, while the border snaps to high-contrast. Snappy cubic-bezier easing.
Neo-brutalist style: on focus a hard 4px offset black box-shadow slams from an offset position to zero, while the border snaps to high-contrast. Snappy cubic-bezier easing.
Goal: Create a "Brutalist" input focus animation.
Visual behavior: A white, zero-border-radius input with a thick black border and a hard offset box-shadow (neo-brutalist style). At rest: 2px solid border, 8px 8px 0 #000 box-shadow, no transform offset. On focus: border thickens to 3px, box-shadow shrinks to 4px 4px 0 #000, and the input translates +4px X +4px Y to meet the shadow — giving a "pressed-in" slam effect. Snappy cubic-bezier(0.22,1,0.36,1) easing, 120ms duration.
Technique:
- Single input element
- All styling via inline style/CSS transitions on border, box-shadow, and transform
- No wrapper needed
Accessibility: Border color change and border thickness increase are sufficient focus indicators. Transition can be set to none 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.