ClaudeAnimationBase Turns a Single Prompt Into Hand-Painted MP4 Cartoons
An open-source starter kit teaches Claude Opus 5.5 to code hand-painted cartoons in p5.js, complete with a character, 31 emotions, and a rules guide.
- ClaudeAnimationBase is an open-source kit for making hand-painted cartoons by prompting Claude Opus 5.5 to write p5.js code.
- Ships with the Clawd character, 31 acted emotions, drawn key views, hats, emotes and dances as reusable helpers.
- The ANIMATION_GUIDE.md encodes rules on timing, transitions, animation principles and common LLM failure modes.
- Workflow forces the model to storyboard first, then render contact sheets and frame strips to self-review before final output.
- Grew out of the earlier P(doom) music video; a demo was one-shot in 25 minutes on xhigh reasoning.
- MIT-licensed, requires Node.js, Chrome and ffmpeg; renders are slow without a dedicated GPU.
ClaudeAnimationBase turns JavaScript into hand-painted cartoons
ClaudeAnimationBase, an open-source toolkit from John Heibel, prompts a coding agent to plan and write JavaScript cartoons, then renders that code with p5.js and p5.brush. The agent storyboards scenes, writes shot code, inspects rendered previews, and exports the finished animation as an MP4.
Developers receive editable source code, repeatable frames, and reusable character components. p5.js provides the browser-based drawing environment, while p5.brush adds watercolor-like fills and brush marks. Heibel derived the toolkit from his earlier music video, I'm Upping My P(doom), and documented the techniques that worked reliably during production.
| Detail | Project setup |
|---|---|
| Creator | John Heibel |
| Tested agent | Claude Code with Opus 5.5 and xhigh reasoning |
| Drawing stack | JavaScript, p5.js, and p5.brush |
| Runtime requirements | Node.js, Chrome, and FFmpeg |
| Outputs | Contact sheets, frame strips, crops, still images, and MP4 video |
| Main bottleneck | Watercolor rendering without a dedicated GPU |
From prompt to MP4
A typical run begins by cloning the repository, opening it in Claude Code or another coding agent, and directing the agent to read the animation guide before writing a scene. The project supplies a sample prompt:
Read ANIMATION_GUIDE.md, then make a 15-second video of Clawd trying to catch a butterfly.
- Read the rules. The agent loads the timing, drawing, character, and rendering instructions.
- Plan the shots. It breaks the prompt into scenes and assigns time ranges to actions and reactions.
- Write the animation. JavaScript functions draw each frame from the current timestamp.
This story is for Pro members
You've reached the end of the free preview. Upgrade to AlphaSignal Pro to read the full article - and everything else behind the paywall.
Comments
