How gnipbao/story-to-handdrawn-video works
The product turns Chinese stories or ordered images into silent 3:4 hand-drawn videos. Its main workflow is Agent-assisted story and style planning, image creation or image import, local page-asset processing, then Remotion composition and rendering. The graph includes the documented style-reference and custom-style capabilities. Some CLI and reference-style internals were not excerpted, so those documented relationships are cited to the README; implementation-level edges use the supplied source index or excerpts.
Main entry points: story-to-video.mjs Story CLI · StoryVideo.tsx Story Video · Root.tsx Composition Registry · UploadedStoryVideo.tsx Uploaded Video
Components 20
Planning and Styles
- Agent Skill
skill-package/story-to-handdrawn-video/SKILL.md - Story CLI
scripts/story-to-video.mjs - Style Catalog
references/handdrawn-style-library.json - Style Resolver
scripts/handdrawn-style-library.mjs - Reference Styles
scripts/reference-style.mjs
Image Preparation
- Generated Image Import
scripts/import-codex-images.mjs - Uploaded Image Import
scripts/import-uploaded-pages.mjs - Page Asset Processor
scripts/page-assets.mjs
Video Rendering
- Composition Registry
src/Root.tsx - Story Video
src/StoryVideo.tsx - Uploaded Video
src/UploadedStoryVideo.tsx - Scene Renderer
src/Scene.tsx - Layer Reveal
src/LayerWipe.tsx - Text Reveal
src/TextWipe.tsx - Reveal Timing
src/easing.ts
Storyboard Data
- Story Storyboard
storyboard.json - Uploaded Storyboard
storyboard.uploaded.json
Other components
- User
- Image Generator
- Silent MP4
Connections 28
- User → Agent Skill: requests video
README.md - Agent Skill → Story CLI: invokes workflow
README.md - Agent Skill → Image Generator: generates artwork
README.md - Story CLI → Style Resolver: resolves styles
scripts/story-to-video.mjs - Style Resolver → Style Catalog: loads catalog
scripts/handdrawn-style-library.mjs - Story CLI → Reference Styles: prepares references
- Story CLI → Page Asset Processor: processes pages
scripts/story-to-video.mjs - Story CLI → Generated Image Import: imports generated
README.md - Story CLI → Story Storyboard: prepares scenes
README.md - Generated Image Import → Page Asset Processor: uses processor
scripts/import-codex-images.mjs - Uploaded Image Import → Page Asset Processor: uses processor
scripts/import-uploaded-pages.mjs - User → Uploaded Image Import: provides images
README.md - Uploaded Image Import → Uploaded Storyboard: prepares scenes
README.md - Composition Registry → Story Video: registers composition
src/Root.tsx - Composition Registry → Uploaded Video: registers composition
src/Root.tsx - Composition Registry → Story Storyboard: loads storyboard
src/Root.tsx - Composition Registry → Uploaded Storyboard: loads storyboard
src/Root.tsx - Story Video → Story Storyboard: renders scenes
src/StoryVideo.tsx - Story Video → Scene Renderer: renders scene
src/StoryVideo.tsx - Uploaded Video → Story Video: reuses renderer
src/UploadedStoryVideo.tsx - Uploaded Video → Uploaded Storyboard: loads scenes
src/UploadedStoryVideo.tsx - Scene Renderer → Layer Reveal: reveals art
src/Scene.tsx - Scene Renderer → Text Reveal: reveals text
src/Scene.tsx - Layer Reveal → Reveal Timing: uses timing
src/LayerWipe.tsx - Text Reveal → Reveal Timing: uses timing
src/TextWipe.tsx - Story Video → Reveal Timing: times page flips
src/StoryVideo.tsx - Story Video → Silent MP4: renders MP4
README.md - Uploaded Video → Silent MP4: renders MP4
README.md