motion-kit

Every frame is code. A knowledge kit that lets an AI agent make graphics with code:

videos, explainers, kinetic typography, 3D scenes and games, and then render them to MP4 on its own.

<sub>Not a single generated pixel: the whole film is one HTML file that draws every frame.

▶ Watch it live in your browser · source: examples/demo/demo.html · script: examples/demo/SCRIPT.md</sub>

Why

Models can write graphics code, but without rules they produce the same screensaver every time: a dark navy background, a neon gradient, particles "for atmosphere", everything moving linearly and all at once, text on top of objects, and crossfades as the only transition.

motion-kit is a set of rules and recipes that closes those gaps. The core architectural idea: a frame is a pure function of time, draw(ctx, t). Everything else follows from it:

• seek to any second: a frame does not depend on the previous ones;
• frame-by-frame rendering without stutter: headless Chrome waits for every frame, however long it takes to draw;
• one-line edits: change an easing curve or a color, re-render, and get the same film with exactly one difference;
• sound in sync with the picture: the Web Audio score reads the same event list as the drawing code.

What's in the demo film

The one-minute film was made strictly by this kit. Each scene shows one capability in its own style:

Typing and particles Text types itself out, then scatters into particles. 08 · 07	Stateless fire 650 particles, sprites, additive blending, film grain. 07	Determinism A line draws an astrolabe, the frame rewinds and replays exactly. 01 · 04
3D when you need it Three.js, bloom, ACES, 20,000 shader particles. 11	12 styles, one composition Cuts on the beat, accelerating toward the peak. 03 · 06	Game feel Hitstop, screen shake, squash & stretch, speed ramp. 10
Transitions are data Iris, push, luma, wave, burn, whip pan. 05	Checked like a director A contact sheet and fixes by timecode. 12 · 09	CRT finale Shader post-processing: distortion, scanlines, aberration. 07

Watch it live at kiselas.github.io/every-frame-is-code: the page draws every frame in your browser as you watch. Or open examples/demo/demo.html locally in Chrome. Click to turn on sound, space pauses, arrow keys seek.

Films of 1-3 minutes

Long films need more than good frames: a question, a through-line, chapters, callbacks, and a way to make 20-70 shots feel like one film. 14-long-form.md is the method; runtime/film.js is the machinery every long film needs (a tempo map, shots measured in bars, transitions, a HUD that carries state, statement text, counters, themes, line art and a globe, a score on the same clock, a live preview). The worked example, examples/gps/, is a 90-second explainer on how GPS finds you, in five chapters, with the error of your position as the through-line.

▶ Watch Four Clocks live in your browser · source: examples/gps/film.html · script and sources: examples/gps/SCRIPT.md

To learn from someone else's film: node render/analyze.mjs reference.mp4 out/ writes a report on its shots, pace, tempo and cuts, with contact sheets.

Quick start

motion-kit is packaged as a skill in the open Agent Skills format: a folder with a SKILL.md. The same skill works in Claude and in ChatGPT; only the install location differs.

For a single project, clone into .claude/skills/motion-kit or .agents/skills/motion-kit inside the repository. The agent picks up the skill on its own when the task is about graphics or animation. To call it explicitly: /motion-kit in Claude Code, $motion-kit in Codex, @motion-kit in ChatGPT. Try:

Make a 20-second film about the history of clocks in an engraving style, 1080p, with music.
Show the plan as data first, then the code, then render it and review the contact sheet.

Rendering to MP4 needs Node, Chrome and ffmpeg, so it works where the agent has a terminal: Claude Code and Codex. In ChatGPT and Claude.ai the skill helps plan and write the film, and you render it locally with the command below.

Without skill support. Copy the folder to docs/motion/ and add this to CLAUDE.md or AGENTS.md:

Before any work on graphics, animation or games, read docs/motion/00-agent-brief.md,
then the files relevant to the task.

In a plain chat, attach 00-agent-brief.md and one or two topic files.

Rendering

cd render && npm install
node render.mjs ../film.html ../film.mp4              # the whole film with sound
node render.mjs ../film.html ../part.mp4 --from 20 --to 35 --draft   # quick preview of a fragment
node render.mjs ../film.html ../film.mp4 --profile    # where the time goes, by timecode
./contact-sheet.sh ../film.mp4 ../sheet.png           # 2 frames per second on one image

Frames are captured over CDP and rendered by several browsers in parallel: the 60 s demo renders in about 3 minutes on a laptop, and a draft of a fragment in seconds. What makes a page fast or slow to render is measured in 13-performance.md.

Requires Node 18+, Google Chrome and ffmpeg. The page must expose window.__meta, window.__draw(t) and window.__ready; details in 01-pipeline.md and render/README.md.

The full demo film (1080p, 60 fps, with sound):

node render.mjs ../examples/demo/demo.html ../examples/demo/demo.mp4

Contents

Contributing

Pull requests are welcome: new effect recipes, transitions, prompts that worked for you (with the result), fixes to the code. When you submit a prompt, include a link to the video or its contact sheet.

License

MIT