Motion
Durations and curves. Reduced motion: every duration becomes 0ms except fades (120ms).
Hover a row to play it.
| Token | Value | Demo | Usage |
|---|---|---|---|
duration-instant | 100ms | Hover fills, press states. | |
duration-quick | 160ms | Menus, tooltips, toggles. | |
duration-base | 240ms | Panels, dialogs, toasts. | |
duration-zoom | 500ms | Drilling into a node (zoom-in leg). | |
duration-reveal | 420ms | One node blooming in during a gradual reveal. | |
stagger-reveal | 70ms | Delay between siblings blooming in. | |
ease-zoom | cubic-bezier(0.2, 0.8, 0.2, 1) | Camera moves: drill in, drill out, fit. | |
ease-standard | cubic-bezier(0.4, 0, 0.2, 1) | UI enter/exit. | |
ease-bloom | cubic-bezier(0.34, 1.4, 0.64, 1) | Node bloom: a small, joyful overshoot. |
See the choreography in Canvas language.