Motion
Subtle animations that support content, never distract from it.
Duration Scale
| Token | Value | Usage |
|---|---|---|
| duration-75 | 75ms | Micro feedback (checkbox check, button press) |
| duration-150 | 150ms | Hover states, color transitions |
| duration-200 | 200ms | Dropdowns, tooltips opening |
| duration-300 | 300ms | Panels, sheets, dialogs |
| duration-500 | 500ms | Page transitions (use sparingly) |
Easing
Always use ease-out for elements entering the screen. Use ease-in for elements leaving.
Accessibility
All animations must respect prefers-reduced-motion. Add the motion-safe: prefix for any non-essential animation.
css
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }}