Motion · State
Crossfade + Blur
Labels and icons swap through a short blur, so two states read as one change instead of two overlapping objects.
Specs#
| Out | opacity 0, blur 4px, y -6px |
| In | opacity 1, blur 0, y 0 |
| Duration | 200ms |
| Tool | AnimatePresence mode="popLayout" |
| Built with | Motion |
Guidelines#
Use for
- Copy → Copied, Save → Saved
- Icon swaps: play / pause, sun / moon
Avoid
- Blur above 8px — it is expensive and looks smeared
- Changing the button width during the swap