Motion
| Token | Value | Use |
|---|---|---|
duration.micro | 80ms | Toggle, checkbox check, icon swap |
duration.standard | 200ms | Panel slide, dropdown open, tooltip |
duration.emphasized | 320ms | Sheet/drawer entry, tab transition |
duration.data | 250ms | New data point fade-in, sparkline redraw |
duration.cinematic | 600ms | Command palette open, map focus |
spring.soft | k=120 d=18 | Map pin hover, KPI tile hover lift |
spring.firm | k=300 d=28 | Command palette open, drawer entry |
What never animates
- Alert and toast appearance — instant
- Status pip color change — instant
- Critical metric value updates — instant
- Form validation errors — instant
- Live/recording pulse — opacity only, no transform
Cinematic flourishes (exactly two)
- Command palette open — backdrop dims 200ms, palette scales 96 → 100 with translate +12 → 0 over 280ms using
spring.firm. - Map focus transition — camera eases with
spring.softover 500–600ms. The primary cinematic moment in the product.