Spring math and headless Chromium make surprisingly coherent AI-generated B-roll
on: Barty-Bart/motion-graphics
Motion-broll solves a specific, annoying problem: you have a talking-head video, a transcript, and empty screen real estate next to your face, and you want motion graphics that actually sync to what you're saying without spending a day in After Effects.
The mechanism is worth understanding. Every clip is a single continuous shape that morphs — pill to card to terminal to chart — driven by a cursor, never cutting. That's not just an aesthetic choice; it's an architectural one. Each frame is a pure function of time, with springs modeled as closed-form step responses. A value that changes target multiple times is the sum of one spring per change. No CSS transitions, no timers, no stateful animation loop. The consequence: any frame can be rendered in isolation, which is what makes headless Chromium capture practical. Four sub-frames per frame across a 180-degree shutter, blended by ffmpeg into motion blur. The math is doing real work here.
The output format is thoughtful. Full-frame cutaways come back as MP4. Panels designed to sit in the empty space beside a picture-in-picture shot come back as transparent ProRes 4444 MOV files — the right format for dropping into a real editor without a compositing fight. Files are named by their timeline position, so 04-master-prompt_0m32s40.mp4 lands where it belongs. You also get a preview render, a side-by-side comparison page, and a TIMING.md that documents every clip's in and out point against the transcript line it covers.
The workflow is agentic in the honest sense: Claude Code inspects the footage for resolution, frame rate, and layout including picture-in-picture geometry, estimates word timings from an SRT, proposes a clip plan with explicit reasoning for each choice, waits for approval, builds the clips, checks stills at key words, and fixes what's off. The README is explicit that it never invents numbers — bars show relative size, text uses skeleton lines until you supply real figures. That's a meaningful constraint to state upfront.
Requirements are Node 18+, Python 3, and ffmpeg with the ProRes encoder. Playwright and Chromium install locally on first run. The install path is npx skills add Barty-Bart/motion-graphics, targeting Claude Code's skills convention, though the README notes it works in other agents that read skills too.
This is early — one skill exists, more are promised — but the single skill that does exist has a coherent design philosophy rather than a pile of options. The spring math, the no-cut morphing constraint, the ProRes output, the approval gate before rendering: these are decisions, not defaults.
A Claude Code skill that turns a video and transcript into timeline-ready motion-graphic B-roll using pure-function spring animation and headless Chromium capture.