// foundations
Motion
How fast things move and how they settle.
The idea
Things switch on, slide into place and stop. Nothing bounces, wobbles or spins. It matches the logo: one thing lights up, cleanly.
Durations
Press play to see each one move the same distance.
--duration-instant · 80ms · pressed states
--duration-fast · 140ms · hover, focus, color changes
--duration-base · 220ms · menus and tooltips appearing
--duration-slow · 360ms · panels, page-level moves
Uses --ease-out
Easing
| Token | Feels like | Use it for |
|---|---|---|
| --ease-out | Starts fast, settles gently | Anything arriving. The default. |
| --ease-in | Starts slow, leaves fast | Anything going away. |
| --ease-in-out | Gentle at both ends | Something moving from one place to another. |
Rules
- No bounce, spring or overshoot. Ever.
- Short distances. Things move 8 to 24 pixels, not across the screen.
- Fade and slide together. A fade alone looks like a glitch.
- One thing moves at a time, or a group moves as one.
- Scroll reveals play once and are subtle. The page is not a slideshow.
- If someone has asked their device for reduced motion, every duration becomes zero. This is already built into the tokens.
In video
- The logo sting: the two M's land in off-white, then the 1 lights between them. About two seconds.
- On the site, the lit square in a divider steps along eight squares, one at a time, then steps back. One and a half seconds a step.
- Every video ends on the stacked mark, held for at least a second and a half.
- Hard cuts and short fades. No long eases.