# mromidev/claude-animated-shorts architecture

> Architecture diagram of the GitHub repository mromidev/claude-animated-shorts, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-10). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mromidev/claude-animated-shorts
- Repository: https://github.com/mromidev/claude-animated-shorts

## Overview

Claude Animated Shorts is a Claude Code skill and example project for creating short, vertically framed animated stories. Its documented workflow runs from choosing a topic and checking facts through scripting, voice, shot planning, stills, rendering, and sound mix. The bridge example separates scene/story construction and visual effects from procedural audio generation and mixing; helper scripts support stills, shot merging, and frame QA. The README documents the overall workflow, while sampled source and the SOURCE INDEX support the implementation links shown. Unsampled subsystems are represented only where the README or tree establishes their role.

Main entry points: [`templates/bridge/Bridge.tsx`](https://github.com/mromidev/claude-animated-shorts/blob/main/templates/bridge/Bridge.tsx) (Scene renderer), [`templates/audio/mix.py`](https://github.com/mromidev/claude-animated-shorts/blob/main/templates/audio/mix.py) (Stem mix), [`templates/bridge/world.ts`](https://github.com/mromidev/claude-animated-shorts/blob/main/templates/bridge/world.ts) (World assembly), [`templates/audio/music.py`](https://github.com/mromidev/claude-animated-shorts/blob/main/templates/audio/music.py) (March score)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_workflow["Creation workflow"]
  node_skill["Claude skill<br/>[SKILL.md]"]
  node_research["Topic and facts<br/>[SKILL.md]"]
  node_script["Story script<br/>[SCRIPT_example.md]"]
  node_voice["Voice track<br/>[SKILL.md]"]
  node_merge["Shot merge<br/>[bridge_merge.py]"]
  node_render["Rendered short"]
  node_final["Final short and mix"]
end

subgraph group_visual["Bridge visual production"]
  node_shotplan["Shot plan<br/>[story.ts]"]
  node_stills["Still generation<br/>[bridge-stills.mjs]"]
  node_scene["Scene renderer<br/>[Bridge.tsx]"]
  node_story["Story and camera<br/>[story.ts]"]
  node_world["World assembly<br/>[world.ts]"]
  node_town["Town geometry<br/>[build.ts]"]
  node_textures["Painted textures<br/>[paint.ts]"]
  node_cast["Character cards<br/>[cast.ts]"]
  node_drawings["2D character art<br/>[toon.ts]"]
  node_ink["Ink pass<br/>[ink.ts]"]
  node_grade["Color grade<br/>[grade.ts]"]
  node_lens["Lens blur<br/>[lensblur.ts]"]
end

subgraph group_audio["Audio production"]
  node_audio_timeline["Audio timing<br/>[timeline.py]"]
  node_music["March score<br/>[music.py]"]
  node_instruments["Synth instruments<br/>[instruments.py]"]
  node_sfx["Sound effects<br/>[sfx.py]"]
  node_sfxgen["SFX synthesis<br/>[sfx_gen.py]"]
  node_dsp["Audio DSP<br/>[dsp.py]"]
  node_mix["Stem mix<br/>[mix.py]"]
end

subgraph group_reference["Reference and review"]
  node_qa["Frame QA<br/>[short_qa.py]"]
  node_style["Style study<br/>[STYLE_BIBLE.md]"]
  node_reports["Measured reports"]
end

node_creator(("Creator"))

node_creator -->|"requests creation"| node_skill
node_skill -->|"guides research"| node_research
node_research -->|"informs story"| node_script
node_script -->|"precedes recording"| node_voice
node_voice -->|"guides shots"| node_shotplan
node_shotplan -->|"plans frames"| node_stills
node_stills -.->|"previews frames"| node_scene
node_scene -.->|"renders frames"| node_render
node_scene -->|"creates world"| node_world
node_scene -->|"reads timeline"| node_story
node_scene -->|"uses pass"| node_ink
node_scene -->|"uses grade"| node_grade
node_scene -->|"uses blur"| node_lens
node_world -->|"uses geometry"| node_town
node_world -->|"uses textures"| node_textures
node_town -->|"uses textures"| node_textures
node_town -->|"reads constants"| node_story
node_world -->|"assembles cast"| node_cast
node_cast -->|"draws characters"| node_drawings
node_scene -.->|"supports shot merge"| node_merge
node_merge -.->|"prepares review"| node_qa
node_qa -->|"checks frames"| node_render
node_style -->|"guides visual formula"| node_skill
node_reports -->|"guides look checks"| node_skill
node_audio_timeline -->|"times cues"| node_music
node_audio_timeline -->|"times effects"| node_sfx
node_music -->|"uses instruments"| node_instruments
node_music -->|"uses DSP"| node_dsp
node_sfx -->|"generates cues"| node_sfxgen
node_sfx -->|"uses DSP"| node_dsp
node_instruments -->|"uses DSP"| node_dsp
node_mix -->|"mixes score"| node_music
node_mix -->|"mixes effects"| node_sfx
node_mix -->|"uses DSP"| node_dsp
node_mix -->|"reads timing"| node_audio_timeline
node_render -.->|"joins sound mix"| node_final
node_mix -.->|"provides sound"| node_final

click node_skill "https://github.com/mromidev/claude-animated-shorts/blob/main/SKILL.md"
click node_research "https://github.com/mromidev/claude-animated-shorts/blob/main/SKILL.md"
click node_script "https://github.com/mromidev/claude-animated-shorts/blob/main/templates/SCRIPT_example.md"
click node_voice "https://github.com/mromidev/claude-animated-shorts/blob/main/SKILL.md"
click node_shotplan "https://github.com/mromidev/claude-animated-shorts/blob/main/templates/bridge/story.ts"
click node_stills "https://github.com/mromidev/claude-animated-shorts/blob/main/templates/scripts/bridge-stills.mjs"
click node_scene "https://github.com/mromidev/claude-animated-shorts/blob/main/templates/bridge/Bridge.tsx"
click node_story "https://github.com/mromidev/claude-animated-shorts/blob/main/templates/bridge/story.ts"
click node_world "https://github.com/mromidev/claude-animated-shorts/blob/main/templates/bridge/world.ts"
click node_town "https://github.com/mromidev/claude-animated-shorts/blob/main/templates/bridge/build.ts"
click node_textures "https://github.com/mromidev/claude-animated-shorts/blob/main/templates/bridge/paint.ts"
click node_cast "https://github.com/mromidev/claude-animated-shorts/blob/main/templates/bridge/cast.ts"
click node_drawings "https://github.com/mromidev/claude-animated-shorts/blob/main/templates/bridge/toon.ts"
click node_ink "https://github.com/mromidev/claude-animated-shorts/blob/main/templates/bridge/ink.ts"
click node_grade "https://github.com/mromidev/claude-animated-shorts/blob/main/templates/bridge/grade.ts"
click node_lens "https://github.com/mromidev/claude-animated-shorts/blob/main/templates/bridge/lensblur.ts"
click node_audio_timeline "https://github.com/mromidev/claude-animated-shorts/blob/main/templates/audio/timeline.py"
click node_music "https://github.com/mromidev/claude-animated-shorts/blob/main/templates/audio/music.py"
click node_instruments "https://github.com/mromidev/claude-animated-shorts/blob/main/templates/audio/instruments.py"
click node_sfx "https://github.com/mromidev/claude-animated-shorts/blob/main/templates/audio/sfx.py"
click node_sfxgen "https://github.com/mromidev/claude-animated-shorts/blob/main/templates/audio/sfx_gen.py"
click node_dsp "https://github.com/mromidev/claude-animated-shorts/blob/main/templates/audio/dsp.py"
click node_mix "https://github.com/mromidev/claude-animated-shorts/blob/main/templates/audio/mix.py"
click node_merge "https://github.com/mromidev/claude-animated-shorts/blob/main/templates/scripts/bridge_merge.py"
click node_qa "https://github.com/mromidev/claude-animated-shorts/blob/main/templates/scripts/short_qa.py"
click node_style "https://github.com/mromidev/claude-animated-shorts/blob/main/references/STYLE_BIBLE.md"
click node_reports "https://github.com/mromidev/claude-animated-shorts/tree/main/references/reports"

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_skill,node_research,node_script,node_voice,node_merge,node_render,node_final toneBlue
class node_shotplan,node_stills,node_scene,node_story,node_world,node_town,node_textures,node_cast,node_drawings,node_ink,node_grade,node_lens toneAmber
class node_audio_timeline,node_music,node_instruments,node_sfx,node_sfxgen,node_dsp,node_mix toneMint
class node_qa,node_style,node_reports toneRose
class node_creator toneIndigo
```

## Components

### Creation workflow

- [Claude skill](https://github.com/mromidev/claude-animated-shorts/blob/main/SKILL.md): `SKILL.md`
- [Topic and facts](https://github.com/mromidev/claude-animated-shorts/blob/main/SKILL.md): `SKILL.md`
- [Story script](https://github.com/mromidev/claude-animated-shorts/blob/main/templates/SCRIPT_example.md): `templates/SCRIPT_example.md`
- [Voice track](https://github.com/mromidev/claude-animated-shorts/blob/main/SKILL.md): `SKILL.md`
- [Shot merge](https://github.com/mromidev/claude-animated-shorts/blob/main/templates/scripts/bridge_merge.py): `templates/scripts/bridge_merge.py`
- **Rendered short**
- **Final short and mix**

### Bridge visual production

- [Shot plan](https://github.com/mromidev/claude-animated-shorts/blob/main/templates/bridge/story.ts): `templates/bridge/story.ts`
- [Still generation](https://github.com/mromidev/claude-animated-shorts/blob/main/templates/scripts/bridge-stills.mjs): `templates/scripts/bridge-stills.mjs`
- [Scene renderer](https://github.com/mromidev/claude-animated-shorts/blob/main/templates/bridge/Bridge.tsx): `templates/bridge/Bridge.tsx`
- [Story and camera](https://github.com/mromidev/claude-animated-shorts/blob/main/templates/bridge/story.ts): `templates/bridge/story.ts`
- [World assembly](https://github.com/mromidev/claude-animated-shorts/blob/main/templates/bridge/world.ts): `templates/bridge/world.ts`
- [Town geometry](https://github.com/mromidev/claude-animated-shorts/blob/main/templates/bridge/build.ts): `templates/bridge/build.ts`
- [Painted textures](https://github.com/mromidev/claude-animated-shorts/blob/main/templates/bridge/paint.ts): `templates/bridge/paint.ts`
- [Character cards](https://github.com/mromidev/claude-animated-shorts/blob/main/templates/bridge/cast.ts): `templates/bridge/cast.ts`
- [2D character art](https://github.com/mromidev/claude-animated-shorts/blob/main/templates/bridge/toon.ts): `templates/bridge/toon.ts`
- [Ink pass](https://github.com/mromidev/claude-animated-shorts/blob/main/templates/bridge/ink.ts): `templates/bridge/ink.ts`
- [Color grade](https://github.com/mromidev/claude-animated-shorts/blob/main/templates/bridge/grade.ts): `templates/bridge/grade.ts`
- [Lens blur](https://github.com/mromidev/claude-animated-shorts/blob/main/templates/bridge/lensblur.ts): `templates/bridge/lensblur.ts`

### Audio production

- [Audio timing](https://github.com/mromidev/claude-animated-shorts/blob/main/templates/audio/timeline.py): `templates/audio/timeline.py`
- [March score](https://github.com/mromidev/claude-animated-shorts/blob/main/templates/audio/music.py): `templates/audio/music.py`
- [Synth instruments](https://github.com/mromidev/claude-animated-shorts/blob/main/templates/audio/instruments.py): `templates/audio/instruments.py`
- [Sound effects](https://github.com/mromidev/claude-animated-shorts/blob/main/templates/audio/sfx.py): `templates/audio/sfx.py`
- [SFX synthesis](https://github.com/mromidev/claude-animated-shorts/blob/main/templates/audio/sfx_gen.py): `templates/audio/sfx_gen.py`
- [Audio DSP](https://github.com/mromidev/claude-animated-shorts/blob/main/templates/audio/dsp.py): `templates/audio/dsp.py`
- [Stem mix](https://github.com/mromidev/claude-animated-shorts/blob/main/templates/audio/mix.py): `templates/audio/mix.py`

### Reference and review

- [Frame QA](https://github.com/mromidev/claude-animated-shorts/blob/main/templates/scripts/short_qa.py): `templates/scripts/short_qa.py`
- [Style study](https://github.com/mromidev/claude-animated-shorts/blob/main/references/STYLE_BIBLE.md): `references/STYLE_BIBLE.md`
- [Measured reports](https://github.com/mromidev/claude-animated-shorts/tree/main/references/reports): `references/reports`

### Other components

- **Creator**

## Connections

- Creator → Claude skill: requests creation (evidence: `README.md`)
- Claude skill → Topic and facts: guides research (evidence: `README.md`)
- Topic and facts → Story script: informs story (evidence: `README.md`)
- Story script → Voice track: precedes recording (evidence: `README.md`)
- Voice track → Shot plan: guides shots (evidence: `README.md`)
- Shot plan → Still generation: plans frames (evidence: `README.md`)
- Still generation → Scene renderer: previews frames
- Scene renderer → Rendered short: renders frames
- Scene renderer → World assembly: creates world (evidence: `templates/bridge/Bridge.tsx`)
- Scene renderer → Story and camera: reads timeline (evidence: `templates/bridge/Bridge.tsx`)
- Scene renderer → Ink pass: uses pass (evidence: `templates/bridge/Bridge.tsx`)
- Scene renderer → Color grade: uses grade (evidence: `templates/bridge/Bridge.tsx`)
- Scene renderer → Lens blur: uses blur (evidence: `templates/bridge/Bridge.tsx`)
- World assembly → Town geometry: uses geometry (evidence: `templates/bridge/world.ts`)
- World assembly → Painted textures: uses textures (evidence: `templates/bridge/world.ts`)
- Town geometry → Painted textures: uses textures (evidence: `templates/bridge/build.ts`)
- Town geometry → Story and camera: reads constants (evidence: `templates/bridge/build.ts`)
- World assembly → Character cards: assembles cast (evidence: `templates/bridge/world.ts`)
- Character cards → 2D character art: draws characters (evidence: `templates/bridge/cast.ts`)
- Scene renderer → Shot merge: supports shot merge
- Shot merge → Frame QA: prepares review
- Frame QA → Rendered short: checks frames (evidence: `README.md`)
- Style study → Claude skill: guides visual formula (evidence: `README.md`)
- Measured reports → Claude skill: guides look checks (evidence: `README.md`)
- Audio timing → March score: times cues (evidence: `templates/audio/music.py`)
- Audio timing → Sound effects: times effects (evidence: `templates/audio/sfx.py`)
- March score → Synth instruments: uses instruments (evidence: `templates/audio/music.py`)
- March score → Audio DSP: uses DSP (evidence: `templates/audio/music.py`)
- Sound effects → SFX synthesis: generates cues (evidence: `templates/audio/sfx.py`)
- Sound effects → Audio DSP: uses DSP (evidence: `templates/audio/sfx.py`)
- Synth instruments → Audio DSP: uses DSP (evidence: `templates/audio/instruments.py`)
- Stem mix → March score: mixes score (evidence: `templates/audio/mix.py`)
- Stem mix → Sound effects: mixes effects (evidence: `templates/audio/mix.py`)
- Stem mix → Audio DSP: uses DSP (evidence: `templates/audio/mix.py`)
- Stem mix → Audio timing: reads timing (evidence: `templates/audio/mix.py`)
- Rendered short → Final short and mix: joins sound mix
- Stem mix → Final short and mix: provides sound