Button animation
A button dips while it's pressed, quicker in than out; with Icon moves, its icon plays its own move.
with <Cuts />
What moves
| When | What you see | Timing | How |
|---|---|---|---|
| Pressed | Dips to 97%, keeping shadcn's 1 px nudge | 70 ms in, 150 ms out | Automatic |
| Its icon, when pressed | Plays its own move (a gear turns, a bell rings) | 300–700 ms | Icon moves |
Install
Button is shadcn's own component. With <Cuts /> in your root layout (Quick start), there's nothing else to add:
npx shadcn add buttonFor each icon's own move when it's pressed, add Icon moves: npx shadcn add @keyframery/icon-moves.
Turn it off
Put data-cut="none" on a button (or anything around it) to keep shadcn's own motion there. <Cuts responses="none" /> turns off every response across the app and keeps the cuts. With reduced motion, movement becomes a short fade or nothing.