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 или другого кодинг-агента) анимировать нарисованного от руки мультяшного персонажа по имени Clawd с помощью p5.js и библиотеки p5.brush, рендеря результат в MP4.
Это библиотека для импорта в код или то, что прогоняется через AI-агента?Это репозиторий-шаблон, который вы клонируете и передаёте кодинг-агенту (Claude Code или подобному): агент читает руководство, сам пишет код сцены на p5.js и рендерит видео. Устанавливать пакет или вызывать API напрямую не нужно.
Как на деле сделать с его помощью видео?Склонируйте репозиторий, откройте его в Claude Code (или любом кодинг-агенте) и попросите прочитать ANIMATIONGUIDE.md и создать сцену; модель делает раскадровку, пишет код по кадрам в src/scenes/, рендерит contact sheets для самопроверки и выдаёт out/video.mp4.
Что должно быть установлено перед запуском?Нужны Node.js, Google Chrome и ffmpeg; headless-рендерер управляет Chrome для WebGL-рендеринга, а ffmpeg собирает кадры в видео.
Есть ли подводные камни рендеринга, о которых стоит знать?Без дискретной GPU акварельные заливки p5.brush рендерятся довольно медленно (секунды на кадр), поэтому на встроенной графике стоит попросить модель избегать таких заливок; на headless Linux ещё нужны дополнительные флаги вроде --no-sandbox, --soft-gl или --gpu-angle в зависимости от вашей конфигурации.
Ведёт ли он себя на Linux так же, как на Mac или Windows?В основном да, но Linux требует дополнительной осторожности: render.mjs запускает Chrome с --no-sandbox, потому что Ubuntu 23.10+ блокирует песочницу Chrome в headless-режиме, и он может откатиться на Chromium, установленный Playwright; headless-машинам с GPU NVIDIA нужны --gpu-angle=gl-egl или vulkan.
Нужна ли дискретная GPU для рендеринга видео?Нет, может работать и без неё, но гораздо медленнее; при полном отсутствии GPU можно передать --soft-gl, чтобы рендерить WebGL программно — работает, но медленно на акварельных заливках.
Кто такой Clawd?Clawd — мультяшный персонаж набора в стиле ручной росписи: ракурсы, эмоции, глаза, рты, шляпы, жесты и танцы определены в src/clawd.js и готовы к использованию из коробки.
Сколько эмоций у Clawd?Включено 31 сыгранная эмоция, а в папке docs — изображения model sheet, показывающие их в анимации.
Можно ли подставить своего персонажа вместо Clawd?Да, автор советует попросить модель заменить персонажа, придумать новые эмоции или костюмы и скормить ей свои референсные изображения.
Имеет ли значение уровень рассуждений модели?Автор обнаружил, что большие затраты на рассуждения (проверено на Opus 5.5 с 'xhigh' reasoning) заставляли модель выдавать более детальные и проработанные сцены.
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