Twenty motion moments, built on one vocabulary rather than twenty effects:
twelve keyframes in layout.css parameterised by custom properties, so a
single mo-arrive serves the toast, row arrivals, the developing avatar,
the filed slip and the departing ballot bar.
Every duration and delay is multiplied by --mo. At 0 — which is what
prefers-reduced-motion: reduce sets — each keyframe collapses onto its
own end state, so the app renders exactly what it rendered before any of
this existed. That is the whole reduced-motion story, and it is checked:
both modes land on identical computed states.
The moments: the ink stamp on a cast vote, with the meter filling and the counter rolling beside it; a nomination slip that tucks into the chrome and stays there, peeking out, as a link back to your ballot; a ballot-complete cascade and an unranked, screenshot-able ballot card; the pending badge's telegraph wire resolving into a drawn check; a split-flap final minute; the "Another" reel; the closing bell; stamped copy buttons; developing avatars; newsprint loading states; staggered pagination; a theme crossfade; and a blank ballot in place of two dashed boxes.
Two bugs surfaced on the way and are fixed here. MyRecords never polled,
so a 'pending' badge only ever resolved on a manual refresh; it now polls
while anything is pending and stops when nothing is. And lastWrite was
published after refresh() had already yielded on a network read, so the
ceremony fired a full appview round trip after the state it celebrates had
painted; the flag now lands in the same synchronous block as the counts.
The palette loses green and red entirely. In OKLCH the paper sits at hue 92
and the amber at 104 — the amber is the paper's own hue at ink strength,
which is why it never fought the design, and a stock success green at 156
always did. So emphasis is carried the way a newspaper carries it: ink for a
state that is confirmed, amber for a state that needs the reader, the accent
blue for what is interactive. Five tokens retire; warnink arrives for
caution set on paper rather than in an amber block.
Also adds grid-paper, ruled paper for the two surfaces that are a ground
rather than a card: the masthead and the empty pool.
Co-Authored-By: Claude Opus 5 noreply@anthropic.com