animdiagram

Looping animated SVG explainers. One file, one <style> block, all motion as CSS @keyframes. Works in <img>, Markdown, Substack, GitHub. No script, no SMIL, no fonts to load, no build step.

The design discipline comes from diagram-design (deletion first, one accent, complexity budget, 4px grid, orthogonal connectors, static frame must read on its own). The motion grammar is distilled from the animated figures in SpacetimeDB's "How does Spacetime scale" series: packets on a shared story clock, arrival rings, destination glows, idle ticks, ambient streams, phase captions, growing bars, state swaps.

References load on demand:

Need	File
Tokens, type ramp, node treatments, badges, light skin	references/style-guide.md
Grid, connectors, nodes, zones, tiles, legend, anti-patterns	references/layout.md
Motion primitives, timing math, budgets, reduced motion	references/motion-grammar.md
Brief + event list → `spec.json` format for `timeline.py`	references/storyboard.md
Pre-ship taste gate	references/checklist.md

Assets: assets/template.svg (dark), assets/template-light.svg, worked example assets/example-async-jobs.svg + .spec.json.