Motion
Four durations, three easings, one spinner. Reduced motion is a token mode.
Durations compared
Each bar moves with its own duration and the standard easing. Reduced motion collapses all of them to 0 ms.
- duration.instant
- duration.fast
- duration.base
- duration.slow
- duration.spin
Tokens
The reduced column is the value under the OS preference or inside data-motion="reduced".
| Token | Value | Reduced motion | Utility |
|---|---|---|---|
| duration.instant | 0ms | 0ms | duration-instant |
| duration.fast | 100ms | 0ms | duration-fast |
| duration.base | 160ms | 0ms | duration-base |
| duration.slow | 240ms | 0ms | duration-slow |
| duration.spin | 1000ms | 0ms | duration-spin |
| ease.standard | cubic-bezier(0.2, 0, 0, 1) | unchanged | ease-standard |
| ease.enter | cubic-bezier(0, 0, 0.2, 1) | unchanged | ease-enter |
| ease.exit | cubic-bezier(0.4, 0, 1, 1) | unchanged | ease-exit |
| animation.spin | macaw-spin 1000ms linear infinite | none | animate-spin |