motion-studio
Installation
SKILL.md
Motion studio
Every video here is a program. Claude writes code that paints a frame for any moment in time, a headless browser (or Node canvas) captures the frames, ffmpeg encodes them. The model cannot emit an MP4; only an agent with a shell can render, listen to and look at its own frames. The prompt is 10 percent of the video; the harness (renderer, sound, critique loop) is the other 90.
When to use
- Launch videos, product reels, showreels, motion ads, UI morph loops, music videos, explainers, short films made in code.
- Turning a product URL, a reference clip or a song into a rendered MP4.
- Building or fixing the pipeline itself:
seek(t), springs, beat grid, SFX, critique loop.
Pick a route first
| Route | When | Read |
|---|---|---|
A. Canvas seek(t) + Playwright + ffmpeg (default) |
Any one-off film; zero dependencies, full control | references/render-engine.md |
| A1. Clawd / p5.brush cartoon | Animations starring the Claude mascot, painted storybook cartoons | references/clawd-mascot.md |
| A2. Hand-drawn Node canvas (no browser) | Storybook, brush-ink and watercolour, low-poly loops, game-feel shorts | references/hand-drawn-canvas.md |
| B. HyperFrames (HTML + GSAP, agent skills) | Web-page thinking, captions, voiceover, templates, Studio editing | references/hyperframes.md |
| C. Remotion (React) | Teams already in React, series, data-driven templates | references/remotion.md |