Magical Pen Ma Liang! Subtitles instantly turn into hand-drawn whiteboard animations, giving spoken knowledge instant visual appeal — absolutely captivating! Have a script but still manually create handwriting animations frame by frame? Manually adjust storyboard timing? How outdated is that! An AI skill for whiteboard animation with pen, hand, and breathing room [srt-whiteboard-animation], its core strength lies in:

• Subtitle-driven production: SRT split into 25–35 second scenes, each scene explaining one point.
• Natural flowing strokes: Line art first, then color fill. Beige paper background gives a course-like feel.
• Preview studio adjustable: Modify regions, sequence, timing, and subtitle alignment in the browser before rendering.
• Multi-scene merging: Render each scene as MP4, then combine into a complete video.
  GitHub: https://github.com/geeklee/srt-whiteboard-animation

Content creators, grab this tool — subtitles in, whiteboard animations out. Even Ma Liang’s magical pen wouldn’t be more impressive!
#OpenSource #WhiteboardAnimation #ProductivityTool

geeklee/srt-whiteboard-animation

Source: https://github.com/geeklee/srt-whiteboard-animation

SRT Whiteboard Animation Skill

Converts SRT subtitles into hand-drawn whiteboard videos following narrative order. It combines zonal mask orchestration with flowing stroke rendering: each element appears in sync with the subtitle, the pen continuously draws within a region, then gradually adds color, finally exporting to MP4.

Ideal for turning knowledge explanations, storytelling, course subtitles, or short-video scripts into warm beige paper-backed hand-drawn animations.

Demo Example

Scene: Monkey Mountain Banana Snatching — Following the narrative order of the subtitles, it sequentially draws the rockery and little monkey, the big monkey grabbing the banana, and the watching children.

Monkey Mountain Banana Snatching: SRT Whiteboard Animation Demo
Original line art: View PNG.

Core Capabilities

• Parses SRT subtitles and splits scenes based on a suggested 25–35 second duration.
• First outputs storyboards and illustration strategies, ensuring each scene conveys only one core idea.
• Builds semantic drawing sequences for elements based on subtitle events, not image coordinates.
• Manages regions, timing, subtitle associations, and overlap protection zones via annotation.json.
• Each region uses continuous flowing strokes: first ink for line art, then color for filling.
• Supports adjusting regions, sequence, timing, and subtitle associations in a browser preview studio.
• Supports per-scene rendering and multi-scene merging to output a complete MP4.

Workflow

The key of this Skill is “subtitle-driven, step-by-step confirmation.” Each step waits for confirmation before proceeding, avoiding wasted rendering costs when storyboards, line art, or annotations aren’t finalized:

1. Parse the SRT and output storyboards and illustration strategies.
2. After confirmation, generate uniformly styled line art.
3. After confirming the line art, create annotations based on subtitles and original images, then load them into the preview studio.
4. After confirming the annotations, generate region and direction check images.
5. Adjust regions, narrative sequence, timing, and subtitle associations in the preview studio and save.
6. After confirming the final annotations, render each scene as MP4.
7. Merge multi-scene projects after confirming each scene’s final cut.

Visual Specifications

• Warm beige paper background: Recommended #F5EBD7.
• Dark gray sketch lines; red, orange, and blue only as minimal conceptual accents.
• Minimalist hand-drawn style, clean background, and ample white space.
• No on-scene text, labels, photorealistic effects, 3D elements, or complex textures.

Installation & Environment

The Skill includes a standalone Python virtual environment preparation script. Run the following on first use:

python scripts/prepare_env.py --check
python scripts/prepare_env.py

Upon success, the first command outputs ENV_PY=<path>; use this interpreter for subsequent rendering to ensure dependency isolation.

Project Asset Structure

assets/whiteboard/<project-name>/
├── scene-01-<name>.png
├── scene-01-<name>.annotation.json
├── scene-01-<name>-whiteboard.mp4
└── scene-01-<name>-preview.mp4

Images and annotations must share the same base name. For example, scene-01-demo.png corresponds to scene-01-demo.annotation.json.

Annotation Format

Each element uses integer pixel coordinates from the original image and associates with subtitle events via sequence, subtitle, and narrativeRole. Regions should be ordered as “scene setup → key character/object → action or change → reaction/result.”

{
  "sceneId": "scene-01",
  "canvas": {
    "width": 1672,
    "height": 941
  },
  "storyBasis": "Little monkey sits on Monkey Mountain holding a banana, big monkey snatches the banana, children watch from the side.",
  "sceneDurationMs": 9000,
  "elements": [
    {
      "id": "rockery",
      "label": "Monkey Mountain Scene",
      "sequence": 1,
      "narrativeRole": "Scene setup for the story",
      "subtitle": "The little monkey sits atop Monkey Mountain, holding a banana.",
      "type": "structure",
      "region": {
        "x": 20,
        "y": 120,
        "width": 540,
        "height": 780
      },
      "reveal": {
        "direction": "top_to_bottom",
        "startMs": 300,
        "durationMs": 2600,
        "maskPaddingPx": 22,
        "protectedRegions": []
      },
      "handPath": {
        "start": [290, 130],
        "end": [290, 890],
        "easing": "easeInOut"
      }
    }
  ]
}

direction and handPath are used for rectangle proxies in the preview studio; the real strokes in the final output are automatically generated by the streaming renderer. For overlapping objects, mark regions to delay display in the protectedRegions of earlier elements to prevent later content from appearing prematurely.

Common Commands

Parse subtitles and generate suggested storyboards:

python scripts/parse_srt.py <subtitles.srt> --target-sec 30 --min-sec 25 --max-sec 35

Generate region check images:

python scripts/render_annotation_preview.py <image-path> <annotation-path> <preview-output-path>

Open assets/preview.html, use “Open Folder” to load the scene directory, then edit regions, sequence, timing, and subtitle associations.
Render a single scene:

scripts/render_stream_whiteboard.py <image-path> <annotation-path> <output.mp4> assets/drawing-hand.png \
  --ink-path grid --color-fill contour-wipe

Merge multiple scenes:

scripts/merge_scenes.py --inputs scene1.mp4 scene2.mp4 scene3.mp4 --output final.mp4

Quality Checks

• First frame is a clean warm beige background with no premature line art.
• canvas matches original image dimensions; all regions are integer pixel coordinates within the canvas.
• sequence and startMs align with the narrative order of the subtitles.
• In mid-sequence frames, unstarted regions and protected areas do not appear early.
• The pen tip stays close to the current flowing stroke; when line art is clear, you can choose --ink-path skeleton.
• Each scene ends with at least 0.5 seconds of full frame; merged multi-scene order matches the subtitle storyboards.

Repository Contents

srt-whiteboard-animation/
├── SKILL.md               # Full workflow and constraints
├── assets/
│   ├── drawing-hand.png   # Hand asset
│   ├── preview.html       # Local editing preview studio
├── examples/              # README example assets
├── scripts/
│   ├── parse_srt.py       # Subtitle parsing and storyboard suggestions
│   ├── render_annotation_preview.py  # Annotation check image
│   ├── render_stream_whiteboard.py   # Flowing stroke MP4 renderer
│   ├── merge_scenes.py    # Multi-scene merging
│   └── prepare_env.py     # Dependency environment preparation
└── agents/openai.yaml     # Codex metadata

Contributing

Issues and Pull Requests are welcome. Any changes to drawing logic should be tested with real subtitles, annotations, and final output to verify mask protection, timing, and the final image.

License

This project is open-source under the MIT License. See LICENSE for details.

About the Author

An old guy who loves raising fish / AI Builder / Using AI teams to build a one-person company.
Douyin, Bilibili, Official Account: “Jiang Ge is an Old Guy”

Denzii 🕊️ (@denziideng):
This topic raised by Brother Sun is sure to bring new industry opportunities. In just two days:
1️⃣ Cat God sister is self-funding a short drama, with investment…