Claude Animation Base

This is a small starter kit with code, instructions and assets for animating a character in p5.js and p5.brush with Claude Opus 5.5. It's based on the code from the music video I'm Upping My P(doom) and an analysis of what the model did and didn't do well. I highly recommend playing around with your prompting: make it give you the storyboard before coding, give it very broad instructions, try being very specific, ask for subagents, and try a bunch of other fun ways of testing the model's capabilities. In my testing, it can do a lot with very little, but it's also quite accurate when you give it more requirements. Also try asking the model to swap out the character or make new emotions or costumes, give it your own reference images, and try many other fun things like that. I've found that the reasoning level corresponds to how "extravagant" and detail-oriented the model makes the scene. All test videos were generated with Opus 5.5 on xhigh reasoning in Claude Code.

Make a video

Clone it, open it in Claude Code (or any coding agent) and ask for what you want:

Read ANIMATION_GUIDE.md, then make a 15-second video of Clawd trying to catch a butterfly.

The model storyboards first, builds shot by shot, renders contact sheets to check its own work, and writes out/video.mp4. ANIMATION_GUIDE.md holds the rules it follows: handmade, alive, one piece, no text, transitions always, something happens in every scene, and a solid medium of brush strokes, flat 2D and boiling linework. It also covers timing for the viewer and the core principles of character animation.

Run it yourself

You need Node.js, Google Chrome and ffmpeg.

Without a dedicated GPU, p5.brush's watercolour fills make render times fairly slow, measured in seconds per frame. If you're running on integrated graphics, I recommend asking the model to avoid those fills and replace them with something else appropriate. (I love the look of the watercolours, though.)

npm install
node render.mjs --clip --out=out/video.mp4

That renders the 11-second demo in src/scenes/demo.js. Open studio.html in Chrome to scrub through it. Add ?loop=emotions or ?loop=views to see the model sheets. If Chrome isn't in a standard location, pass --chrome=<path> or set CHROME_PATH.

On Linux, render.mjs starts Chrome with --no-sandbox (Ubuntu 23.10+ blocks Chrome's sandbox in headless use) and also finds a Chromium installed by Playwright. With no GPU at all, add --soft-gl to render WebGL in software: slow on watercolour fills, but it works. On a headless Linux machine with an NVIDIA GPU (a cloud or cluster node), add --gpu-angle=gl-egl (or vulkan); node gpu_probe.mjs <chrome path> shows which renderer each set of flags gets.

What's here