Motion tokens
The values below come straight from tokens/tokens.json
and ship as CSS variables in tokens/tokens.css. Always animate with the token, never a literal number, so kiosk and TV
screens and reduced motion can zero the distances and keep only the fade.
Previews also play when you hover or focus a row. Reduced motion shows no movement.
Durations
| Token | Value | Preview |
|---|---|---|
--sw-dur-fast | 120ms | |
--sw-dur-base | 180ms | |
--sw-dur-slow | 240ms |
Easings
| Token | Value | Preview (240ms) |
|---|---|---|
--sw-ease-standard | cubic-bezier(0.2, 0, 0, 1) | |
--sw-ease-enter | cubic-bezier(0.16, 1, 0.3, 1) | |
--sw-ease-exit | cubic-bezier(0.4, 0, 1, 1) |
Distances
| Token | Value | Kiosk and TV |
|---|---|---|
--sw-enter-y | 8px | 0px |
--sw-pop-scale | 0.98 | 1 |
--sw-pop-offset | 4px | 0px |
--sw-slide-x | 100% | 0% |
Reduced motion: durations 0ms, distances zeroed, fade only.
Portable motion roles and flow
Section titled “Portable motion roles and flow”Token architecture and usage document duration, easing and distance roles, scoped long-duration exceptions, reduced motion and kiosk/TV mapping. Motion flow connects them to choreography and interruption.