Motion should explain something: where an element came from, what changed, or what's connected to what. If it only decorates, keep it small or cut it.
Defaults
| Use | Duration | Easing |
|---|---|---|
| Hover and press | 150–250ms | ease-out |
| Enter and reveal | 500–800ms | cubic-bezier(.22,1,.36,1) |
| Ambient loops | 4s or slower | ease-in-out |
Rules
- Respect reduced motion. Under
prefers-reduced-motion: reduce, show the end state immediately. - Never hide content behind an animation without a fallback. If the script fails, the content is still there.
- Animate transform and opacity. They're cheap. Width, height and top cause layout work.
- Pause what's off-screen. Use an IntersectionObserver to stop loops nobody can see.