live-panel is a Claude Code skill that turns one JSON file into an animated architecture diagram you can post as a video

Hand-animating an architecture diagram for a social post is slow enough that most developers never bother. live-panel, a small open-source project published yesterday at ythx-101/live-panel-skill, lets a user describe the system in one JSON file and get a 28-second animated video out, with light dots that move along the connectors, a scrolling log, counters that count up over time, and bars that change colour when a threshold is crossed.

The MIT-licensed repository reached 279 stars and 36 forks in the first day after its public commit on 2026-10-03. It ships as a Claude Code skill (SKILL.md), so a coding agent can be asked to build or edit the config directly.

Where the look came from

The project is honest about its origin. The motion grammar and the terminal-dark style are a recreation of a Codex agent-tree animation posted on X by an account called @thedelost, which spread through a quote-post by @slashui. The repository credits both and says examples/codex-agents/ is a redrawn version of that clip, not the author's own code. Two other examples are included: a re-animated version of a Chinese Xiaohongshu infographic by an author named @林纾, and a terminal-style visualisation of figures Airbnb leaders stated in a Latent Space podcast interview. Each example names its source.

What the renderer produces

The config carries two kinds of things. Static elements place text, boxes, lines, paths with arrow heads, glyphs, flows that send packets along a polyline, trigger arrows and a log window. Machines describe everything that changes over time as a pure function of a time variable: counters, cycles, gauges, lane triggers. A when/then rule on an element highlights it when a machine variable enters a given range.

The output is a 1200 by 1500 pixel mp4 at 30 fps, sized for X, or 1080 by 1440 for Xiaohongshu, or 1080 by 1080 square. The project reports that the included Codex example renders to byte-identical decoded frames across two runs, verified by ffmpeg -f framemd5, and that check_frames.py samples around 120 time points to catch text overflow and overlap. The author says a layout error in the first Airbnb example was found this way.

What it takes to run

The only requirements listed are Python 3.8 or newer with the standard library, Chrome or Chromium, and ffmpeg. No pip packages are installed. The code is MIT, and the two example infographics it recreates are credit-bearing and not covered by that grant. The terminal theme falls back through JetBrains Mono, IBM Plex Mono and DejaVu Sans Mono, so the exact look of the examples needs those fonts installed on the rendering machine. Font substitutions change glyph widths, which the author says is why check_frames.py should be re-run after changing fonts.

A developer who writes about their own system, a marketer who posts about a new feature, or a founder who wants a moving diagram above a thread about their architecture, can describe the picture once as data and keep the file alongside the code. When the system changes, the diagram changes with it.

Source

• Primary: ythx-101/live-panel-skill repository, GitHub
• Credit note on the motion grammar: @thedelost on X