Foundations
Motion
One curve, three durations, and a reduced-motion rule that is not optional.
One easing curve for the whole system. Three durations: --fast for a state flip, --mid for a panel, --slow for something the size of a page. A component that needs a fourth is usually doing two things.
Every animation in the package is gated behind motion-safe, and the keyframe layer carries one reduced-motion rule that stops anything marked data-m22-animated. A reader who asked for less motion gets the end state, not a faster version of the same move.
Motion tokens
| Token | Value | Notes | |
|---|---|---|---|
--ease | cubic-bezier(0.2, 0.7, 0.3, 1) | ─── Motion ─── | |
--fast | 0.13s | — | |
--mid | 0.22s | — | |
--slow | 0.34s | — | |
--ease-out-expo | var(--ease) | — | |
--duration-fast | var(--fast) | — | |
--duration-base | var(--mid) | — | |
--duration-slow | var(--slow) | — |