Card animation
A card opens into its detail view, on the same page or a new route, and shrinks back when you return.
with <Cuts />
What moves
| When | What you see | Timing | How |
|---|---|---|---|
| Opens into its detail | Match cut: the card grows into the detail | 420 ms | MatchCut |
Install
Install MatchCut and wrap the part that changes: npx shadcn add @keyframery/match-cut.
Turn it off
Put data-cut="none" on a card (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.