Code Film: frame-exact WebGL videos with a synthesized score

Code Film is the pipeline behind a real 168-second product film, its launch cut and its teaser, packaged so your agent can build the same kind of film. It renders a browser page frame by frame with no screen recording, no stock music and no AI video model. Every frame is a pure function of time, so a still at any moment matches the full render, and changing a cue means editing one number.

How it works

• timeline.json holds every cue time. The picture (Three.js and GSAP), the music (numpy) and the checks all read it, so a hit lands on the same frame in the picture and the same sample in the audio.
• render.js serves the page locally, seeks headless Chromium to each frame, and pipes PNG screenshots into ffmpeg (x264, bt709-tagged). Any page error, console warning or failed request fails the render, and it prints the WebGL renderer, so a fallback to software rendering is visible.
• music.py is a small synthesizer with kick, clap, hats, sub, pads, plucks, FM bells, impacts and swells. It also handles stop-time before hits, sidechain, delay and reverb. There are no samples, so the music has no licence to clear.
• Cuts are edit lists over one timeline: ranges plus full-frame chapter cards, each with its own hit and chord. A teaser or a launch cut is a JSON edit, not a re-edit.

Proof, not vibes

• verify.py checks the container, audio level and dropouts, a transient on every listed cue (onset within -15..+20 ms), scene content, and that the flash and chapter cards land on the right frame. It exits 0 only when every check passes.
• sabotage.py breaks copies of your render on purpose: audio 100 ms late, picture one frame early or late, a blank card. It passes only if verify rejects each copy.
• seekcheck.py compares random-access stills with the sequential render. This catches state that leaks between frames.
• hits.py and contour.py show what your agent cannot hear: the margin on every cue and the energy of each bar, so a flat section is caught as a number.

What is included

• A tested 12-second starter project with 3 scenes, 3 audio hits, typed text, a white flash and a cut with a chapter card. One command copies it.
• 11 reference guides: architecture, timeline, picture (toon look, particles, pinning 3D to the DOM, GSAP rules), VRM/glTF characters, rendering, cuts, music, verification, delivery (web copies, GIFs, posters), briefs for consulting a second agent, and a symptom → cause → fix table.
• 8 scripts: project setup, sabotage, seek check, hits, contour, contact sheet, music remux, and a skill self-check.

Why not Remotion

There is no React and no Remotion company licence. The music is synthesized and verified rather than dropped in, and sabotage proves that the sync checks can fail.

Requirements

Node 20.11+ (tested on 24), Python 3 with numpy, ffmpeg and ffprobe, and Playwright's Chromium. Works with Claude Code and Codex, and includes notes for long renders in both.

Limits, stated plainly

• Tested on macOS with Apple silicon (GPU WebGL through Metal). The flags for Linux and Windows are listed but untested; the render prints which WebGL renderer it used.
• Neither you nor your agent can hear the score or watch playback through these checks. They prove timing and presence, not taste, so a person still needs to watch and listen before you publish.
• The demo video is the teaser of a product film made with this pipeline. Its character is the creator's own and is not included: the starter uses system fonts and has no character, and the character guide explains how to add your own VRM without bundling it.
• Rendering is slower than real time: the starter runs at about 26 frames/s on an Apple M5, and film grain makes it 6 to 11 times slower.