Motion
Quick and quiet. Things fade, slide a little and settle; nothing bounces. The lava lamp animation in the background is the only thing that moves on its own.
- Tokens
--duration-*, --ease-*
01 — Durations
Three speeds
Fast for hovers and presses, base for most changes, slow for things entering the page. Press Play to compare.
--duration-fast--duration-base--duration-slow02 — Easing
Two curves
Standard for things that move within the page. Out for things arriving: they start fast and settle.
--ease-standard--ease-out03 — Reduced motion
Respect the setting
- When someone asks for reduced motion, transitions drop to almost nothing, the lava lamp animation freezes, video never autoplays, and charts appear finished.
- Components handle this themselves. In your own CSS, wrap any movement in
@media (prefers-reduced-motion: no-preference), or readJewel.reducedMotion.matchesin a script.
04 — Usage
Use it for
- Fades and short slides that explain where something came from.
- The duration tokens, and one of the two curves.
Avoid
- Bounces, springs and parallax.
- Motion longer than
--duration-slow, except the lava lamp animation and loading indicators. - Animating layout (width, height) when opacity or a transform will do.
05 — Tokens
| Token | Value | What it’s for |
|---|---|---|
--duration-fast | Hover, press | |
--duration-base | Most changes | |
--duration-slow | Entering the page | |
--duration-spin | One turn of a spinner | |
--duration-pulse | Busy badge dot | |
--ease-standard | Moving within the page | |
--ease-out | Arriving | |
--state-pressed-scale | Small controls dip on press |