Motion
Tokens
--ease-standard
--ease-entrance
--ease-emph
--ease-exit
--ease-back
| Token | Value | Job |
|---|---|---|
| --dur-1 | 120ms | Press, hover, color shifts |
| --dur-2 | 200ms | Toggles, switches, chips |
| --dur-3 | 320ms | Entrances, sheets, disclosure |
| --dur-4 | 480ms | Orchestrated moments, rare |
| --ease-standard | cubic-bezier(.2, 0, 0, 1) | The default; press and state |
| --ease-entrance | cubic-bezier(.16, 1, .3, 1) | Things arriving |
| --ease-emph | cubic-bezier(.3, 0, .1, 1) | Emphasis, attention |
| --ease-exit | cubic-bezier(.3, 0, 1, 1) | Leaving for good |
| --ease-back | cubic-bezier(.34, 1.56, .64, 1) | Snap-back settle after a drag or magnet |
| --ease-spring | cubic-bezier(.22, 1, .36, 1) | Playful settle, sparing |
Press
Entrances
First0ms
Second+60ms
Third+120ms
Fourth+180ms
Line reveal
Design is the signature
Spotlight
Move across thesethe halo tracks the pointer
Neighbors warm earlytracking is on the group
Accent at 10%never a new color
Magnetic
Numbers
/wk
Text swap
v1.0.0 · stable
Attention
Batch sizethe field the error points at
Loading
Height + width
Auto height, travelling. The wrapper animates grid-template-rows; the child clips. No measured pixels, no max-height guesses.
Ambient
Border beamconic accent on a ring mask · 4s