Motion tokens and the moments they drive. UI feedback stays between 120 and 320 ms, data reveals take 600 ms and play once, and everything respects reduced motion.
Defined on :root in 01-styles.css. 13-motion.css uses them. Values are read live from the stylesheet.
| Token | Value | When to use | Demo |
|---|---|---|---|
| --dur-1 | 120ms | Hover, press, colour changes, small toggles | |
| --dur-2 | 180ms | Page enter, menus, popovers, tab ink, sliding pill | |
| --dur-3 | 240ms | Accordion, scrim fade, snackbar enter | |
| --dur-4 | 320ms | Sheets, drawers, dialogs, spring confirmations | |
| --dur-data | 600ms | Count-up, bar grow, chart draw. Once per page visit | |
| --ease-standard | cubic-bezier(.2,.7,.2,1) | Default for all UI motion (same as --ease) | |
| --ease-emphasized | cubic-bezier(.16,1,.3,1) | Large surfaces entering: drawer, bottom sheet | |
| --ease-decelerate | cubic-bezier(0,0,.2,1) | Things arriving from off-screen | |
| --ease-accelerate | cubic-bezier(.4,0,1,1) | Things leaving. Use for exits only | |
| --ease-spring | cubic-bezier(.34,1.45,.64,1) | Small confirmations: badge, check, snackbar. Never for big surfaces |
Every demo uses the app's own keyframes, classes or functions. With reduced motion on, the end state shows at once.
Hovers, menus, tabs and page enter stay in --dur-1…--dur-3. Only sheets and dialogs use 320 ms. Data reveals use 600 ms.
The FBR stamp, the POD check or the count-up. Pick one per page and let everything else simply appear.
No parallax, no scroll-jacking, no sticky headers that change size. Scrolling moves content, nothing else.
Animations use backwards fill from a visible end state. If JavaScript or motion is off, everything is still there.
Counting up and chart drawing run on the first visit to a route, not on every re-render or filter change.
Under prefers-reduced-motion the state still changes, with no transition. Looping effects (pulse, map flow) stop.
Leave with --ease-accelerate at about two-thirds of the entry duration. Toasts leave in 250 ms.
Badges, checks and snackbars can overshoot. Drawers, pages and tables never bounce.
0 flush · 1 resting card · 2 raised · 3 hover lift / dragged row · 4 menus, drawers, dialogs, toasts.
Use a token, never a raw number. A new overlay goes in an existing layer. Peek cards and tooltips sit above toasts because they follow the pointer.