Foundation

Motion

Motion explains where you are and what is a door. 400ms or less, transform, opacity, and colour, off under reduced motion.

Principles

Explain or go: Each motion answers a question: where am I, what is a door, what is related.
Short: 400ms or less on cubic-bezier(0.2, 0.7, 0.2, 1). Stated exceptions, all inside illustrations: the agent figure scan (1.4s), its typing dots (1.2s pulse while a figure is playing), and the 404 rings. The agent figure uses CSS ease-out for its steps.
Cheap: Transform, opacity, and colour. One stated exception: the rail marker also animates its height, a single 2px bar that moves nothing else.
Optional: Everything stops under prefers-reduced-motion; without JavaScript every page reads and works.
Rejected: Fade-up on load, parallax, scroll-jacking, cursor effects, hero video, counting numbers. The section-rule draw was dropped on 19 October 2026.

Links, buttons: Colour step, 150ms linear. It is clickable.
Index tile hover: Rule and name turn link colour, 150ms. This is a door.
Playground hover: Name moves 8px right, 150ms ease. This is a door.
Tile to page and back: The page grows out of its tile; Index or Back shrinks it into the tile; Back and Forward replay it. 360ms ease. The tile is the page. See Page transitions.
Thoughts row to article and back: The row grows into the band, the title travels into the headline. 360ms. This row is that article.
Other navigation: Crossfade, 200ms.
Rail marker: 2px marker slides to the section in view, 250ms ease. Where you are.
Scroll-up way back: Fades in and moves 8px down into place, 200ms ease; reverses on the way out. The way back from the middle of a page.
Questions: Answer fades in and moves 4px, 200ms. What opened.
Agent figure: Steps fade in and move 0.4em, 300ms ease-out, 1.5s apart; scan 1.4s and typing dots 1.2s (exceptions). An agent working step by step.
404 rings: Seven rings turn, 14 to 240s, linear (exception). Nothing here, slowly.
Dark mode: No transition. A setting, not an event.

A new motion needs a row here first: where, what moves, time, easing, and what it tells the reader. Then the reduced-motion version. Then the code.