motion-reel

A Claude Code skill for narrated motion-graphics videos made from HTML. You describe the video; Claude writes the script, synthesises a neural voice-over, builds the scenes as a web page whose every frame is render(t), checks the layout, and renders an MP4 with word-synced captions and a soundtrack generated from the cut list.

The example reel, 20 s at 1080x1920 and 60 fps, made with this kit: docs/demo.mp4 (2 MB, with sound).

Bahasa Indonesia

What it does

• Frames as a function of time. Scenes are plain HTML and CSS driven by one render(t) function. Any frame can be drawn again exactly, previewed at any time with ?t=12, and rendered in parallel.
• Captions only, if you prefer. Set "tts": false in timing.js and nothing is sent to a TTS service; captions run at reading pace.
• Voice-over with word timing. tts.py synthesises one clip per narration line with Microsoft's neural voices through edge-tts, keeps the time of every word, and caches clips so only edited lines are synthesised again. A say.json map fixes words the voice would misread.
• Captions that follow the voice. Each caption word appears when it is spoken. {name} marks in the script let a visual land on a spoken word.
• Speech that respects the cuts. vo.py places each line at its cue, pulls it earlier when it would run into the next section, and reports lines that still do not fit.
• Music on the same grid. music.py synthesises kick, bass, pads, risers, hits and whooshes from the cues in the timing file, so hits land on cuts. Music ducks under speech; the mix is normalised to -16 LUFS (two-pass EBU R128).
• Checks before rendering. check.mjs runs the whole timeline for script errors and reports text that runs off the stage, is clipped, overlaps other text, or frames with nothing visible. reel.py stills renders both sides of every cut into one contact sheet.
• A clean file. H.264 yuv420p limited range with +faststart, which plays in PowerPoint, Windows players and every phone.

Install

As a Claude Code plugin:

claude plugin marketplace add EgiStr/motion-reel
claude plugin install motion-reel@motion-reel

Or copy skills/motion-reel into ~/.claude/skills/.

Requirements: Node 18+, Chrome or Chromium (set CHROME_PATH if it is not found), Python 3.10+ with edge-tts imageio-ffmpeg numpy scipy pillow.

Tested on Windows 11 with Chrome. The Chrome and ffmpeg lookups include the usual macOS and Linux paths, but those have not been tested yet.

Use

Ask Claude for a video, for example: "Make a 45 second vertical explainer with an English narrator about how our CLI caches builds." The skill runs a gated workflow: brief, scaffold, script approval, voice, music, scenes, check, contact sheet, render, delivery notes.

By hand:

python skills/motion-reel/scripts/new_reel.py my-reel
cd my-reel
npm install
python -m pip install edge-tts imageio-ffmpeg numpy scipy pillow
python fonts.py
python reel.py all        # music, voice, check, stills, render, verify

Command	Does
python reel.py voice	Voice clips (cached), caption timing, audio/mix.wav
python reel.py music	Soundtrack from the cues
python reel.py check	Script errors and layout findings
python reel.py stills	Stills mid-section and around every cut, out/sheet.png
python reel.py draft	30 fps review copy
python reel.py render	Final MP4, then size, fps, pixel format and loudness

Layout

skills/motion-reel/
  SKILL.md                 workflow and rules
  references/              pipeline, timing file, motion principles, lib API, voice-over, QA, troubleshooting, methodology
  template/                the kit and a 20 s example (copied by new_reel.py)
  scripts/new_reel.py      starts a project
  evals/                   trigger and behaviour evals

Notes

• edge-tts uses Microsoft's online service without an official API or key. Only the narration text is sent. For commercial work, add a licensed provider; tts.py has a provider hook (see references/voiceover.md).
• Claude can measure audio but cannot hear it. The skill reports pronunciation risks and says when the music was not listened to.
• Every number on screen should have a source; the skill keeps a source table in the project README.

Credits

The approach was compared with HyperFrames, Remotion and manim-voiceover. Ideas taken and how they were changed are listed in references/methodology.md. No code was copied from them.

Example fonts: Space Grotesk, Inter and JetBrains Mono (SIL Open Font License) through @fontsource.

License

MIT