claude-motion-design

A Claude Code skill to make motion design videos in pure code: HTML + Playwright + ffmpeg. No After Effects, no Remotion license, no editing app.

Every frame is computed from time, rendered frame by frame, blended for motion blur, and cut to the beat of the music. Every sound effect lands on its measured peak.

The example above is the launch video of Howseen (AI visibility tracking: see if ChatGPT, Gemini and Perplexity recommend your brand). It was made with Claude Opus 5.5 and this skill, in 5 iterations. Its full source is in examples/howseen-launch.

Why code instead of an editor

• Deterministic: the whole film is one seek(t) function. Same input, same frames, every time. Fix one scene without touching the rest.
• Free: Chromium, ffmpeg, Python. No license, no subscription.
• Beat-synced by construction: scenes are placed on a beat map, the music drop is aligned to the key visual moment, SFX are placed by peak.
• Iterable by an AI: "make the transitions faster", "change the music", "add a 3D cube on the drop" are just code changes.

Install

1. Copy the skill into Claude Code:

   mkdir -p ~/.claude/skills && cp -r skill/motion-design ~/.claude/skills/
   

2. Python deps: pip install playwright imageio-ffmpeg numpy pillow && python -m playwright install chromium
3. In Claude Code, ask for a video, or type /motion-design.

Run the example

cd examples/howseen-launch
python fetch_assets.py              # downloads the free music, SFX, logos and font (not redistributed here)
python -m http.server 8000 &        # serve the film
python render.py probe 1 8 15 20    # quick stills -> probe/sheet.png
python render.py full               # 24 s, 60 fps, subframe motion blur -> out/video.mp4
python audio.py                     # music + SFX by peak, -14 LUFS -> out/audio.wav

Then mux: ffmpeg -i out/video.mp4 -i out/audio.wav -map 0:v -map 1:a -c:v libx264 -crf 16 -c:a aac -shortest out/final.mp4

What the skill covers