animating-with-code

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.