ClaudeAnimationBase README

The project's README from github.com/JohnHeibel/ClaudeAnimationBase. As one markdown file: README.md.

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.

Clawd's emotions, animated

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

path what it is
ANIMATION_GUIDE.md The rules, the workflow and the full API. Read it first.
src/clawd.js Clawd: views, emotions, eyes, mouths, hats, emotes, dances
src/core.js Painting, timing, motion helpers, camera, light, paper
src/timeline.js Shots, loops and the brush-wipe transition
src/config.js Length and tempo
src/scenes/ Your video goes here (the demo is an example)
render.mjs Headless renderer: contact sheets, frame strips, crops, stills, MP4
docs/ Model sheets: emotions (also animated) and views, motion and hats

ClaudeAnimationBase (JohnHeibel/ClaudeAnimationBase)

Searching Database…

1.2K ·GitHub
ClaudeAnimationBase
What is this?A starter kit of code, prompts and assets for making Claude (via Claude Code or another coding agent) animate a hand-painted-style cartoon character called Clawd using p5.js and the p5.brush library, rendering the result as an MP4.
Is this a coding library I import, or something I run through an AI agent?It is a template repo you clone and hand to a coding agent (Claude Code or similar): the agent reads the guide, writes the p5.js scene code itself, and renders the video. There is no package to install or API to call directly.
How do I actually make a video with it?Clone the repo, open it in Claude Code (or any coding agent), and ask it to read ANIMATIONGUIDE.md and produce a scene; the model storyboards, writes shot-by-shot code into src/scenes/, renders contact sheets to check its own work, and outputs out/video.mp4.
What do I need installed before running it?You need Node.js, Google Chrome, and ffmpeg; the headless renderer drives Chrome to do the WebGL rendering and ffmpeg assembles the frames into a video.
Are there any rendering gotchas I should know about?Without a dedicated GPU, p5.brush's watercolour fills render fairly slowly (seconds per frame), so on integrated graphics it helps to ask the model to avoid those fills; on headless Linux you also need extra flags like --no-sandbox, --soft-gl, or --gpu-angle depending on your setup.
Does it behave the same on Linux as on Mac or Windows?Mostly, but Linux needs extra care: render.mjs launches Chrome with --no-sandbox because Ubuntu 23.10+ blocks Chrome's sandbox in headless mode, and it can also fall back to a Chromium installed by Playwright; headless machines with NVIDIA GPUs need --gpu-angle=gl-egl or vulkan.
Do I need a dedicated GPU to render videos?No, it can run without one, but it's much slower; with no GPU at all you can pass --soft-gl to render WebGL in software, which still works but is slow on watercolour fills.
What is Clawd?Clawd is the kit's hand-painted-style cartoon character, with views, emotions, eyes, mouths, hats, emotes and dances defined in src/clawd.js, ready to use out of the box.
How many emotions does Clawd come with?31 acted emotions are included, along with model-sheet images showing them animated in the docs folder.
Can I swap in my own character instead of Clawd?Yes, the author suggests asking the model to swap out the character, invent new emotions or costumes, and feed it your own reference images.
Does the reasoning level of the model matter?The author found that higher reasoning effort (tested with Opus 5.5 on 'xhigh' reasoning) made the model produce more detailed and elaborate scenes.
What are similar projects?procedural-film, pdoom-video, awesome-opus5-5-videos, huashu-art-motion, PDoomVideo, mg-styles-15, reelmimic, onetake
Which topics is it in?character-animation, headless-browser, generative-art, vibe-coding, creative-coding, chrome, webgl, ffmpeg, video-generation, prompt-engineering, video, animation
Creator
JohnHeibel
Size
8 MB
Stars
1.2K
Updated
CommitSep 24
Age
23d
Commits · 90 Days