# johnheibel/claudeanimationbase architecture

> Architecture diagram of the GitHub repository johnheibel/claudeanimationbase, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/johnheibel/claudeanimationbase
- Repository: https://github.com/johnheibel/claudeanimationbase
- Video tour (about a minute): https://gitdiagram.com/johnheibel/claudeanimationbase/video

## Overview

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: [`src/scenes/demo.js`](https://github.com/johnheibel/claudeanimationbase/blob/main/src/scenes/demo.js) (Demo scene), [`src/timeline.js`](https://github.com/johnheibel/claudeanimationbase/blob/main/src/timeline.js) (Shots and transitions), [`render.mjs`](https://github.com/johnheibel/claudeanimationbase/blob/main/render.mjs) (Headless renderer), [`src/sheets.js`](https://github.com/johnheibel/claudeanimationbase/blob/main/src/sheets.js) (Model-sheet loops)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_authoring["Animation authoring"]
  node_guide["Animation guide<br/>[ANIMATION_GUIDE.md]"]
  node_demo["Demo scene<br/>[demo.js]"]
  node_config["Project settings<br/>[config.js]"]
end

subgraph group_drawing["Character and drawing"]
  node_character["Clawd character<br/>[clawd.js]"]
  node_core["Drawing and motion<br/>[core.js]"]
end

subgraph group_playback["Timeline and preview"]
  node_timeline["Shots and transitions<br/>[timeline.js]"]
  node_sheets["Model-sheet loops<br/>[sheets.js]"]
  node_studio["Scrub studio<br/>[studio.html]"]
end

subgraph group_rendering["Rendering"]
  node_renderer["Headless renderer<br/>[render.mjs]"]
end

node_creator(("Animator / agent"))
node_browser["Chrome"]
node_brush["p5.brush"]
node_ffmpeg["ffmpeg"]
node_video["Rendered video"]

node_creator -->|"consults"| node_guide
node_creator -->|"authors"| node_demo
node_demo -->|"registers shots"| node_timeline
node_demo -->|"draws Clawd"| node_character
node_demo -->|"uses helpers"| node_core
node_demo -->|"uses timing"| node_config
node_timeline -->|"dispatches shots"| node_demo
node_sheets -->|"registers loops"| node_timeline
node_sheets -->|"draws examples"| node_character
node_studio -->|"scrubs playback"| node_timeline
node_core -->|"paints with"| node_brush
node_renderer -->|"opens page"| node_studio
node_renderer -->|"drives"| node_browser
node_renderer -->|"encodes frames"| node_ffmpeg
node_ffmpeg -->|"writes clip"| node_video

click node_guide "https://github.com/johnheibel/claudeanimationbase/blob/main/ANIMATION_GUIDE.md"
click node_demo "https://github.com/johnheibel/claudeanimationbase/blob/main/src/scenes/demo.js"
click node_config "https://github.com/johnheibel/claudeanimationbase/blob/main/src/config.js"
click node_character "https://github.com/johnheibel/claudeanimationbase/blob/main/src/clawd.js"
click node_core "https://github.com/johnheibel/claudeanimationbase/blob/main/src/core.js"
click node_timeline "https://github.com/johnheibel/claudeanimationbase/blob/main/src/timeline.js"
click node_sheets "https://github.com/johnheibel/claudeanimationbase/blob/main/src/sheets.js"
click node_studio "https://github.com/johnheibel/claudeanimationbase/blob/main/studio.html"
click node_renderer "https://github.com/johnheibel/claudeanimationbase/blob/main/render.mjs"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_guide,node_demo,node_config toneBlue
class node_character,node_core toneAmber
class node_timeline,node_sheets,node_studio toneMint
class node_renderer toneRose
class node_creator,node_browser,node_brush,node_ffmpeg,node_video toneIndigo
```

## Components

### Animation authoring

- [Animation guide](https://github.com/johnheibel/claudeanimationbase/blob/main/ANIMATION_GUIDE.md): `ANIMATION_GUIDE.md`
- [Demo scene](https://github.com/johnheibel/claudeanimationbase/blob/main/src/scenes/demo.js): `src/scenes/demo.js`
- [Project settings](https://github.com/johnheibel/claudeanimationbase/blob/main/src/config.js): `src/config.js`

### Character and drawing

- [Clawd character](https://github.com/johnheibel/claudeanimationbase/blob/main/src/clawd.js): `src/clawd.js`
- [Drawing and motion](https://github.com/johnheibel/claudeanimationbase/blob/main/src/core.js): `src/core.js`

### Timeline and preview

- [Shots and transitions](https://github.com/johnheibel/claudeanimationbase/blob/main/src/timeline.js): `src/timeline.js`
- [Model-sheet loops](https://github.com/johnheibel/claudeanimationbase/blob/main/src/sheets.js): `src/sheets.js`
- [Scrub studio](https://github.com/johnheibel/claudeanimationbase/blob/main/studio.html): `studio.html`

### Rendering

- [Headless renderer](https://github.com/johnheibel/claudeanimationbase/blob/main/render.mjs): `render.mjs`

### Other components

- **Animator / agent**
- **Chrome**
- **p5.brush**
- **ffmpeg**
- **Rendered video**

## Connections

- 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