# pawaramorucha819/remotion-voiceroid-video-public architecture

> Architecture diagram of the GitHub repository pawaramorucha819/remotion-voiceroid-video-public, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/pawaramorucha819/remotion-voiceroid-video-public
- Repository: https://github.com/pawaramorucha819/remotion-voiceroid-video-public

## Overview

VOICEROID video automation project: users turn a Markdown script and generated WAV files into an Episode Spec, edit or preview it, then render a video with Remotion. The graph includes the GUI editor, documented script-generation and rendering capabilities, and the renderer’s character/audio layers. Some CLI and editor subsystems are represented from README or import-index evidence; unsampled implementation details and uncertain links are omitted.

Main entry points: [`src/EpisodeVideo.tsx`](https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/src/EpisodeVideo.tsx) (Episode Renderer), [`apps/episode-editor/src/App.tsx`](https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/apps/episode-editor/src/App.tsx) (Editor App), [`apps/episode-editor/src/store/episodeStore.ts`](https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/apps/episode-editor/src/store/episodeStore.ts) (Episode State), [`src/Root.tsx`](https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/src/Root.tsx) (Composition Setup)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_authoring["Script Authoring"]
  node_markdown["Markdown Script"]
  node_wav["Generated WAVs"]
  node_generator["Spec Generator<br/>[md-to-episode.ts]"]
  node_spec["Episode Spec"]
end

subgraph group_editor["Episode Editor"]
  node_editorapp["Editor App<br/>[App.tsx]"]
  node_editorstate["Episode State<br/>[episodeStore.ts]"]
  node_fileio["File Loading<br/>[FileLoader.tsx]"]
  node_jsonview["Spec Tree<br/>[JsonTree.tsx]"]
  node_inspector["Spec Inspector<br/>[Inspector.tsx]"]
  node_lineedit["Line Inspector<br/>[LineInspector.tsx]"]
  node_preview["Visual Preview<br/>[Preview.tsx]"]
  node_timeline["Timeline<br/>[Timeline.tsx]"]
  node_audioui["Audio Controls<br/>[AudioPlayer.tsx]"]
  node_toolbar["Editor Toolbar<br/>[Toolbar.tsx]"]
end

subgraph group_render["Video Rendering"]
  node_schema["Episode Schema<br/>[schema.ts]"]
  node_composition["Composition Setup<br/>[Root.tsx]"]
  node_video["Episode Renderer<br/>[EpisodeVideo.tsx]"]
  node_output["Rendered Video"]
  node_transitions["Transitions<br/>[Transition.tsx]"]
end

subgraph group_character["Character Animation"]
  node_sprites["Character Sprites"]
  node_charstate["Character State"]
  node_lipsync["Lip Sync<br/>[useLipSync.ts]"]
  node_blink["Blink Animation<br/>[useBlink.ts]"]
  node_animation["Property Animation<br/>[useAnimation.ts]"]
end

subgraph group_audio["Audio Playback"]
  node_bgm["Background Music<br/>[BgmPlayer.tsx]"]
  node_sfx["Sound Effects"]
end

node_creator(("Creator"))
node_remotion["Remotion"]

node_creator -->|"writes"| node_markdown
node_creator -->|"generates"| node_wav
node_markdown -->|"parses"| node_generator
node_wav -->|"matches audio"| node_generator
node_generator -->|"generates"| node_spec
node_creator -->|"edits in"| node_editorapp
node_editorapp -->|"shows"| node_fileio
node_editorapp -->|"shows"| node_jsonview
node_editorapp -->|"shows"| node_inspector
node_editorapp -->|"shows"| node_preview
node_editorapp -->|"shows"| node_timeline
node_editorapp -->|"shows"| node_audioui
node_editorapp -->|"shows"| node_toolbar
node_fileio -->|"loads"| node_editorstate
node_jsonview -->|"reads"| node_editorstate
node_inspector -->|"updates"| node_editorstate
node_inspector -->|"dispatches"| node_lineedit
node_preview -->|"reads"| node_editorstate
node_timeline -->|"reads"| node_editorstate
node_audioui -->|"reads"| node_editorstate
node_editorstate -.->|"saves"| node_spec
node_creator -->|"provides"| node_spec
node_spec -->|"configures"| node_composition
node_composition -->|"registers"| node_video
node_composition -->|"validates props"| node_schema
node_video -->|"uses types"| node_schema
node_video -->|"renders"| node_sprites
node_video -->|"uses"| node_charstate
node_video -->|"renders"| node_bgm
node_video -->|"renders"| node_sfx
node_video -->|"renders"| node_transitions
node_video -->|"applies"| node_animation
node_charstate -->|"uses"| node_lipsync
node_charstate -->|"uses"| node_blink
node_sprites -->|"uses"| node_lipsync
node_sprites -->|"uses"| node_blink
node_remotion -->|"hosts"| node_composition
node_remotion -->|"renders"| node_output
node_video -->|"produces"| node_output

click node_generator "https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/scripts/md-to-episode.ts"
click node_editorapp "https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/apps/episode-editor/src/App.tsx"
click node_editorstate "https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/apps/episode-editor/src/store/episodeStore.ts"
click node_fileio "https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/apps/episode-editor/src/components/FileLoader.tsx"
click node_jsonview "https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/apps/episode-editor/src/components/JsonTree.tsx"
click node_inspector "https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/apps/episode-editor/src/components/Inspector.tsx"
click node_lineedit "https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/apps/episode-editor/src/components/inspectors/LineInspector.tsx"
click node_preview "https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/apps/episode-editor/src/components/Preview.tsx"
click node_timeline "https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/apps/episode-editor/src/components/Timeline.tsx"
click node_audioui "https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/apps/episode-editor/src/components/AudioPlayer.tsx"
click node_toolbar "https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/apps/episode-editor/src/components/Toolbar.tsx"
click node_schema "https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/src/schema.ts"
click node_composition "https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/src/Root.tsx"
click node_video "https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/src/EpisodeVideo.tsx"
click node_sprites "https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/src/components/CharacterSprite.tsx"
click node_charstate "https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/src/hooks/useCharacterState.ts"
click node_lipsync "https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/src/hooks/useLipSync.ts"
click node_blink "https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/src/hooks/useBlink.ts"
click node_animation "https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/src/hooks/useAnimation.ts"
click node_bgm "https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/src/components/BgmPlayer.tsx"
click node_sfx "https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/src/components/SoundEffectPlayer.tsx"
click node_transitions "https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/src/components/Transition.tsx"

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_markdown,node_wav,node_generator,node_spec toneBlue
class node_editorapp,node_editorstate,node_fileio,node_jsonview,node_inspector,node_lineedit,node_preview,node_timeline,node_audioui,node_toolbar toneAmber
class node_schema,node_composition,node_video,node_output,node_transitions toneMint
class node_sprites,node_charstate,node_lipsync,node_blink,node_animation toneRose
class node_bgm,node_sfx,node_creator,node_remotion toneIndigo
```

## Components

### Script Authoring

- **Markdown Script**
- **Generated WAVs**
- [Spec Generator](https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/scripts/md-to-episode.ts): `scripts/md-to-episode.ts`
- **Episode Spec**

### Episode Editor

- [Editor App](https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/apps/episode-editor/src/App.tsx): `apps/episode-editor/src/App.tsx`
- [Episode State](https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/apps/episode-editor/src/store/episodeStore.ts): `apps/episode-editor/src/store/episodeStore.ts`
- [File Loading](https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/apps/episode-editor/src/components/FileLoader.tsx): `apps/episode-editor/src/components/FileLoader.tsx`
- [Spec Tree](https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/apps/episode-editor/src/components/JsonTree.tsx): `apps/episode-editor/src/components/JsonTree.tsx`
- [Spec Inspector](https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/apps/episode-editor/src/components/Inspector.tsx): `apps/episode-editor/src/components/Inspector.tsx`
- [Line Inspector](https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/apps/episode-editor/src/components/inspectors/LineInspector.tsx): `apps/episode-editor/src/components/inspectors/LineInspector.tsx`
- [Visual Preview](https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/apps/episode-editor/src/components/Preview.tsx): `apps/episode-editor/src/components/Preview.tsx`
- [Timeline](https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/apps/episode-editor/src/components/Timeline.tsx): `apps/episode-editor/src/components/Timeline.tsx`
- [Audio Controls](https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/apps/episode-editor/src/components/AudioPlayer.tsx): `apps/episode-editor/src/components/AudioPlayer.tsx`
- [Editor Toolbar](https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/apps/episode-editor/src/components/Toolbar.tsx): `apps/episode-editor/src/components/Toolbar.tsx`

### Video Rendering

- [Episode Schema](https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/src/schema.ts): `src/schema.ts`
- [Composition Setup](https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/src/Root.tsx): `src/Root.tsx`
- [Episode Renderer](https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/src/EpisodeVideo.tsx): `src/EpisodeVideo.tsx`
- **Rendered Video**
- [Transitions](https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/src/components/Transition.tsx): `src/components/Transition.tsx`

### Character Animation

- [Character Sprites](https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/src/components/CharacterSprite.tsx): `src/components/CharacterSprite.tsx`
- [Character State](https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/src/hooks/useCharacterState.ts): `src/hooks/useCharacterState.ts`
- [Lip Sync](https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/src/hooks/useLipSync.ts): `src/hooks/useLipSync.ts`
- [Blink Animation](https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/src/hooks/useBlink.ts): `src/hooks/useBlink.ts`
- [Property Animation](https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/src/hooks/useAnimation.ts): `src/hooks/useAnimation.ts`

### Audio Playback

- [Background Music](https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/src/components/BgmPlayer.tsx): `src/components/BgmPlayer.tsx`
- [Sound Effects](https://github.com/pawaramorucha819/remotion-voiceroid-video-public/blob/main/src/components/SoundEffectPlayer.tsx): `src/components/SoundEffectPlayer.tsx`

### Other components

- **Creator**
- **Remotion**

## Connections

- Creator → Markdown Script: writes
- Creator → Generated WAVs: generates
- Markdown Script → Spec Generator: parses
- Generated WAVs → Spec Generator: matches audio
- Spec Generator → Episode Spec: generates
- Creator → Editor App: edits in
- Editor App → File Loading: shows (evidence: `apps/episode-editor/src/App.tsx`)
- Editor App → Spec Tree: shows (evidence: `apps/episode-editor/src/App.tsx`)
- Editor App → Spec Inspector: shows (evidence: `apps/episode-editor/src/App.tsx`)
- Editor App → Visual Preview: shows (evidence: `apps/episode-editor/src/App.tsx`)
- Editor App → Timeline: shows (evidence: `apps/episode-editor/src/App.tsx`)
- Editor App → Audio Controls: shows (evidence: `apps/episode-editor/src/App.tsx`)
- Editor App → Editor Toolbar: shows (evidence: `apps/episode-editor/src/App.tsx`)
- File Loading → Episode State: loads (evidence: `apps/episode-editor/src/components/FileLoader.tsx`)
- Spec Tree → Episode State: reads (evidence: `apps/episode-editor/src/components/JsonTree.tsx`)
- Spec Inspector → Episode State: updates (evidence: `apps/episode-editor/src/components/Inspector.tsx`)
- Spec Inspector → Line Inspector: dispatches (evidence: `apps/episode-editor/src/components/Inspector.tsx`)
- Visual Preview → Episode State: reads (evidence: `apps/episode-editor/src/components/Preview.tsx`)
- Timeline → Episode State: reads (evidence: `apps/episode-editor/src/components/Timeline.tsx`)
- Audio Controls → Episode State: reads (evidence: `apps/episode-editor/src/components/AudioPlayer.tsx`)
- Episode State → Episode Spec: saves
- Creator → Episode Spec: provides
- Episode Spec → Composition Setup: configures (evidence: `src/Root.tsx`)
- Composition Setup → Episode Renderer: registers (evidence: `src/Root.tsx`)
- Composition Setup → Episode Schema: validates props (evidence: `src/Root.tsx`)
- Episode Renderer → Episode Schema: uses types (evidence: `src/EpisodeVideo.tsx`)
- Episode Renderer → Character Sprites: renders (evidence: `src/EpisodeVideo.tsx`)
- Episode Renderer → Character State: uses (evidence: `src/EpisodeVideo.tsx`)
- Episode Renderer → Background Music: renders (evidence: `src/EpisodeVideo.tsx`)
- Episode Renderer → Sound Effects: renders (evidence: `src/EpisodeVideo.tsx`)
- Episode Renderer → Transitions: renders (evidence: `src/EpisodeVideo.tsx`)
- Episode Renderer → Property Animation: applies (evidence: `src/EpisodeVideo.tsx`)
- Character State → Lip Sync: uses (evidence: `src/hooks/useCharacterState.ts`)
- Character State → Blink Animation: uses (evidence: `src/hooks/useCharacterState.ts`)
- Character Sprites → Lip Sync: uses (evidence: `src/components/CharacterSprite.tsx`)
- Character Sprites → Blink Animation: uses (evidence: `src/components/CharacterSprite.tsx`)
- Remotion → Composition Setup: hosts
- Remotion → Rendered Video: renders
- Episode Renderer → Rendered Video: produces