motion-broll is a Claude Code skill that takes a video and a transcript and cuts in motion-graphic B-roll timed to your words

A screen recording and an SRT file are now enough to get back timed motion-graphic clips, cut in place. Barty-Bart published a Claude Code skill pack called motion-graphics on 25 September 2026 and it has picked up 138 stars in two days. The first skill in the pack, motion-broll, takes a video and its transcript and produces motion-graphic B-roll timed to the words being spoken.

What you run and what you get back

You install the skill with npx skills add Barty-Bart/motion-graphics into Claude Code, or drop the folder into .claude/skills/. Then you invoke /motion-broll, point it at a video and any transcript file (an SRT from an editor, Descript or YouTube all work), answer a few questions, and approve a plan. The skill reads the footage for resolution, frame rate and layout (including whether there is a picture-in-picture that changes size), estimates word timings, then plans each clip in a table and waits for your yes before it renders.

The output has a shape. Each clip is a single continuous shape that keeps morphing, from a pill to a card to a terminal to a chart, with a cursor driving every change and no cut. Full-frame cutaways come back as MP4. Panels that sit next to you in empty space come back as transparent ProRes 4444 .mov files, so you can drop them into your own editor. There is also a preview render of the whole video with the clips already cut in, a side-by-side comparison page, and a TIMING.md file listing every clip with its in and out points and the transcript line it covers.

How it renders

Every frame is a pure function of time. Springs are closed-form step responses, and a value that changes target more than once is the sum of one spring per change. There are no CSS transitions or timers, so any frame can be rendered on its own, in any order. The clips are small HTML files on a shared engine, and headless Chromium captures 4 sub-frames per output frame across a 180-degree shutter, then FFmpeg blends them into motion blur at the video's own frame rate.

The requirements are Node 18+, Python 3 and FFmpeg with the ProRes encoder. On first run the skill installs Playwright and Chromium into a local motion/ folder.

The one rule that reads like a fix

Bars show relative size, and text uses skeleton lines, until you give the skill the real numbers. This is a small design decision with a large effect: the skill refuses to invent a figure or a fact for the visual, so a chart is a proportion and a headline is a placeholder until you write the real one. For a walkthrough where the on-screen number is the whole point of the shot, this is what saves the clip from being confidently wrong.

The audience

Anyone who records regular walkthroughs (product demos, feature videos, engineering explainers, founder updates) has the same problem: the raw recording is done in an afternoon, and the graphics to make it watchable are another week with an editor. This skill puts that second step behind a command, timed to the transcript, and returns clips a real editor can still drop into a timeline. The trade is that the motion vocabulary is one continuous morph rather than the whole After Effects palette, and the input has to be a video with a transcript. For that trade it is fast, deterministic and free.

Source

Primary source: Barty-Bart/motion-graphics on GitHub.