Creating hand-drawn whiteboard explainer videos from technical documentation, product specs, or classroom notes usually requires hours of manual keyframing in desktop timeline editors.
In this technical guide, we walk through how we built SpeedPainter AI — a browser-based AI speed paint and whiteboard animation studio — and how developers and AI agents can automate narrated multi-scene explainer videos using our AI Whiteboard Explainer Video Maker and open-source SpeedPainter Explainer Video CLI & MCP Server.
1. Stroke-Order Extraction & Hand-Drawn Trajectory Synthesis
Unlike generic text-to-video diffusion models that hallucinate unreadable text or flickering diagrams, a true whiteboard speed-paint animation needs deterministic stroke progression:
- Structural Edge & Contour Decomposition: Uploaded diagrams, illustrations, or generated storyboard frames are segmented into hierarchical vector contours (primary outlines first, internal shading and color fills second).
- Continuous Path Ordering: We solve a locality-constrained path optimization problem so the virtual drawing hand moves naturally across the canvas without erratic jumps.
- Synchronized Voiceover & Subtitle Alignment: In our AI Whiteboard Explainer Video Maker, each script paragraph is synthesized into natural narration while the stroke drawing duration is dynamically scaled to match the audio cadence.
interface SceneSpec {
sceneIndex: number;
narrationText: string;
visualPrompt: string;
sketchDurationSec: number;
handStyle: "marker" | "pencil" | "chalk" | "none";
}
2. Automating Explainer Videos from Claude Desktop & Cursor via MCP
To let developers generate whiteboard animations directly from markdown READMEs or PR descriptions, we open-sourced SpeedPainterOrg/explainer-video.
You can wire it into Claude Desktop, Cursor, or Windsurf via MCP:
{
"mcpServers": {
"speedpainter": {
"command": "npx",
"args": ["-y", "@speedpainter/explainer-video-mcp"]
}
}
}
3. Try It Live
- Web Studio (Image to Speed Paint Video): https://www.speedpainter.org/en
- Script-to-Whiteboard Explainer Video Maker: https://www.speedpainter.org/en/explainer-video
- GitHub Repository & MCP Integration: https://github.com/SpeedPainterOrg/explainer-video
Top comments (0)