whiteboard-video

A Claude Code skill that turns any topic into a hand-drawn whiteboard explainer video: a marker draws each scene in sync with the voice-over, the board slides to the next idea, captions run along the bottom, and you get an MP4.

Watch the demo with sound. It was written, voiced and drawn by this skill.

What it does

1. Asks for context. Topic, audience, length, format, language, facts to include.
2. Writes the script. Scene by scene, with what gets drawn and the facts behind every claim, checked in two sources. You approve it before anything is drawn.
3. Lets you pick a voice. It renders the same sentence with a few voices so you choose by ear: free macOS Premium voices, ElevenLabs, OpenAI TTS, or your own recordings.
4. Draws and renders. Hand-drawn SVG scenes timed to each spoken line, previews for review, then a 1080p MP4 in 16:9 or 9:16.

Everything runs locally: headless Chrome draws the frames, ffmpeg makes the video.

Install

Requirements: Claude Code, Node 18+, Python 3.9+, ffmpeg, and Google Chrome (or Chromium/Edge).

git clone https://github.com/Matteoikarieth96/whiteboard-video-skill ~/.claude/skills/whiteboard-video
cd ~/.claude/skills/whiteboard-video/scripts && npm install
brew install ffmpeg   # macOS; use your package manager elsewhere

Then just ask Claude Code:

Make a 60-second whiteboard video explaining how interest rates affect mortgages, for first-time buyers.

Use it without Claude

S=~/.claude/skills/whiteboard-video/scripts
$S/new_project.sh my-video              # or: --vertical for 1080x1920
# edit my-video/script.json (what is said) and my-video/scenes.js (what is drawn)
python3 $S/make_audio.py my-video       # voice-over + exact timing of every line
node $S/render.js my-video sheet        # one PNG per scene + previews/sheet.png with all of them
node $S/render.js my-video full         # my-video/out/my-video.mp4

Voices

Keys stay in a local .env that is git-ignored. Compare voices before committing to one:

python3 $S/make_audio.py my-video --samples "A sentence from your script." \
  --voices "say:Ava (Premium):185" "say:Samantha:190"

Share it

Social platforms take the MP4 directly. For a GIF (the one at the top of this page was made this way):

ffmpeg -i my-video/out/my-video.mp4 -t 34 \
  -vf "fps=12,scale=800:-1:flags=lanczos,split[a][b];[a]palettegen=max_colors=64[p];[b][p]paletteuse=dither=bayer" my-video.gif

docs/demo.mp4 is examples/how-it-works rendered with render.js full.

How it works

• script.json lists scenes and spoken lines. Each line becomes one caption.
• make_audio.py voices every line separately and records exactly when it starts and ends.
• scenes.js draws each scene with a small API (T for text, P for paths, plus lines, arrows, circles, icons) and times every stroke against those lines, for example "draw the coin halfway through the second sentence".
• render.js checks timing and layout, makes previews, renders every frame deterministically and muxes the audio.

See references/drawing-api.md for the full drawing API and examples/ for two complete videos.

Examples

• examples/how-it-works: the 33-second demo above.
• examples/rwa-on-ethereum: a 2-minute explainer on tokenized stocks and bonds, with charts, three-column comparisons and a custom logo.
• examples/sec-innovation-exemption: a 1:53 news explainer on the SEC Innovation Exemption, with the brief given to the skill and the sources behind every claim.

License

Code: MIT. The Caveat font is under the SIL Open Font License, included in assets/fonts/OFL.txt.

Built with Claude Code.