# Claude Animation Base: a hand-painted cartoon kit for p5.js > Claude Animation Base is a starter kit for making hand-painted animations with p5.js and p5.brush: a character called Clawd with 31 acted emotions, a guide the model reads before it writes any code, and a headless renderer that produces an MP4. The interesting part is that the style rules live in a markdown file the model obeys, not in the code. **JohnHeibel/ClaudeAnimationBase** — A starter kit for animating hand-painted cartoons with Claude: p5.js + p5.brush, the Clawd character, 31 acted emotions and a guide for the model - Repository: https://github.com/JohnHeibel/ClaudeAnimationBase - Stars: 1,691 · Forks: 161 - Language: JavaScript - License: MIT - Published: 2026-10-19 · Updated: 2026-10-19 · Language: en - Canonical page: https://hysenlabs.com/projects/johnheibel-claudeanimationbase ## A character, a set of rules and a renderer Claude Animation Base is a small starter kit with code, instructions and assets for animating a character in p5.js and p5.brush with a Claude model. The description names three things: the Clawd character, 31 acted emotions, and a guide for the model. The repository layout shows what that means in practice. There is ANIMATION_GUIDE.md, which the readme says to read first and which holds the rules, the workflow and the full API. There is src/clawd.js, which is Clawd itself, broken into views, emotions, eyes, mouths, hats, emotes and dances. There is src/core.js for painting, timing, motion helpers, camera, light and paper, src/timeline.js for shots, loops and the brush-wipe transition, and src/config.js for length and tempo. Your video goes into src/scenes, with the demo as an example. And render.mjs is the headless renderer, which produces contact sheets, frame strips, crops, stills and the MP4. The origin is unusual and worth noting: the code comes from a music video project, and the kit exists because of an analysis of what the model did and did not do well while making it. ## ANIMATION_GUIDE.md is the part that does the work The guide is described as the rules the model follows, and reading it is the first instruction in the readme. The rules it encodes are short and behavioural: handmade, alive, one piece, no text, transitions always, something happens in every scene, and a solid medium of brush strokes with flat 2D and boiling linework. The guide also covers timing for the viewer and the core principles of character animation. This is the design decision that makes the kit interesting. Rather than describing the animation in the prompt, the rules live in a file that the model reads, so the same constraints apply to every scene without being repeated, and a human can edit the file to change the aesthetic without touching the code. The list is also a set of constraints that are checkable. No text, transitions always, something happens in every scene: a reviewer looking at a contact sheet can see whether a scene violates them, which is not true of a prompt that asks for a beautiful hand-painted look. ## The prompt that starts everything The intended workflow is that you clone the kit, open it in Claude Code or any other coding agent, and ask for what you want. The readme's own example is short: read ANIMATION_GUIDE.md, then make a 15-second video of Clawd trying to catch a butterfly. What the model does next is described in one line: it storyboards first, builds shot by shot, renders contact sheets to check its own work, and writes out/video.mp4. The contact sheet step is the part worth copying into any agent-driven visual workflow, because it gives the model a way to look at what it produced before deciding whether to continue. The author also spends a paragraph on how to prompt, and the advice is experimental rather than prescriptive: make it give you the storyboard before coding, give it very broad instructions, try being very specific, ask for subagents, and try other ways of testing the model. The claim is that it can do a lot with very little, and that it is more accurate when given more requirements. The reasoning level appears to control how extravagant and detail-oriented the scene becomes, and the test videos were made with Opus 5.5 on xhigh reasoning in Claude Code. ## Rendering it yourself needs a browser and ffmpeg You can run the kit without an agent, which is how you check what came out. The requirements are Node.js, Google Chrome and ffmpeg, and the commands are two: ```bash npm install node render.mjs --clip --out=out/video.mp4 ``` That renders the 11-second demo in src/scenes/demo.js. To inspect it, open studio.html in Chrome and scrub through it, and add the query string loop=emotions or loop=views to see the model sheets, which are the reference images of the character from different angles. If Chrome is not installed in a standard location, you can pass the path with --chrome or set the CHROME_PATH environment variable. The package itself is small: p5, p5.brush and puppeteer-core, with two npm scripts, one for a video and one for a contact sheet. The reason a browser is in the loop at all is that p5 draws to a canvas, so the renderer drives Chrome to produce the frames and then assembles them into the video, which is also why ffmpeg is a hard requirement rather than a convenience. ## Headless Linux and the GPU flags The Linux instructions are the most technical part of the readme and they exist because headless rendering has a pile of platform-specific traps. On Linux, render.mjs starts Chrome with --no-sandbox, because Ubuntu 23.10 and later block Chrome's sandbox in headless use, and the renderer also finds a Chromium installed by Playwright. With no GPU at all you add --soft-gl to render WebGL in software, which works but is slow on the watercolour fills. On a headless Linux machine with an NVIDIA GPU, such as a cloud or cluster node, you add --gpu-angle=gl-egl or vulkan instead, and there is a diagnostic for exactly this uncertainty: ```bash node gpu_probe.mjs ``` That script shows which renderer each set of flags gets, which is exactly the information you need before running a long render. The performance note in the readme is also specific: without a dedicated GPU, p5.brush's watercolour fills make render times fairly slow, measured in seconds per frame, and on integrated graphics the author recommends asking the model to avoid those fills and use something else appropriate instead. The aesthetic is the author's favourite, which is a fair signal that it is a real trade-off rather than a defect. ## Swapping the character is an intended move The kit is structured so that the character is a data-like asset rather than hard-wired logic. Clawd is defined in src/clawd.js as views, emotions, eyes, mouths, hats, emotes and dances, and the docs directory holds the model sheets, an emotions sheet that also exists as an animated version, and a sheet for views, motion and hats. The readme suggests trying to ask the model to swap out the character, to make new emotions or costumes, and to give it your own reference images. That is the interesting claim of the whole project, because it says the pipeline is not tied to one hand-painted cat, and the fact that the character lives in its own file with named parts is what makes that plausible. The 31 emotions are described as acted, which points at the same thing the guide asks for: a scene has to do something, not merely look like something. ## What this is, and where it stops It helps to be clear about the category. This is a starter kit, not a tool: the package is marked private in its package metadata, the project publishes no GitHub releases, and the last push was on 2026-09-24. The output is not deterministic, because the animation is produced by a language model writing code that a human then reviews, and the quality of the result depends on the model, the prompt and the reasoning level, not only on the kit. It is also dependent on a browser being present, which makes it awkward inside a headless batch pipeline where you would rather not drive Chrome. What the project offers is narrower and more useful than a product: a documented style in a file, a character in a file, a timeline and painting helpers, and a renderer that turns scenes into video, with a documented set of prompting tactics for a coding agent. The licence is MIT, so the parts are reusable even if the model in the loop is not. ## Conclusion Claude Animation Base is worth an afternoon if you want to see what a coding agent does with a creative brief rather than a coding brief, and the guide file is the part to steal, because it turns a vague request into a set of checkable rules. It is the wrong choice if you need a deterministic animation pipeline, if you are on a machine without Chrome or ffmpeg, or if you cannot afford the seconds per frame that the watercolour fills cost on integrated graphics. Before you start, read ANIMATION_GUIDE.md yourself, and on a headless Linux box run gpu_probe.mjs to find out which renderer your flags actually select. ## FAQ ### What do I need to render a Claude Animation Base video? Node.js, Google Chrome and ffmpeg. Run npm install and then node render.mjs --clip --out=out/video.mp4 to render the demo clip. If Chrome is not in a standard location, pass --chrome with the path or set CHROME_PATH. ### How do I watch the demo animation? Open studio.html in Chrome and scrub through it. Adding the query string ?loop=emotions or ?loop=views to studio.html shows the model sheets instead of the clip. ### What rules does the model follow when animating? ANIMATION_GUIDE.md holds the rules, the workflow and the full API: handmade, alive, one piece, no text, transitions always, something happens in every scene, and a solid medium of brush strokes with flat 2D and boiling linework, plus timing guidance and the principles of character animation. ### What should I do on a headless Linux machine with no GPU? Add --soft-gl to render WebGL in software, which works but is slow on the watercolour fills. On a machine with an NVIDIA GPU use --gpu-angle=gl-egl or vulkan instead, and run node gpu_probe.mjs with a Chrome path to see which renderer each set of flags selects. ### Can I animate a character of my own with this kit? Yes. The readme suggests asking the model to swap out the character, create new emotions or costumes, and supply your own reference images. Clawd itself lives in src/clawd.js as views, emotions, eyes, mouths, hats, emotes and dances, with model sheets in the docs directory. ## Sources - [Issues](https://github.com/JohnHeibel/ClaudeAnimationBase/issues) - [JohnHeibel/ClaudeAnimationBase on GitHub](https://github.com/JohnHeibel/ClaudeAnimationBase) - [License: MIT](https://github.com/JohnHeibel/ClaudeAnimationBase/blob/main/LICENSE) - [README](https://github.com/JohnHeibel/ClaudeAnimationBase/blob/main/README.md) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/johnheibel-claudeanimationbase