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)