Motion
Motion behaves like light moving across a façade: slow to arrive, exact when it lands, and never the reason you looked.
8.1
Principles
Content is always visible by default. Motion adds a moment of arrival; it never gates what a reader can see.
- One authored moment per viewThe page’s main image or headline arrives; everything else is simply there. No identical fade on every section.
- Exponential ease-outFast start, long settle. Nothing bounces, overshoots or springs.
- Masks, not slidesImages reveal through a rising mask, the way a print is pulled from a frame. Elements do not fly in from the side.
- Interface motion is shortHover and state changes take 160 ms; panels and sheets 320 ms.
8.2
Vocabulary
Three movements cover the site. Press replay to see each again.
With clarity.
- Page transitionsCross-document view transitions where supported: the outgoing page fades to Gallery in 200 ms, the incoming title rises. Listing card images morph into the gallery hero.
- ParallaxOnly on full-bleed architectural photographs, at most 6% of the image height, and only when the image is taller than its frame. Never on text.
- MapPans and zooms ease over 320 ms; the selected pin changes color instantly.
8.3
Tokens
Two curves and four durations. Anything else needs a reason written beside it.
| Token | Value | Use |
|---|---|---|
--dur-1 | 160 ms | Hover, focus, color changes |
--dur-2 | 320 ms | Menus, filter panels, sheets, accordions |
--dur-3 | 640 ms | Title rise, rule draw |
--dur-reveal | 1100 ms | Image reveal, one per view |
--ease-out | .16, 1, .3, 1 | Everything that arrives |
--ease-inout | .65, 0, .35, 1 | Things that move and stay (map pans) |
8.4
Never
| Never | Instead |
|---|---|
| Bounce or spring | Exponential ease-out that settles. |
| Scroll-jacking | The reader’s scroll always moves the page by the amount they scrolled. |
| Fade-in on every block | One authored moment per view; the rest is present. |
| Floating cards, blobs, cursor trails | Stillness. The architecture is the interest. |
| Animated logo letters | The mark appears whole. It may fade in with the page; it never assembles. |
| Auto-advancing carousels | Galleries move only when the visitor moves them. |
8.5
Reduced motion
When a visitor’s system asks for reduced motion, every duration token resolves to zero. Content appears in its final state; state changes still happen, instantly. The demos above follow this rule.
- CSS
@media (prefers-reduced-motion: reduce)sets every--dur-*to 0 ms in tokens.css. - ScriptReveal classes are added only when motion is allowed and IntersectionObserver exists; without either, nothing is hidden.
- VideoNever autoplays with motion preference set; poster frame shown with a play control.