Theme
Motion
Three durations and three curves. Every duration is zero under prefers-reduced-motion, so components honour the preference without checking it.
Durations
| Token | Value | Use |
|---|---|---|
motion.fast | 150ms | Hover and press feedback. |
motion.base | 200ms | A popover or menu entering. |
motion.slow | 300ms | A dialog or sheet entering. |
Easing
Hover a track to run its curve over motion.slow.
| Token | Value | Preview | Use |
|---|---|---|---|
motion.ease | cubic-bezier(0.2, 0, 0, 1) | The standard curve, for things that move within the page. | |
motion.easeEnter | cubic-bezier(0, 0, 0, 1) | Decelerating, for things that arrive. | |
motion.easeExit | cubic-bezier(0.3, 0, 1, 1) | Accelerating, for things that leave. |