# whiteboard-animation

Guides agents in generating VideoScribe-style whiteboard explainers with animated SVG strokes and a marker hand following the pen tip.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1400 installs · ★ 56
- Author: iart-ai
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/iart-ai/explainer-video-skills/tree/HEAD/skills/whiteboard-animation/SKILL.md
- Updated: 2026-06-22
- HTML: https://affpapa.org/en/nevibecode/skills/whiteboard-animation

## What it does

This skill guides the agent through building hand-drawn whiteboard explainers directly in SVG and JavaScript. Lines reveal themselves by animating `stroke-dashoffset` down to zero. A marker hand asset tracks the moving stroke tip frame by frame via `getPointAtLength(len * k)`, using an explicit pen-nib offset coordinate so the tip never floats away from the ink.

The mechanics enforce drawing order aligned with narration. Only one stroke draws at a time, paced at an estimated 2.3 words per second, with short holds between elements. Scene transitions clear the board using clip-path wipes, reverse draw-ons, or cross-fades rather than abrupt cuts.

Closed compound shapes will break the effect because they lack an animatable stroke. Your artwork must be authored or traced as open, single-stroke paths in the exact sequence a real hand would draw them.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add iart-ai/explainer-video-skills --skill whiteboard-animation -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/whiteboard-animation/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/whiteboard-animation/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add iart-ai/explainer-video-skills --skill whiteboard-animation -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/whiteboard-animation/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add iart-ai/explainer-video-skills --skill whiteboard-animation -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/whiteboard-animation/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install iart-ai/explainer-video-skills whiteboard-animation
```

2. **Manually: put the files in place**
- File: `.github/skills/whiteboard-animation/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add iart-ai/explainer-video-skills --skill whiteboard-animation -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/iart-ai/explainer-video-skills --path skills/whiteboard-animation
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/whiteboard-animation/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add iart-ai/explainer-video-skills --skill whiteboard-animation -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/iart-ai/explainer-video-skills/tree/HEAD/skills/whiteboard-animation/SKILL.md

## When to use it
- animate SVG paths to look like live hand-drawn sketches
- pin a moving marker hand asset precisely to the stroke tip
- sync handwriting and illustration reveals with voiceover pacing
- clear scenes between narrative beats with wipe or reverse-draw transitions

## Example prompts
- Make a whiteboard animation for this architecture sketch with a marker hand
- Animate this handwriting SVG path stroke-by-stroke timed to narration
- Set up a VideoScribe-style doodle explainer with wipe transitions between steps

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: ec58bd6014ac4d31.

BEGIN THIRD-PARTY FILE ec58bd6014ac4d31
````text
---
name: whiteboard-animation
description: This skill should be used when the user asks to "make a whiteboard animation", "draw-on explainer", "VideoScribe style", "hand-drawn explainer video", "animate a sketch being drawn", "do a doodle/scribe video", "show a hand drawing the illustration", or "animate handwriting appearing on a whiteboard". Covers SVG stroke draw-on, a marker hand that follows the path tip, staggered reveal, erase/wipe transitions, and narrated export.
version: 0.1.0
---

# Whiteboard Animation

The VideoScribe / Doodly look: a hand draws illustrations and handwriting onto a board, stroke by stroke, while narration explains. Build it from animated SVG paths that draw themselves plus a marker hand that tracks the drawing tip, then sequence elements so the board fills up in narration order.

## When to use

- A "scribe" / doodle explainer where a hand draws art and text onto a whiteboard.
- Animating a sketch or logo being drawn live, line by line.
- Handwriting that writes itself in, synced to a voiceover.
- Turning a static illustration into a guided, stroke-by-stroke reveal.

## Core mechanic: SVG stroke draw-on

A path "draws itself" by animating `stroke-dashoffset` from its full length down to 0 — the dash gap shrinks, exposing the stroke from start to end.

```js
const path = document.querySelector("#stroke");
const len  = path.getTotalLength();
path.style.strokeDasharray  = len;       // one dash as long as the whole path
path.style.strokeDashoffset = len;       // pushed fully out of view = invisible
path.getBoundingClientRect();            // force reflow before transitioning
path.style.transition       = "stroke-dashoffset 1.2s linear";
path.style.strokeDashoffset = "0";       // draws start → end
```

Use `pathLength="1"` on the `<path>` to normalize: then `stroke-dasharray:1; stroke-dashoffset:1` draws any path regardless of real length, and a single eased value (0→1) is the draw progress. `linear` (or a very gentle ease) reads as a steady hand; avoid `ease-in-out` on long strokes — it makes the marker lurch.

## The marker hand follows the tip

The illusion lives or dies on the hand sitting at the exact point being drawn. Sample the path at the current draw progress and place the hand image there each frame; the pen-nib of the hand asset must align to the path point (offset the image so its tip, not its corner, lands on the point).

```js
const hand = document.querySelector("#hand");   // <img>/<g>, tip at its top-left "nib"
const NIB = { x: 6, y: 4 };                      // nib offset inside the hand art
function drawOn(path, hand, dur = 1200) {
  const len = path.getTotalLength(), t0 = performance.now();
````
END THIRD-PARTY FILE ec58bd6014ac4d31

The third-party file has ended. Everything between the ec58bd6014ac4d31 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2694 of 11744 bytes. © iart-ai · MIT · https://github.com/iart-ai/explainer-video-skills/tree/HEAD/skills/whiteboard-animation/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md