claude-motion

A motion design toolkit for coding agents. Remotion skills teach your agent the API. This teaches it taste, makes it check its own frames, and gives it a sound engine. And when the idea is a simulation, not a motion graphic, it renders web sims frame by frame to 60 fps video.

Works with Claude Code and Cursor out of the box (skills in .claude/skills/), and with Codex, OpenCode or anything else that reads AGENTS.md.

_{Made by Claude with this toolkit from one prompt and one revision. No After Effects, no stock sounds. How it was made →}

_{Made by Claude with this toolkit. Left: the crawler swarm (340K+ views on X). Middle: one username → a dossier. Right: a rocket engine explorer with a fly-through and an exploded view.}

Some videos are simulations: 256 agents doubling on the beat, a rocket engine the camera flies through. Those are easier to write as a web page than as React, so sims/ is a second pipeline:

• One HTML page per piece, three.js and fonts inlined, works offline. Open it and it plays live.
• render(t) is a pure function of time. Agents and physics are simulated once at load, so any frame can be drawn on demand.
• Frame-exact capture. Headless Chromium steps the page frame by frame into ffmpeg: 60 fps at 1440×1800 (or any size), no matter how slow a frame is.
• Cuts on the beat. beats.py finds the tempo, bars and drop of a track and hands them to the sim.
• Three examples to take apart: crawlers, dossier, engine (with its sound generated in Python).

npm install && npx playwright install chromium
npm run sims                                                    # → sims/dist/<name>.html
npm run capture -- engine --size 1080x1350 --out out/engine.mp4  # 1440×1800, 60 fps

Ask your agent:

Read sims/README.md and the web-sims skill. Build a 20-second sim of <your idea>
as one HTML page at 1080×1350. Review it with --stills before you render,
then capture it to a 60 fps mp4.

Motion rules with numbers. Easing curves, spring presets, stagger, reading holds, type scale, one-accent color, texture, motivated transitions. Not "make it smooth": bezier(0.16, 1, 0.3, 1) for entrances, exits at half the duration, 0.09 s between words. → motion-design

A self-review loop. Agents can't watch video, but they can look at frames. The agent renders a draft, gets a contact sheet with one timestamped frame per beat, checks it against a list (collisions, clipping, holds, safe area, phone readability) and fixes what it finds before saying it's done. → review-loop

A sound engine. Pure Python stdlib, no samples, no licenses. Generators for typing, clicks, pops, whooshes, risers, chimes, impacts, textures and pads; a mixer that places sounds on the same timeline as the picture; mastering that hits −14 LUFS by itself. The agent writes one cue sheet per video and adds generators when it needs a new sound. → sound-design

One timeline for everything. Every beat is a named timestamp in a JSON file. Scenes, sound and review all read it, so retiming the video retimes the sound and the checks with it.

A reference piece to take apart. The video above, with reusable components: masked text reveals, rolling numbers, film grain, hand-drawn line boil, a background with drifting grid and glow.

Let your agent set it up. Paste this into Claude Code, Cursor, Codex or OpenCode:

Clone https://github.com/whaleyxbt/claude-motion and cd into it.
Check that Node 20+, Python 3 and ffmpeg are installed; install whatever is missing.
Run `npm install` and `npm run build`, then show me out/effort.mp4.
Then read AGENTS.md and the skills in .claude/skills/, and ask me what video I want to make next.
(For simulations and 3D, also run `npx playwright install chromium` and read sims/README.md.)

Or by hand:

git clone https://github.com/whaleyxbt/claude-motion && cd claude-motion
npm install
npm run build        # the example video with sound → out/effort.mp4
npm run studio       # live preview

Then ask for a video:

Make a 15-second 1080×1080 motion graphic announcing <your thing>.
Follow AGENTS.md: storyboard first, then the timeline, review loop, sound.

 idea ─► storyboard ─► timeline.json ─┬─► scenes ─► draft ─► contact sheet ─► look, fix ─┐
                       (every beat)   │                                                  │
                                      │                  ◄──────── repeat ───────────────┘
                                      └─► cue sheet ─► python3 -m sfx ─► waveform + LUFS
                                                                │
                                                 render + mux ─► final MP4

_{What the agent looks at: one tile per beat, labelled with its timestamp.}

A cue sheet is one Python function. Every time comes from the timeline:

from sfx.synth import pop, whoosh

def score(mix, tl):
    s1 = tl["s1"]
    mix.put(s1["title"], whoosh(0.4, 500, 2400, peak=0.45), 0.12)
    for i, t in enumerate(s1["items"]):
        mix.put(t, pop(900 + i * 150, 400), 0.3, pan=-0.4 + i * 0.3)
    mix.typing(s1["typeStart"], s1["typeEnd"], chars=24)

python3 -m sfx sfx/cues/<name>.py renders it, masters it to −14 LUFS with the true peak kept under −2 dBFS, and writes the WAV. sfx/cues/effort.py is the full sound design of the example: 128 sounds and a pad.

_{Sync check: every coral line is a beat from the timeline, and every hit sits on one.}

What works with Claude Opus 5.5 (/effort in Claude Code):

Nothing here needs MCP. These add real capabilities; copy .mcp.json.example to .mcp.json and keep what you want.

Pair it with the official Remotion agent skills for API coverage; this toolkit is the design layer on top.

Node 20+, Python 3, ffmpeg. A system Chromium at /usr/bin/chromium (or $REMOTION_BROWSER) is used if present; otherwise Remotion downloads one on first render.

Code in this repo: MIT. Remotion itself has its own license: free for individuals and small teams, companies above the threshold need a company license.