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.

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 registry, outside the checkout, no install scripts; versions from package-lock.json
mkdir -p "$SCRATCH/cabdeps" && cd "$SCRATCH/cabdeps" && npm init -y >/dev/null \
  && npm install --ignore-scripts p5@2.3.3 p5.brush@2.2.3 puppeteer-core@25.11.0
cp -r "$SCRATCH/cabdeps/node_modules" /tmp/jail/cab/
sed -i '/fonts.googleapis.com/d' /tmp/jail/cab/studio.html          # only letter() uses it
sed -i "s/{ waitUntil: 'networkidle0' }/{ waitUntil: 'networkidle0', timeout: 0 }/; s/{ timeout: 60000 }/{ timeout: 0 }/" /tmp/jail/cab/render.mjs
chown -R nobody:nogroup /tmp/jail/cab
sh scripts/jail.sh -C /tmp/jail/cab -- node render.mjs --soft-gl \
  --chrome="$CHROME" \
  --sheet=0.5,2,4,6,8,10 --cols=3 --w=480 --out=out/sheet.jpg

In claude-workspace, run the kit only inside scripts/jail.sh (hub rule for code nobody here wrote). Elsewhere, drop the jail prefix.

Cost. Under SwiftShader the demo's six-frame sheet took 0.3, 0.2, 36, 47, 40 and 42 s per frame. At ~40 s, the 11 s demo (264 frames) is about 3 hours on one worker. Before a full render, either ask the scene to avoid p5.brush watercolour fill (the kit's README suggests this for machines without a GPU), split across --frames --workers=N and run it as a background job, or render on a GPU host (--gpu-angle=gl-egl|vulkan). The review loop stays cheap: sheets and strips render a handful of frames.

Failure signals

Verification

Open every sheet and strip with Read and look before calling a shot done. For the final file, this must match the config's duration and fps:

ffprobe -v error -show_entries format=duration:stream=nb_frames,r_frame_rate -of default=nw=1 out/video.mp4

Report the route used, the render time per frame, and anything the review loop found that you did not fix.