Content & Media Creation · iart-ai/explainer-video-skills

whiteboard-animation

Name: whiteboard-animation
Author: iart-ai/explainer-video-skills

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.

L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit

Author iart-aiGitHub iart-ai/explainer-video-skills ↗Stars 26License MIT（仓库根 LICENSE：MIT License / Copyright (c) 2026 iart.ai；.claude-plugin/plugin.json 声明 "license": "MIT"，GitHub API license.spdx_id = MIT）Commit 3e2d411b72

Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

The core mechanism is SVG stroke draw-on: the path contracts `stroke-dashoffset` from its full length to 0, visually creating the effect of being drawn from start to finish. When normalized with `pathLength="1"`, paths of any actual length are driven by the same 0→1 progress value.

skills/whiteboard-animation/SKILL.md

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.

The rest of the skill consists of engineering around this single mechanism (assets, pacing, hand, erasing, and export).

"The hand following the pen tip" is the essence of the illusion: each frame queries `getPointAtLength(len*k)` to get the tip coordinates, and the hand's nib offset `NIB` is aligned to that point. Both `dashoffset` and hand position must be driven by the exact same progress value `k`; otherwise, they will lag behind or overshoot each other.

skills/whiteboard-animation/SKILL.md

`getPointAtLength(len * k)` is the workhorse: it returns the on-path coordinate at the same progress driving `strokeDashoffset`, so the nib stays glued to the growing stroke.

While `diagram-animation` in the same pack only requires "lines being drawn", here there is an additional entity that must stay synchronized with the line—which is why its verification loop requires capturing "mid-stroke" frames.

Pacing is driven by the voiceover (VO) rather than fixed timers: the total drawing duration of each section roughly equals the corresponding VO line (baseline ~2.3 words/sec), and any label mentioned in the voiceover must finish drawing at the exact moment the word is spoken.

skills/whiteboard-animation/SKILL.md

Draw-on duration should track the spoken line, not a fixed timer.

Shares the same VO speaking rate baseline with `explainer-video` in the same repository, maintaining cross-skill consistency.

Drawing order is choreographed based on "how a human would actually draw": strokes in the SVG are ordered by drawing sequence and animated in document order. Elements appear one at a time following the narration order, leaving a 0.4–1.0s hold after each stroke lands, with the hand pulling away from the board rather than freezing in mid-air.

skills/whiteboard-animation/SKILL.md

| Hold | pause hand off-board after element completes (0.4–1.0s) |

"One tip at a time" is a hard constraint: the documentation explicitly states that the eye (and the single hand) can only follow one tip.

Assets must first be converted into single-stroke open paths: filled shapes lack strokes that can be animated, so the workaround is to draw the outline first before bringing in the fill. Handwritten text is rendered letter-by-letter in reading order by converting stroked fonts to paths, or simulated at low cost using a rectangular sweep mask.

skills/whiteboard-animation/references/whiteboard-pipeline.md

Draw-on animates strokes, not fills.

This puts usability checks upstream at the asset stage—most whiteboard animations fail because assets are filled shapes rather than stroked paths.

The board requires a clearing mechanism: three approaches are provided for erasing/transitions (`clip-path` or white rectangle wipe, reverse draw-on rewinding, or fade out followed by redraw), requiring a unified erasing grammar throughout the video to prevent cluttered board buildup.

skills/whiteboard-animation/SKILL.md

Keep one clear grammar (always wipe left-to-right, say) so transitions feel deliberate.

A unified grammar marks the boundary between "a realistic human-drawn board" and "random transition effects".

Delivery = single-file HTML (inline SVG paths ordered by drawing sequence, hand asset inlined or data-URI, a single inline script master timeline) + `?t=N` freeze; verification must capture at least one "mid-stroke" moment, as that is the exact point where the tip-alignment illusion holds or breaks.

skills/whiteboard-animation/SKILL.md

Pick at least one `t` in the *middle of a stroke* — that is where the hand-on-tip illusion is proven or broken.

Making the choice of verification frames a hard requirement rather than "just inspecting a few random frames" is this document's sharpest acceptance design.

When final video export is needed, migrate the same draw-on mechanism into Remotion: use `useCurrentFrame()/fps` to simultaneously drive `strokeDashoffset` and hand transforms, ensuring frame-deterministic rendering (no timers, no `rAF`).

skills/whiteboard-animation/references/draw-on-recipes.md

Drive both `strokeDashoffset` and the hand transform from `useCurrentFrame()` so the render is deterministic — no timers, no rAF.

The web layer and video layer share the same core mechanism, only swapping the driving source to prevent implementation drift.

2Core Capabilities

01stroke-dashoffset draw-on (vanilla implementation + pathLength="1" normalized version)

02Hand tracking the pen tip (NIB offset + per-frame getPointAtLength positioning)

03Hand lifts between strokes and multi-stroke sequential drawing (liftTo + drawShape loop per stroke)

04GSAP dual-plugin variant: DrawSVGPlugin for line drawing + MotionPathPlugin for hand tracking (alignOrigin equivalent to NIB)

05Two handwriting routes: glyph-to-path per-letter drawing (true stroke-by-stroke) or mask sweep simulation (low cost)

06Fill following outline: outline is drawn first, followed by fill fade-in or clip-inset flood, perceived as "coloring in"

07Erasing / un-draw (hand follows in reverse)

08Hand asset calibration workflow: one-time precise nib offset measurement, reusing the same hand across the video, recalibration required when mirrored

09Remotion frame-driven porting (same mechanism outputting frame-deterministic MP4/GIF)

3External Dependencies

Kind	Dependency / Endpoint
cli	npx / Playwright（无头截图）
cli	ffmpeg（contact-sheet.sh 拼图）
cli	npx -y playwright（仓库根 seek-shot.sh 内部）
package	GSAP 及其 DrawSVGPlugin / MotionPathPlugin（reference 以裸包名 import，未指定 CDN）
network	手写字体（Caveat / Patrick Hand / Shadows Into Light 等），来源由使用者决定（@font-face 自托管或字体 CDN）
api	无第三方业务 API；旁白由使用者自备或宿主侧 TTS 产出

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Graded/per-use authorization, sandbox recommended

For Administrators

Approval workflow, rollback support, full audit

Evidence & Triggers (File Paths & Excerpts)

scripts/: Execution of local scripts or commands: npx playwright screenshot --wait-for-timeout=500 … (SKILL.md Verify loop inline command)
网络端点: Declaration of external network access: The skill itself makes no business API calls; network exposure stems from the toolchain—npx fetches playwright packages from registry.npmjs.org and downloads Playwright browser binaries
本地工作目录: File I/O and artifact output: frame-mid.png (SKILL.md inline screenshot example output), frame-<t>.png (seek-shot.sh output)

Audit Notes: The assessment target is the skill's own directory (skills/whiteboard-animation/: SKILL.md + references/ two cookbooks + 0-byte README.md; contains no scripts, credentials, or disk write operations). What triggers the amber rating is its defined review loop and dependencies: ① SKILL.md's Verify loop directly inlines `npx playwright screenshot …`, and the referenced repo-root helper `scripts/seek-shot.sh` internally runs `npx -y playwright screenshot`—where npx fetches packages from the npm registry and downloads Chromium binaries on first run, falling under the classification criteria of "reliance on third-party plugins, mirrors, or remote packages" (precedent from the same author's pack: logo-animation was rated amber for the same reason); ② The GSAP approach provided in reference relies on third-party packages such as DrawSVGPlugin / MotionPathPlugin (although free since GSAP 3.12, they remain external packages). The skill itself does not read credentials/env, invoke business APIs, scrape data, or bypass safeguards, so it is not red. Trigger condition: remote fetching only occurs when actually running the verification loop (screenshot/tiling) or loading the GSAP path; purely writing HTML, using vanilla draw-on, or manual inspection does not trigger it.

5Second-Pass Verification

[ok] 外部依赖调用点复核（npx playwright / ffmpeg / GSAP 插件 / 字体） — SKILL.md Verify loop 内确有 `npx playwright screenshot --wait-for-timeout=500 "file://$PWD/scribe.html?t=1.2" frame-mid.png`；仓库根 scripts/seek-shot.sh 与 contact-sheet.sh 分别为 npx playwright 与 ffmpeg；draw-on-recipes 第 4 节确有 `import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";` 与 MotionPathPlugin 版本；字体建议在 whiteboard-pipeline 第 3 节。四条均落地，非推测。
[ok] 「手跟笔尖」机制自洽性 — SKILL.md 的 drawOn 与 reference 的 drawOnWithHand 都把同一个 k 同时用于 `path.style.strokeDashoffset = len * (1 - k)` 与 `path.getPointAtLength(len * k)`，并有 liftTo 在笔画间抬手、unDraw 反向跟随——机制自洽，无「手与线不同源」的写法。
[ok] 无凭证 / 无业务 API 反查 — 三份文档与仓库脚本中无 API_KEY/token/secret/.env 读取、无 curl/wget、无业务端点调用；GSAP 以裸包名 import（无内嵌 CDN URL），字体建议未附 URL。判橙依据是远程包依赖，不含凭据读取。
[ok] VO 语速口径跨 skill 一致性 — 本 skill 写「Estimate from VO at ~2.3 words/sec」，同 repo 的 explainer-video 写「~2.3 words/sec (140 wpm)」「scene_seconds = line_words / pace + 0.4」——口径一致，跨 skill 可互操作。
[ok] 目录资产面清点 — skills/whiteboard-animation/ 下仅 SKILL.md（154 行）、references/draw-on-recipes.md（210 行）与 references/whiteboard-pipeline.md（95 行）、0 字节 README.md；无 scripts/、无手部资产实物、无模板/数据——「纯指令 + 内联代码片段」结论成立（手部 PNG/SVG 由使用者自备，skill 只给标定方法）。
[ok] 跨引用可解析性 — SKILL.md 两处引用均可解析：`scripts/seek-shot.sh`、`scripts/contact-sheet.sh` 位于仓库根（单装本 skill 目录会悬空，需装整个 repo）；`see explainer-video` 指向的 explainer-video 确实存在于本 repo 的 skills/ 下。
[ok] 功能声明 vs 实际能力 — frontmatter 宣称覆盖 SVG stroke draw-on、跟随笔尖的手、错峰揭示、擦除/擦转场与旁白导出，正文与两份 reference 逐项兑现（含 GSAP 与 Remotion 两条实现路径）；未声称能自动生出手部素材或自动描摹——素材转换只给方法不给工具。

6Verdict & Scenarios

Verification frames are pinned to "mid-stroke"—turning the illusion's most fragile moment into a hard checkpoint instead of a vague "check a few frames" request

Shared source for hand and line: a single progress value drives both dashoffset and hand position, eliminating common desyncs like the hand lagging behind the line

Upfront engineering check on asset drawability, offering three conversion paths: tracing, centerline extraction, and fill fallback

Pacing anchored to voiceover word count (same metric as explainer-video), avoiding animations that look great but fall out of sync with the narration

Best for: Ideal for VideoScribe/Doodly style doodle explainers: situations requiring the visual aesthetic of a hand drawing illustrations and handwriting stroke by stroke on a board, with assets prep-able into single-stroke open paths. Also suitable for turning a static line sketch into a progressive reveal short animation, or pairing an existing voiceover with a synchronized hand-drawn board.

Not for: Not suitable for visuals dominated by filled color blocks or photos (the draw-on mechanism cannot operate on filled shapes, requiring substantial asset rework); not suitable for automated batch processing of vector icons lacking stroke semantics (requires manual or automated centerline extraction); not suitable for fine hand-drawn art requiring realistic brush textures or paper grain (this skill only reveals paths and does not generate brush textures).

Install Agent-Ready

① Verified Mirror 2026-09-28

Option A · Direct DownloadDownload whiteboard-animation.tar.gz

sha256: e46a8cf637ab1932…

Option B · Copy Guide for Agent

install.json

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 3e2d411b72.