/animating-with-code

name: animating-with-code
description: "Make a short animated film by writing the drawing code yourself: every frame a pure function of time, rendered headlessly to MP4. Covers storyboarding with a per-shot timing sheet of viewer 'reads', blocking key poses as stills, the contact-sheet / frame-strip / crop review loop, and the hand-painted character kit JohnHeibel/ClaudeAnimationBase (p5.js + p5.brush, the Clawd mascot, 31 emotions). Use for 'animate', 'make a cartoon', 'animated short', 'motion graphic', 'Clawd video', 'p5 animation', or any video request where Claude draws the frames. Not for AI-generated footage (creating-video), transcoding or trimming existing video (processing-video), or a comic from footage (drawing-video)."
metadata:
  version: 0.1.0

Animating with code

You write the drawing; a headless browser (or PIL, cairo, ffmpeg) renders it. The method below comes from the ClaudeAnimationBase kit's guide and holds for any renderer. The kit itself is the fastest route to a hand-painted character short.

Before building, name the route and why (Oskar's standing steer, memory 06886186): the kit, a CSS/HTML page captured frame by frame, a pure ffmpeg filtergraph, or PIL/cairo frames.

The contract: frames are pure functions of t

• A shot is `fn(t)`. Same `t`, same pixels. No counters, no state carried between

frames, no integrated physics, no unseeded random. Then frames can render out of order, split across parallel workers, and resume after a crash.

• Stable per-object values come from a hash of an index. Deliberate wobble

("boil") comes from a seed that changes on a fixed clock (the kit uses 12 Hz, each drawing held two frames).

• Reseed per element. A moving element consumes a variable amount of randomness;

without its own seed it shifts the stream for everything drawn after it and the still parts jitter every frame.

Procedure

1. **Storyboard in writing, before any scene code.** One logline (wants ___, but ___, so ___), a small palette with a colour arc, a motif that pays off, and the emotion keys across the whole film. Then per shot: time span, transition in, the event, the reaction, the camera, and the **reads**. 2. **Write the reads.** A read is one thing the viewer must understand, with a start and end time. Each needs time for the eye to find it, to understand it, and to register before the next starts. No two important reads overlap. If they do not fit the shot, lengthen the shot or cut a read. Timing is where generated animation fails most: everything at one brisk speed, events stacked, moments gone before they land. 3. **Check the storyboard:** an event in every shot, a transition at every seam (including in and out of the film), no text, the ending rhymes with the opening. If a person is waiting, show them the storyboard before building. 4. **Block key poses as stills** at each shot's storytelling moments. If the poses do not read as stills, motion will not save them. 5. **Add motion between poses**, one shot at a time, in order: anticipation before big moves, slow in/out instead of raw lerp, arcs, overlapping action (eyes lead, body follows, appendages settle last), no twinning (offset left and right, offset characters' phases), exaggeration. 6. **Review loop** (below) on every shot. Fix, look again. 7. **Render** the full film; verify with `ffprobe` that duration and frame count match the config.

Review loop

You cannot see motion by reading code. Render images and open them with Read.

| view | what it shows | catches | |---|---|---| | contact sheet | first, middle, last frame of every shot | missing events, small or lost characters, dead stretches | | fixed-step sheet (every 0.1–0.15 s) | one shot, read in order | timing: where is the eye now, does the viewer get it yet | | frame strip | every frame of a 0.5 s stretch | pops, snaps, missing anticipation, boil jitter on still parts | | crop | full-res detail | faces, contacts (feet on ground, props in hands), muddy glows | | crop following a world point | the same detail through a moving camera | contacts on camera moves |

Count frames per read (24 = 1 s). A read that gets a few frames, or shares its frames with another read, will be missed. Budget: one sheet per shot, one strip per key motion and per transition, one crop per face that carries the story.

Rules from the kit's guide

Defaults, overridden by whatever the person asks for.

• **No text.** No captions, labels, signs, or words on screens. Reactions are

painted marks (`!`, `?`, sweat, hearts, a bulb). A sign that restates the story is the classic failure.

• **Flat 2D, no projected 3D.** Turns go through drawn key views (front, 3/4,

side, back 3/4, back) with smears. Depth from overlap, scale and paler, bluer colour.

• **Nothing still.** Idle motion per emotion, drifting cameras, swaying grass. A

frozen frame reads as a bug.

• **Faces act, never snap.** Mood changes go squint, swap under the squint, take,

overshoot, settle.

• **One beat.** A single BPM drives idles and bounces even with no music.
• **No pure black or white.** Additive light for glows: pigment-mixing brushes

turn yellow-over-blue green.

The ClaudeAnimationBase route

`https://github.com/JohnHeibel/ClaudeAnimationBase`, MIT, verified at commit `0ac8bf2` (2026-09-24). Its `ANIMATION_GUIDE.md` (36 KB) is the full API: read it whole before drawing. `render.mjs` provides the review views as flags (`--sheet=`, `--strip=a:b`, `--crop=x,y,w,h`, `--crop-at=`, `--stills=`, `--clip`, `--frames --workers=N` + `--encode`).

Recipe for a CCotw container, verified 2026-10-25 (4 CPUs, no GPU, Chromium at `/opt/pw-browsers/chromium-*/chrome-linux64/chrome`):

SCRATCH=/path/outside/the/checkout   # the session scratchpad
CHROME=$(ls -d /opt/pw-browsers/chromium-*/chrome-linux64/chrome | tail -1)
git clone --depth 1 https://github.com/JohnHeibel/ClaudeAnimationBase /tmp/jail/cab
# deps from the re