xiejunjie524/handdraw-story-video

What it solves

This project provides a workflow to create short, vertical story videos (35-45 seconds) from a small set of hand-drawn style images. It automates the process of turning static images into an animation where black-and-white line art appears first, followed by low-saturation colors filling in from left to right.

How it works

The system uses a combination of Python scripts and web-based rendering tools. It takes a set of color images (mother images) and extracts aligned line art from them. Using a configuration file (story.json), it generates a HyperFrames page that uses GSAP for animations. The final video is rendered via FFmpeg and HyperFrames, ensuring the line art and color transitions are perfectly synchronized without needing to repeatedly call image generation models.

Who it’s for

Content creators and storytellers who want to produce stylized, hand-drawn animation videos for vertical platforms without needing complex professional animation software.

Highlights

• Automated Line Art Extraction: Generates perfectly aligned line drawings from color images.
• Synchronized Transitions: Implements a a left-to-right reveal for both line art and color.
• Asset Validation: Automatically checks for duration, duplicate materials, and subtitle constraints.
• Flexible Integration: Not tied to any specific image generation service or API.
• Codex Skill Support: Can be integrated as a Codex Skill for easier triggering of story creation.