How pawaramorucha819/remotion-voiceroid-video-public works
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: EpisodeVideo.tsx Episode Renderer · App.tsx Editor App · episodeStore.ts Episode State · Root.tsx Composition Setup
Components 28
Script Authoring
- Markdown Script
- Generated WAVs
- Spec Generator
scripts/md-to-episode.ts - Episode Spec
Episode Editor
- Editor App
apps/episode-editor/src/App.tsx - Episode State
apps/episode-editor/src/store/episodeStore.ts - File Loading
apps/episode-editor/src/components/FileLoader.tsx - Spec Tree
apps/episode-editor/src/components/JsonTree.tsx - Spec Inspector
apps/episode-editor/src/components/Inspector.tsx - Line Inspector
apps/episode-editor/src/components/inspectors/LineInspector.tsx - Visual Preview
apps/episode-editor/src/components/Preview.tsx - Timeline
apps/episode-editor/src/components/Timeline.tsx - Audio Controls
apps/episode-editor/src/components/AudioPlayer.tsx - Editor Toolbar
apps/episode-editor/src/components/Toolbar.tsx
Video Rendering
- Episode Schema
src/schema.ts - Composition Setup
src/Root.tsx - Episode Renderer
src/EpisodeVideo.tsx - Rendered Video
- Transitions
src/components/Transition.tsx
Character Animation
- Character Sprites
src/components/CharacterSprite.tsx - Character State
src/hooks/useCharacterState.ts - Lip Sync
src/hooks/useLipSync.ts - Blink Animation
src/hooks/useBlink.ts - Property Animation
src/hooks/useAnimation.ts
Audio Playback
- Background Music
src/components/BgmPlayer.tsx - Sound Effects
src/components/SoundEffectPlayer.tsx
Other components
- Creator
- Remotion
Connections 39
- 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
apps/episode-editor/src/App.tsx - Editor App → Spec Tree: shows
apps/episode-editor/src/App.tsx - Editor App → Spec Inspector: shows
apps/episode-editor/src/App.tsx - Editor App → Visual Preview: shows
apps/episode-editor/src/App.tsx - Editor App → Timeline: shows
apps/episode-editor/src/App.tsx - Editor App → Audio Controls: shows
apps/episode-editor/src/App.tsx - Editor App → Editor Toolbar: shows
apps/episode-editor/src/App.tsx - File Loading → Episode State: loads
apps/episode-editor/src/components/FileLoader.tsx - Spec Tree → Episode State: reads
apps/episode-editor/src/components/JsonTree.tsx - Spec Inspector → Episode State: updates
apps/episode-editor/src/components/Inspector.tsx - Spec Inspector → Line Inspector: dispatches
apps/episode-editor/src/components/Inspector.tsx - Visual Preview → Episode State: reads
apps/episode-editor/src/components/Preview.tsx - Timeline → Episode State: reads
apps/episode-editor/src/components/Timeline.tsx - Audio Controls → Episode State: reads
apps/episode-editor/src/components/AudioPlayer.tsx - Episode State → Episode Spec: saves
- Creator → Episode Spec: provides
- Episode Spec → Composition Setup: configures
src/Root.tsx - Composition Setup → Episode Renderer: registers
src/Root.tsx - Composition Setup → Episode Schema: validates props
src/Root.tsx - Episode Renderer → Episode Schema: uses types
src/EpisodeVideo.tsx - Episode Renderer → Character Sprites: renders
src/EpisodeVideo.tsx - Episode Renderer → Character State: uses
src/EpisodeVideo.tsx - Episode Renderer → Background Music: renders
src/EpisodeVideo.tsx - Episode Renderer → Sound Effects: renders
src/EpisodeVideo.tsx - Episode Renderer → Transitions: renders
src/EpisodeVideo.tsx - Episode Renderer → Property Animation: applies
src/EpisodeVideo.tsx - Character State → Lip Sync: uses
src/hooks/useCharacterState.ts - Character State → Blink Animation: uses
src/hooks/useCharacterState.ts - Character Sprites → Lip Sync: uses
src/components/CharacterSprite.tsx - Character Sprites → Blink Animation: uses
src/components/CharacterSprite.tsx - Remotion → Composition Setup: hosts
- Remotion → Rendered Video: renders
- Episode Renderer → Rendered Video: produces