Pip and the Missing Glow: a children's short drawn entirely by code

In Pip's garden, water carries light. Every evening it runs down a stone channel, and each flower glows as the water passes its roots. One night the channel runs dry and Pip's flower goes dark. He and two new friends, Bram the beetle and Luma the moth, follow the channel upstream to find out why.

Pip and the Missing Glow is a 135-second paper-cut animation for children aged 6 to 8. There are no images, no 3D engine and no AI-generated pictures in it. Every frame is drawn by about 8,000 lines of plain JavaScript on a 2D canvas, and the code is in a companion repository you can read, run and remix.

An actual frame from the film.

** Watch the film on YouTube ** (2 minutes 15 seconds, English narration, captions).

A rule the viewer can see

Every good small story starts with one rule about how its world works. Here it is water carries light, and the film shows it before it needs it. In the first seconds water reaches a flower's root and its light climbs the stem. When the flowers go dark later, the viewer already knows what is missing.

The problem is a curled dry leaf jammed in the stone spout far upstream, its stem pinned under a river stone. Pip tries alone and is thrown on his back. It takes three different strengths: Bram pushes the stone, Luma lifts the leaf's tip, and Pip unrolls the curl. The leaf pops free, the pond bursts out, and the light races home ahead of them.

Try the same pattern on your own idea: one visible cause, one obstacle, one shared solution.

How the code draws a film

The renderer is small. A pinhole camera looks at flat paper cards placed at depth; each card is a shape filled with a gradient, a fibre texture and a soft lift shadow. The renderer sorts the cards far to near, lights them, blurs them by distance from the focus plane, and grades the frame with bloom, vignette and grain.

On top of it sit four departments, one file each: the garden (`world.js`), the three rigged cut-out puppets (`cast.js`), the water, glow and splashes (`fx.js`), and the story (`shots.js` with one file per act). The story file turns film time into a shared state, such as how far the water has run, which flowers are lit and how curled the leaf is. Each shot reads that state and decides the camera, the poses and the light.

The rule that holds it together: every frame is a pure function of time. No randomness, no clock, no memory of the previous frame. Frame 3,000 looks the same whether you render it first, last or alone. That is what makes the next part possible.

Built by directing AI coding agents

Almost none of the drawing code was typed by hand. It was written by AI coding agents working in parallel, directed the way a small animation studio directs its departments:

1. One reference still for the look. Agents converge on what they can see, so every builder matched one picture of a bug's-eye paper garden at dusk. The picture is not in the film; it is a target.
2. A written contract before any module. Units and geography, the shared state, every module's API and the rules (no images, no randomness, no clocks). Three agents building three files then fit on the first try.
3. One owner per file, each with a lab. A lab is a test scene that uses only the core and one module, so the garden, the puppets and the water were built at the same time.
4. Reviews by looking at frames, not code. A second agent renders stills at times it chooses and judges them against a top-tier animated short, at phone size, with the sound off.
5. Outside reviews in rounds. A different model reviewed each full cut. The notes were fixed one round at a time and each round was judged again.

The last rounds were about things only a viewer notices: the gasp at three seconds was too fast and looked doubled on a phone, and Pip's part in the teamwork had to visibly unwind the leaf. Each fix was one small change, checked on the exact frames that showed it.

Sound, made locally

The soundtrack has three stems. The narration is eleven short lines, each directed and recorded with an open text-to-speech model running locally. The score is seven short cues from an open music model, one per section of the story, so the music turns where the story turns. Every sound effect, from crickets to the leaf uncurling, is a few lines of signal-processing code, as repeatable as the picture. A small mixer places everything on the timeline, ducks the music under the voice and writes captions.

Try it

The repository has the whole film, the mixer, the prompts we gave the agents and a guide to the method. You need Node.js 20 or newer; FFmpeg for the full film.

npm install
npx playwright install chromium
python3 -m http.server 8000 -d film

Open `http://localhost:8000/comp.html?play` to watch the film play in your browser, or `comp.html?t=68` for one frame. `node film/render.mjs --out out/picture.mp4` renders all 4,050 frames at 1920x1080.

Start small: change a colour in `world.js`, render one still, and look. Then try a shot of your own.

Honest limits

• The film's narration and score files are not in the repository. The sound guide says how we made them, and the mixer works with any recordings you supply.
• Rendering the whole film takes about an hour on a fast laptop; single frames take about half a second.
• The narration is in English.

Keep building

Disclosure: the team behind this film also builds the products below. They are optional, and the example code never sends them data.

• ** ProcVideos ** shows more videos made with code.
• ** Attain OS ** is a workspace for briefs, tasks and docs, useful for planning a series.
• ** AttainSoft ** builds custom software, if you want your own story pipeline.

Start with one sentence about how your world works, then make one small action prove it.