§1
The routing graph
click any node · if it isn't adjacent, the machine hops there one seam at a time · newest request always wins
Try this: while asleep, click BURST. Watch it route SLEEP → IDLE → ALERT → BURST, one hop per seam — then fire, and auto-finish back to IDLE. Now spam two different nodes before the seam hits: only the last one survives.
§2
The rules
borrowed from how stateful media formats think, hand-rolled in ~150 lines
Deterministic graph
States and legal edges are data, not code — inputs can only request routes the graph allows.
Seam-accurate
Each state is a loop with a period. Transitions never interrupt mid-cycle — they land on the seam, so motion never pops.
Latest wins
Requests don't queue up. A new request replaces the pending route — the machine never plays back a backlog of stale clicks.
Authored finishes
BURST is transient by design: it plays once and routes itself home to IDLE. The asset owns its ending, not the caller.
Progressive fallback
Under prefers-reduced-motion the canvas is replaced with host-owned markup; routing still works, transitions are instant.
§3
Why bother
the argument for graphs over handlers
Most interactive pages are a pile of listeners mutating shared flags — and every new trigger multiplies the ways they can contradict each other. Put the same interactions behind a state graph and the contradictions become unrepresentable: there is one current state, one pending route, and one place transitions happen. This study is the smallest possible demonstration; study 02 drives a real UI component with the same machine.
Inspired by the ideas in AVAL — Pixel Point's open format for stateful interactive video (deterministic state graphs, frame-accurate routes, seamless loops, progressive fallback) — reinterpreted here for hand-drawn canvas motion instead of packed video.