Deterministic animation from JSON config is a smart fit for agent workflows

The core idea here is elegant: a single JSON file describes a system, and the tool renders it as a looping animated architecture diagram — packets flowing along wires, counters ticking, status bars flipping state, a scrolling log — output as an H.264 mp4 or a live web page. No pip packages. Python 3.8+, Chrome or Chromium, ffmpeg. That's the entire dependency surface.

What makes the rendering reliable is the determinism model. Every visual element is a pure function of time t. No Math.random, no CSS animation, no wall clock — random-looking picks use a fixed-seed integer hash. The renderer calls window.seek(i/fps) and screenshots. The README reports byte-identical decoded frames across two separate renders of the same config, verified with ffmpeg framemd5 hashes across all 900 frames of the Codex example. That's a meaningful guarantee for anything you'd want to reproduce or version-control.

The config schema covers a real range: box, path, flow, log, tarrow, counter, cycle, gauge, lane, triggers. Conditional highlighting via when/then lets you wire machine variables to visual state — a box lights up when a counter hits a particular range, a path changes colour when a flag flips. The motion grammar is documented separately in references/motion-grammar.md, which suggests the authors thought carefully about what the animation vocabulary actually is, rather than leaving it implicit in template code.

The repo is also structured as a Claude Code skill via SKILL.md, meaning an agent can load it from ~/.claude/skills/live-panel/ and invoke the render pipeline directly. That's a small but concrete integration point for anyone building agent workflows that need to produce visual artifacts.

The credits section is unusually honest. The visual style and motion grammar are explicitly attributed to a specific post by @thedelost, and the two main examples are described as recreations of other people's designs, not original work. The MIT license explicitly carves those examples out. That kind of provenance clarity is rare and worth noting.

Practical limits are real. Windows is unsupported natively — Chrome is driven over DevTools on POSIX file descriptors 3 and 4, which Windows doesn't have. WSL works. Positions in configs are absolute canvas pixels, so switching aspect ratios means re-authoring layout from scratch. Font rendering affects glyph widths enough that check_frames.py should be re-run after any font change. The check_frames.py script samples around 120 time points and measures text overflow and overlap from the DOM — it caught a real layout fault in the Airbnb example before the README was finalized, which is a good sign the tooling is actually used rather than just described.