Empty animation
An empty state arrives in place of content, and content replaces it, without a jump.
with <Cuts />
Your inbox is clear
New messages will appear here.
What moves
| When | What you see | Timing | How |
|---|---|---|---|
| Empty becomes content, or back | Fade or slide, with the height easing | 260 ms | StateCut |
Install
Install StateCut and wrap the part that changes: npx shadcn add @keyframery/state-cut.
Turn it off
Put data-cut="none" on a empty (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.