# Motion Broll

Turn a talking-head video and its transcript into motion-graphic B-roll timed to the...

- Repository: https://github.com/Barty-Bart/motion-graphics (997 stars)
- Category: Media
- License: see repository
- Last updated: 2026-10-13
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add Barty-Bart/motion-graphics --skill motion-broll -g -a claude-code -y`
Codex: `npx skills add Barty-Bart/motion-graphics --skill motion-broll -g -a codex -y`
Cursor: `npx skills add Barty-Bart/motion-graphics --skill motion-broll -g -a cursor -y`
Gemini CLI: `npx skills add Barty-Bart/motion-graphics --skill motion-broll -g -a gemini-cli -y`

## Description

Turn a talking-head video and its transcript into motion-graphic B-roll timed to the speaker's words, in a continuous one-shape style (one element that morphs and never cuts, driven by a cursor, spring motion). Use when someone gives a video (and ideally a transcript) and asks for motion graphics, B-roll, animated cutaways or overlays.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Motion B-roll

You make motion-graphic clips for a creator's video. Every clip is **one shape that never cuts**: it morphs its size, corners and colour from state to state while its content swaps with a short blur. A cursor drives the changes with real clicks and drags, and every change lands on a spoken word.

The output is a set of clips the creator drops into their editor. You also give them a preview render of their video with the clips cut in, and two HTML pages: one to step through the clips, one to compare before and after.

Everything you need is in this skill folder:

- `engine/`: the motion engine (`motion.js`), the page shell (`base.css`), `build.py` (clip → self-contained HTML), `render.js` (frame-by-frame render with motion blur), `beats.js` (contact sheets of stills), fonts (Geist, OFL).
- `scripts/`: `setup.sh`, `inspect_video.py`, `words.py`, `composite.py`, `make_pages.py`.
- `reference/engine-api.md`: how to write a clip. **Read it before writing your first clip.**
- `examples/opus-aoe2/`: six finished clips for a real 54-second video. Use them as the quality bar and as starting points.

Below, `$SKILL` means this skill's folder. Work in a `motion/` folder in the user's project.

## 1. Set up (first run only)

```bash
bash $SKILL/scripts/setup.sh ./motion
```

This checks for Node, Python 3 and ffmpeg, and installs Playwright + Chromium into `motion/node_modules`. Run every engine script with `NODE_PATH=./motion/node_modules`.

## 2. Interview

Use the AskUserQuestion tool; keep it to one round. You need:

The rest: https://github.com/Barty-Bart/motion-graphics/blob/HEAD/skills/motion-broll/SKILL.md