hi-nikola/hand-drawn-explainer-video-nikola

中文手绘知识讲解视频 Codex Skill:逐笔故事、双语义岛、让怪诞小黑动起来与程序动画

What it solves

This project provides a system for creating hand-drawn explainer videos from text, scripts, or SRT files. It solves the problem of manually animating complex educational content by automating the process of "drawing while speaking," ensuring that visual elements appear in sync with the audio narration.

How it works

The system offers two primary production paths:

  1. Stroke-by-Stroke Animation: This method uses bitmap line-art extraction, skeleton/stream continuous strokes, and regional masking to create a realistic drawing effect where lines appear as if they are being drawn in real-time. It supports various layouts like single scenes, multi-act stories, and "dual semantic islands" (drawing on the left, then the right while retaining previous content).
  2. Programmatic Animation: This method uses HTML, SVG, and GSAP/HyperFrames to create motion graphics such as flowcharts, relationship diagrams, and precise text elements that move, scale, or switch according to a narration timeline.

For audio, it defaults to high-quality synthesis via Volcengine's Seed-TTS 2.0. The final output is delivered as a complete MP4 video with subtitles (SRT) and editable source materials.

Who it’s for

It is designed for content creators, educators, and knowledge sharers who want to produce professional-looking hand-drawn or programmatic explainer videos for Chinese-language content without needing manual frame-by-frame animation skills.

Highlights

  • Realistic Drawing Effects: Avoids simple image fades or slides, using actual stroke-based rendering.
  • Multiple Visual Styles: Includes presets for "Chibi" characters and the "Xiaohei" (minimalist black figure) style.
  • Flexible Layouts: Supports complex narrative structures like dual semantic islands for better information organization.
  • Hybrid Output: Combines traditional image algorithms for rendering with external AI services for voiceover and illustration generation.
  • Editable Deliverables: Provides not just the final MP4, but also the SRT and editable project files.

Related

  • Project
  • Project
  • Project
  • Project