Motion

Five things motion is allowed to say.

If a movement does not answer one of these, it does not happen. Luxury here is restraint: the fewer things move, the more each movement means.

• Fromwhere something came from — a run drops out of its row, not from the sky
• Towhere it went — a dismissed ask leaves the way it came
• Changedwhat is different now — a state glyph turns, a count advances
• Activewhat is working — one pulse, on one glyph, at 1.6s
• Completedwhat finished — a check, a hold, then stillness

Seven durations. Four easings.

The bars below are the values: press Play and each dot travels its track in exactly its duration; each curve is drawn from its cubic-bezier.

Nine named patterns, demo beside spec.

Every pattern in tokens/motion.json, live on the left, specified on the right. The names are the ones used in the CSS and the engine.

ambient-nature · appears still

Carol M. Highsmith, Library of Congress. Watch for a minute; it should feel like weather, not a loop.

09ambient-nature

What moves first.

A surface enters in the order you read it: the statement, its meta, the rows one after another, Milo's activity line, then the figure. Nothing overlaps enough to feel busy; nothing waits long enough to feel slow.

Today · entering

What matters now

Cut the Daily Bread Day 4 opener.

◇ Daily Breadest. 40 min⌁LocalStart

• □
  Reply to the FAM print proof◇ FAM
  ◌Queued
• □
  Approve Euangelion render batch 7◇ Euangelion
  ◉Needs you
• +
  3 more today
  tucked

◉ Milo is rendering Euangelion batch 8 on the M4 · 3 of 12 · 2m 14s

Replayidle

statement

0 · slow meta

+80 row 1

+140 row 2

+180 row 3

+220 activity

+360 figure

+600

scale: 1 unit = 12ms · total ≈ 960ms · each beat = emerge (slow · enter)

Ten percent of images move.

The image engine has its own motion: reveal, drift, glitch and pixels, applied with data-fx. It is specified on 05 Imagery §animated; one example here so the catalogue is complete.

mode

data-fx="reveal" — once, when scrolled into view

duration

1500ms, ease-out cubic (print easing approximation)

stages

original → pixels → dither → channels → interpretation → data

after

holds the recipe; nothing recomputes at rest

reduced

final frame drawn immediately

others

drift (breathes every 4.2s) · glitch (≤420ms print burst, seconds apart) · pixels (24px → clean)

Nothing is lost except the movement.

Under prefers-reduced-motion: reduce every transition collapses to an opacity change of 120ms or less, ambient motion stops, and the dither transition draws its final frame at once.