Motion Broll
Turn a talking-head video and its transcript into motion-graphic B-roll timed to the...
Install
npx skills add Barty-Bart/motion-graphics --skill motion-broll -g -a claude-code -y- Repository
- Barty-Bart/motion-graphics997
- Category
- Media
- Updated
- 22d ago
- License
- See repository
- Context cost
- Mediumabout 2,136 tokens
- Runs scripts
- Yes, review before use
What it does
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.
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 $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:
