Step-through visualizations of distributed-system and agent-runtime behavior, built on a small
library of animation-disciplined primitives (src/lib).
- Tokens are the only things that MOVE — one spring, flight by
layoutId. - Facts (stream entries) APPEAR in place — scale + blur materialize, no travel.
- Messages reveal toward their destination with one directional pulse.
- State values replace or expand in place; they never travel between containers.
- Every container reserves its space up front — nothing ever shifts.
- Placement is render location — render a Token in the container it occupies; all motion is derived from where JSX puts things.
| Component | Represents | Surface |
|---|---|---|
Stream (.Entry .Divider .Cursor) |
append-only log; facts never leave | bordered inset |
Buffer / Gate |
transit capacity / decision point | dashed outline |
Token |
matter in transit | raised chip |
StateValue |
labeled state; measured replacement or stable keyed segments | divided cell |
Channel (.Message) |
link between actors, directed traffic | — |
Actor / Stage / Sim |
participants and layout | panel |
Narration / Stepper |
story and keyboard scrubbing | — |
Knob / OptionPicker |
shortcut-enabled scenario controls | divided cell |
Term |
narration reference linked to rendered targets | dotted underline |
bun install
bun run dev # http://localhost:5959Sims live in src/sims/, the component playground in src/pages/playground.tsx.