Motion
Motion tells you where something came from, where it went, what changed, what is active and what completed. Quiet, physical, continuous, purposeful. Nothing moves to decorate.
Durations and easings
| Duration | Value | Use |
|---|
| Easing | Curve |
|---|
Named patterns
| Pattern | Duration | Easing | Note |
|---|
Six demonstrations
Render Day 1 voice trackRunning
- Load reference clip0.8s
- Synthesise 2,140 words1m 12s
- Normalise loudness—
Origin is the row itself; the Run drops out of it and folds back into it.
Done. Hero written at 2400×1600.
Fixed top-centre while it runs. Watch the top of the viewport.
- Reprint the series artRunning
Colour tokens crossfade; imagery re-maps to the Nous recipe in dark.
Original → pixels → dither → channels → interpretation → data. Half Dome, Carol M. Highsmith, Library of Congress.
≤2% scale, ≤1% translate over 24s, alternating. Off under reduced motion. Carol M. Highsmith, Library of Congress.
Forbidden
- Toy-like spring overshoot
- AI blobs and orbs
- Constant ambient movement in the interface
- Gratuitous parallax
- Cyberpunk glitches, VHS tearing, random distortion
- Decorative loaders that hide nothing real
- Motion on hover that changes layout
- Animating a painting like cheap AI video
Policy
Under prefers-reduced-motion: reduce, every transition collapses to an opacity change of 120ms or less. Ambient motion stops. The dither transition draws its final frame at once. Nothing is lost except the movement.
This browser: checking…
The tokens do this for you: tokens/milo.css overrides --dur-* inside the media query, and engine/canvas.js reads the same preference.