Motion
Calm and purposeful. Motion here confirms what happened — it never performs. Hovers answer in 140ms, state changes in 220ms, and nothing bounces across the screen.
Durations
| Token | Value |
|---|---|
--dur-instant | 80ms |
--dur-fast | 140ms |
--dur-normal | 220ms |
--dur-slow | 420ms |
Easings
--ease-out is the default for almost everything. --ease-spring is reserved for icon
micro-interactions — a check mark settling into place — never for panels or pages.
| Token | Value |
|---|---|
--ease-out | cubic-bezier(0.22, 1, 0.36, 1) |
--ease-in-out | cubic-bezier(0.65, 0, 0.35, 1) |
--ease-spring | cubic-bezier(0.34, 1.56, 0.64, 1) |
Feel it
--ease-out cubic-bezier(0.22, 1, 0.36, 1)
--dur-instant80ms--dur-fast140ms--dur-normal220ms--dur-slow420ms--ease-in-out cubic-bezier(0.65, 0, 0.35, 1)
--dur-instant80ms--dur-fast140ms--dur-normal220ms--dur-slow420ms--ease-spring cubic-bezier(0.34, 1.56, 0.64, 1)
--dur-instant80ms--dur-fast140ms--dur-normal220ms--dur-slow420msRules
- Hovers:
--dur-fast, color/background only — no scale, no opacity tricks. - State changes (open, select, expand):
--dur-normalwith--ease-out. - No bouncy page transitions, no parallax. The content is the show.
prefers-reduced-motionis honored globally — tokens.css collapses every transition and animation to 0.01ms when the user asks for reduced motion. You get this for free; don't opt out of it.