Verified against Motion §04. Five durations, three curves, one signature beat. One thing moves at a time; the pop is reserved for the single payoff.
| Token | Value | Use |
|---|---|---|
| --p-dur-micro | 120ms | Hover, press, toggle |
| --p-dur-quick | 200ms | UI state, small reveal, tooltip |
| --p-dur-base | 320ms | Most entrances, modal, nav |
| --p-dur-pop | 480ms | The signature burst |
| --p-dur-scene | 680ms | Scene transitions, chart draw |
Watch each dot to feel the curve. Standard carries everything; Pop overshoots (the signature); Exit leaves faster than it arrives.
The Wild Burst scales in with a confident overshoot, then settles. Reserved for the payoff — a result, a logo reveal, a success. Max once per piece.
480ms · ease-pop · scales 0 → 1.18 → 1, holds still
Hover the button (lift + poppy glow, 120ms). Toggle the switch (knob slides on the pop curve).
| Interaction | Motion | Duration · ease | Reduced-motion |
|---|---|---|---|
| Hover / press | Lift / scale | 120ms · standard | Color only, no transform |
| Focus | Poppy ring | 120ms · standard | Instant ring |
| Reveal | Slide up (opacity stays 1) | 320ms · standard | No transform |
| Modal / toast | Scale-in + scrim | 320ms · pop | Instant appear |
| The pop | Burst overshoot | 480ms · pop | Static end-state holds the fact |
Global floor: prefers-reduced-motion: reduce collapses durations to ~0 (defined in tokens.css). Content is never hidden by motion — reveals keep opacity 1 and only translate, so a paused compositor still shows everything.