Motion · Interaction
Stagger
Items that arrive together enter one after another, a few milliseconds apart. The eye reads it as one motion.
- app
- components
- lib
- globals.css
- package.json
- README.md
Specs#
| Delay between items | 30–60ms |
| Item | opacity 0→1, y 8px→0 · 250ms |
| Easing | --ease-out |
| Max items | ~8, then no delay |
| Built with | Motion |
Guidelines#
Use for
- First load of a list or grid
- Menu items, search results
Avoid
- Blocking clicks until the stagger ends
- Long delays — total stagger over 400ms feels slow