Create Timed Motion-Graphic B-Roll with Claude Code

What is motion-graphics?

motion-graphics is a repository of focused motion-design skills for Claude Code and other agents that can read skills. Its first available skill, motion-broll, creates motion-graphic B-roll from a source video and transcript.

The skill inspects your footage, estimates when words are spoken, proposes suitable graphics, and renders clips timed to the narration. Each clip uses one continuously morphing shape—for example, a pill can transform into a card, terminal, or chart—rather than cutting between disconnected scenes. A cursor drives the visual changes.

Key features

• Transcript-aware timing: Graphics are aligned with the words in your transcript.
• Footage inspection: The skill reads resolution, frame rate, layout, picture-in-picture sections, and changes in the speaker box size.
• Reviewable planning: It prepares a clip plan and waits for your approval before building the graphics.
• Two output styles: Full-frame cutaways are rendered as MP4 files, while panels designed for empty space beside the speaker use transparent ProRes 4444 MOV files.
• Continuous animation: Elements morph between states without visual cuts.
• Motion blur: Clips are rendered at the source video's frame rate with sub-frame sampling for smoother movement.
• Supporting review files: The output includes a preview, comparison page, clip viewer, and timing document.
• Data restraint: The skill does not invent figures or results. It uses relative bar sizes and skeleton text until real values are supplied.

Requirements

Before installing the skill, make sure your system has the following software:

• Node.js 18 or newer
• Python 3
• ffmpeg with a ProRes encoder

The README notes that the required ProRes encoder is standard in Homebrew builds of ffmpeg. On its first run, the skill also installs Playwright and Chromium into a local motion/ folder.

Install motion-broll

Option 1: Install with npx

Run the repository's skill installer:

npx skills add Barty-Bart/motion-graphics

When prompted, select motion-broll. This approach installs skills from the repository for Claude Code or another compatible agent that reads skills.

Option 2: Copy the skill manually

You can instead copy the skills/motion-broll directory into your project's Claude skills folder:

.claude/skills/

To make the skill available across projects, copy it into your user-level skills folder:

~/.claude/skills/

Prepare your inputs

You need two primary inputs:

1. A video: This is the source footage that will receive the motion graphics.
2. A transcript: An SRT file exported from an editor, Descript, or YouTube is supported by the documented workflow.

The transcript gives the skill the spoken content, while the video provides technical and compositional information such as frame rate, dimensions, and available space around the speaker.

Generate motion-graphic B-roll

Step 1: Start the skill

In your compatible agent, invoke:

/motion-broll

Answer the questions and point the skill to your video and transcript.

Step 2: Let it inspect the footage

The skill reads the video's resolution, frame rate, and layout. It also checks for picture-in-picture sections and whether the speaker box changes size. This analysis helps it decide where a transparent panel can fit and when a full-frame graphic may be more appropriate.

Step 3: Review the estimated timing

motion-broll estimates word timings from the transcript. These timings allow graphic transitions and visual emphasis to correspond with specific words or phrases.

Step 4: Approve the clip plan

Before rendering, the skill presents a plan in a table. For each potential segment, it chooses one of three treatments:

• A full-frame cutaway
• A transparent panel placed in empty space
• No motion graphic

The plan also explains the reason for each choice. Review it carefully and approve it when the proposed placements match your editorial intent.

Step 5: Build and validate the clips

After approval, the skill builds each clip and checks still frames at important words. It can then correct elements that do not align properly with those moments.

Step 6: Render and review

The skill renders the clips at the video's frame rate with motion blur. It then generates a preview of the edited video and browser-based pages for inspecting the results.

Understand the generated files

The output is designed to support both review and final editing.

• Timeline-named clips: Filenames indicate where clips belong, such as 04-master-prompt_0m32s40.mp4.
• MP4 cutaways: Full-frame motion graphics are delivered as MP4 files.
• Transparent MOV panels: Overlay panels are rendered as ProRes 4444 MOV files with transparency.
• Preview render: A version of the source video with the clips inserted lets you evaluate pacing and placement.
• compare.html: This page synchronizes the original and enhanced versions. It supports side-by-side, stacked, and wipe comparisons.
• viewer.html: This page lets you inspect the generated clips one at a time.
• TIMING.md: This document records every clip's in point, out point, and covered transcript line.

The generated preview is intended for review. For the final cut, import the individual clips into your own video editor.

Example workflow

A practical editing workflow can follow these steps:

1. Export your source video and an SRT transcript.
2. Run /motion-broll and provide both files.
3. Review the proposed cutaways, transparent panels, and intentionally unadorned sections.
4. Approve the plan and allow the skill to render the clips.
5. Open compare.html to evaluate the original and enhanced versions together.
6. Use viewer.html to inspect individual animations.
7. Consult TIMING.md for precise placement information.
8. Import the MP4 and transparent ProRes 4444 MOV files into your editor for the final assembly.

How the rendering system works

Every animation frame is calculated as a pure function of time. The engine uses closed-form spring step responses, and a property whose target changes repeatedly is represented as the sum of one spring per change.

Because the system does not depend on CSS transitions or timers, it can render any frame independently. This is useful for deterministic frame capture and offline video rendering.

Each clip is a small HTML file built on the shared engine at skills/motion-broll/engine/motion.js. Headless Chromium captures four sub-frames for each output frame across a 180-degree shutter. ffmpeg then blends those samples to create motion blur.

Advanced tips

Check the plan before spending time on renders

The approval stage is an important editorial checkpoint. Confirm that full-frame cutaways are reserved for moments where replacing the footage makes sense and that transparent panels occupy genuinely empty areas of the frame.

Use the right output in your editor

Place MP4 cutaways on the main visual track when they should replace the footage. Composite ProRes 4444 MOV panels above the source video so their transparency preserves the underlying shot.

Keep real data separate from placeholders

If exact figures have not been provided, expect relative bars and skeleton text rather than fabricated values. Supply verified figures when the finished graphic needs to communicate specific results.

Review both timing and animation details

Use compare.html for overall pacing and viewer.html for clip-level inspection. Cross-check questionable placements against TIMING.md and the corresponding transcript line.

Study the included worked example

The directory skills/motion-broll/examples/opus-aoe2/ contains the six clips used in the repository's demonstration. It is a useful reference for understanding the structure of completed clips and the intended visual style.

Conclusion

motion-broll provides a structured way to turn narration into synchronized motion-graphic B-roll. It combines footage analysis, transcript-based planning, continuous shape animation, deterministic rendering, and practical review tools. After approving the plan and checking the preview, you can bring the timeline-named clips into your editor to produce the final video.

The project is released under the MIT License. Its Geist fonts use the SIL Open Font License, and its icon paths are adapted from Lucide under the ISC license.