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
这是什么？这是一套入门套件，包含代码、提示词和素材，让 Claude（通过 Claude Code 或其他编程代理）使用 p5.js 和 p5.brush 库为一个叫 Clawd 的手绘风格卡通角色制作动画，并把结果渲染成 MP4。
这是我要导入的代码库，还是通过 AI 代理运行的东西？它是一个模板仓库，你克隆后交给编程代理（Claude Code 或类似工具）：由代理阅读指南、自己编写 p5.js 场景代码并渲染视频。没有需要安装的包，也没有要直接调用的 API。
实际怎么用它做出一个视频？克隆仓库，在 Claude Code（或任何编程代理）中打开，让它阅读 ANIMATIONGUIDE.md 并生成一个场景；模型会做分镜、把逐个镜头的代码写入 src/scenes/、渲染样张来自检，最后输出 out/video.mp4。
运行之前需要装好哪些东西？需要 Node.js、Google Chrome 和 ffmpeg；无头渲染器驱动 Chrome 完成 WebGL 渲染，ffmpeg 把帧合成为视频。
渲染方面有什么坑需要提前知道？没有独立 GPU 时，p5.brush 的水彩填充渲染得相当慢（每帧需要数秒），所以在集成显卡上最好让模型避免这类填充；在无头 Linux 上，根据你的环境还可能需要 --no-sandbox、--soft-gl 或 --gpu-angle 等额外参数。
它在 Linux 上的表现和 Mac 或 Windows 一样吗？大体一样，但 Linux 需要多加注意：由于 Ubuntu 23.10+ 在无头模式下禁用 Chrome 的沙箱，render.mjs 用 --no-sandbox 启动 Chrome，还可以退回到 Playwright 安装的 Chromium；带 NVIDIA GPU 的无头机器需要 --gpu-angle=gl-egl 或 vulkan。
渲染视频必须有独立 GPU 吗？不需要，没有它也能运行，但会慢很多；如果完全没有 GPU，可以传入 --soft-gl 用软件渲染 WebGL，虽然可行，但水彩填充会很慢。
Clawd 是什么？Clawd 是这套套件的手绘风格卡通角色，它的视角、情绪、眼睛、嘴巴、帽子、表情和舞蹈都定义在 src/clawd.js 中，开箱即用。
Clawd 自带多少种情绪？包含 31 种带表演的情绪，docs 文件夹里还有展示它们动画效果的设定图。
我可以换成自己的角色来替代 Clawd 吗？可以，作者建议让模型替换角色、发明新的情绪或服装，并把你自己的参考图片喂给它。
模型的推理等级有影响吗？作者发现更高的推理投入（用 Opus 5.5 在「xhigh」推理档测试）能让模型生成更细致、更精巧的场景。
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
25d
Commits · 90 Days