How johnheibel/claudeanimationbase works
Claude Animation Base is a starter kit for authoring hand-painted Clawd animations and rendering them as video. The principal workflow is to define a scene as timed shots, animate the character and scenery with the drawing and motion helpers, then render frames through the browser-based studio and encode a clip. It also provides standalone character model-sheet loops for inspecting emotions, views, motion, and hats. The scene and renderer excerpts are partial; links below follow documented behavior and visible calls, and omit uncertain internal wiring.
Main entry points: demo.js Demo scene · timeline.js Shots and transitions · render.mjs Headless renderer · sheets.js Model-sheet loops
Components 14
Animation authoring
- Animation guide
ANIMATION_GUIDE.md - Demo scene
src/scenes/demo.js - Project settings
src/config.js
Character and drawing
- Clawd character
src/clawd.js - Drawing and motion
src/core.js
Timeline and preview
- Shots and transitions
src/timeline.js - Model-sheet loops
src/sheets.js - Scrub studio
studio.html
Rendering
- Headless renderer
render.mjs
Other components
- Animator / agent
- Chrome
- p5.brush
- ffmpeg
- Rendered video
Connections 15
- Animator / agent → Animation guide: consults
- Animator / agent → Demo scene: authors
- Demo scene → Shots and transitions: registers shots
- Demo scene → Clawd character: draws Clawd
- Demo scene → Drawing and motion: uses helpers
- Demo scene → Project settings: uses timing
- Shots and transitions → Demo scene: dispatches shots
- Model-sheet loops → Shots and transitions: registers loops
- Model-sheet loops → Clawd character: draws examples
- Scrub studio → Shots and transitions: scrubs playback
- Drawing and motion → p5.brush: paints with
- Headless renderer → Scrub studio: opens page
- Headless renderer → Chrome: drives
- Headless renderer → ffmpeg: encodes frames
- ffmpeg → Rendered video: writes clip