1仕組みと動作原理
コアメカニズムは SVG stroke draw-on です。パスの `stroke-dashoffset` を全長から 0 まで縮めることで、視覚的に始点から終点まで描かれる効果を生み出します。`pathLength="1"` で正規化することで、実際の長さに関わらずあらゆるパスを同一の 0→1 進捗値で制御できます。
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.
本スキルにおけるその他の内容はすべて、この単一メカニズムのエンジニアリング（素材、テンポ、手、消去、エクスポート）を中心に構成されています。
「ペン先に追従する手」がこのイリュージョンの核です。毎フレーム `getPointAtLength(len*k)` からペン先の座標を取得し、手のペン先オフセット `NIB` をその点に合わせます。`dashoffset` と手の位置はまったく同一の進捗値 `k` で駆動する必要があり、そうでなければ両者が互いに追いつかなくなります。
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.
同じパックの `diagram-animation` では「線が描かれる」ことのみを求めていますが、ここでは線と同期すべき実体が加わります。これが検証ループで「ストロークの途中」フレームを取得する理由です。
テンポは固定タイマーではなくナレーションによって駆動されます。各描画セクションの合計時間は対応する VO（音声）行の長さ（ベースライン ~2.3 単語/秒）とほぼ一致し、ナレーションで読み上げられたラベルはその単語が発声された瞬間に描き終える必要があります。
skills/whiteboard-animation/SKILL.md
Draw-on duration should track the spoken line, not a fixed timer.
同一リポジトリの `explainer-video` と同じ VO 話速基準を共有しており、スキル間で基準が統一されています。
描画順序は「人間が実際にどう描くか」に基づいて組み立てられます。SVG 内のストロークは描画順に並べられ、ドキュメント順にアニメーション化されます。要素はナレーションの順序に沿って1つずつ出現し、各ストローク完了後は 0.4〜1.0 秒の静止時間を設け、手は空中に静止せずボードから離れるようにします。
skills/whiteboard-animation/SKILL.md
| Hold | pause hand off-board after element completes (0.4–1.0s) |
「一度に1つのペン先」は厳格な制約です。ドキュメントには明確に「目（および単一の手）は1つの先端しか追うことができない」と記載されています。
素材はあらかじめ単一ストロークの開いたパスに変換する必要があります。塗りつぶし領域にはアニメーション化できる stroke がないため、まず輪郭を描いてから塗りを追従させる手法をとります。手書き文字は、ストロークフォントをパス化して読む順に1文字ずつ描くか、矩形マスクのスイープで擬似的に手書きを再現します。
skills/whiteboard-animation/references/whiteboard-pipeline.md
Draw-on animates strokes, not fills.
このルールにより「使用可能かどうか」を素材段階に前倒しして判断します。大半のホワイトボードアニメーションの失敗は、素材が線描パスではなく塗りつぶし図形であることに起因します。
盤面にはクリア機構が必要です。消去／遷移には3つの手法（`clip-path` または白矩形による消去、逆方向 draw-on による巻き戻し、フェードアウト後の再描画）が用意されており、画面が乱雑に重なり合わないよう全編で統一された消去文法を要求します。
skills/whiteboard-animation/SKILL.md
Keep one clear grammar (always wipe left-to-right, say) so transitions feel deliberate.
統一された文法こそが、「人間が描いたボード」と「ランダムな切り替えエフェクト」を分ける境界線です。
納品物 = 単一ファイル HTML（描画順のインライン SVG パス、インラインまたは data-URI の手の素材、単一のインライン script マスタータイムライン）+ `?t=N` 静止化。検証では必ず「あるストロークの途中」のタイミングを最低1点取得する必要があります。そこがペン先の追従イリュージョンが成立しているか破綻しているかを分けるポイントだからです。
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.
「適当に数フレーム見る」のではなく検証フレームの選択位置を厳格な要件として定義している点が、本ドキュメントの最も鋭い検収設計です。
完成動画が必要な場合は、同一の draw-on メカニズムを Remotion に移行します。`useCurrentFrame()/fps` で `strokeDashoffset` と手の transform を同時に駆動し、フレーム単位で確定的なレンダリング（タイマーや `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.
Web レイヤーと動画レイヤーで同一メカニズムを共有し、駆動源のみを差し替えることで、2つの実装間の乖離を防ぎます。
2コア機能
01stroke-dashoffset draw-on（vanilla 実装 + pathLength="1" 正規化版）
02ペン先への手の追従（NIB オフセット + フレームごとの getPointAtLength による位置決め）
03ストローク間の手の引き上げと複数ストロークの順次描画（liftTo + drawShape のストロークループ）
04GSAP デュアルプラグイン変種：線描画用の DrawSVGPlugin + 手の追従用の MotionPathPlugin（alignOrigin は NIB に相当）
05手書き文字の2つのアプローチ：グリフをパス化して1文字ずつ描画（本格的な逐次描画）またはマスクスイープによる擬似描画（低コスト）
06輪郭に追従する塗りつぶし：輪郭を描き終えた後にフェードインまたは clip-inset で流し込み、「色塗り」として見せる
07消去／逆描画（un-draw、手は逆方向に追従）
08手の素材のキャリブレーション手順：ペン先オフセットの1回限りの正確な測定、全編で同一の手を使用、反転時の再測定
09Remotion フレーム駆動への移植（同一メカニズムによるフレーム確定的な MP4/GIF 出力）
3外部依存関係
| 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 产出 |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプトまたはコマンドの実行: npx playwright screenshot --wait-for-timeout=500 …（SKILL.md Verify loop 内のインラインコマンド）
- 网络端点: 外部ネットワークアクセスの宣言: スキル自体にビジネス API 呼び出しはありません。ネットワーク露出はツールチェーンに起因し、npx が registry.npmjs.org から playwright パッケージを取得し、Playwright ブラウザバイナリをダウンロードします
- 本地工作目录: ファイル読み書きと成果物の出力: frame-mid.png（SKILL.md 内のインラインスクリーンショット例の出力）、frame-<t>.png（seek-shot.sh の出力）
監査ノート： 評価対象はスキル自体のディレクトリ（skills/whiteboard-animation/：SKILL.md + references/ 配下の2つのクックブック + 0バイトの README.md。ディレクトリ内にスクリプトや認証情報は存在せず、ディスクへの書き込みも行いません）です。オレンジ判定の原因となったのは、規定された確認ループと依存関係です。① SKILL.md の Verify loop に `npx playwright screenshot …` が直接インライン記述されており、参照されているリポジトリルートのヘルパー `scripts/seek-shot.sh` 内部でも `npx -y playwright screenshot` が実行されます。npx は npm レジストリからパッケージを取得し、初回実行時に Chromium バイナリをダウンロードするため、「サードパーティ製プラグイン、ミラー、リモートパッケージへの依存」という分類基準に該当します（同一作者パックの先行事例：logo-animation も同様の理由でオレンジ判定）。② reference に記載されている GSAP の実装ルートは DrawSVGPlugin や MotionPathPlugin などのサードパーティ製パッケージに依存しています（GSAP 3.12 以降は無料ですが、依然として外部パッケージです）。スキル自体は認証情報や環境変数を読み取らず、業務 API を呼び出さず、データ収集を行わず、保護策を回避することもないため、レッド判定ではありません。トリガー条件：実際に検証ループ（スクリーンショット／タイル表示）を実行するか GSAP ルートを読み込んだ場合にのみリモート取得が発生し、単に HTML を記述する、vanilla draw-on を使用する、または手動で確認する場合には発生しません。
5二重目の独立検証
- [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 两条实现路径）；未声称能自动生出手部素材或自动描摹——素材转换只给方法不给工具。
6結論
最適な用途： VideoScribe や Doodly スタイルの手描き解説動画に最適です。「手によってイラストや手書き文字がホワイトボード上に一筆ずつ描かれていく」ビジュアルが求められ、素材を単一ストロークの開いたパスに整理できる用途に適しています。また、静的な線画を徐々に明かしていく短いアニメーションに変換する場合や、既存のナレーションに同期した手描きボードを付ける用途にも向いています。
不向きな用途： 塗りつぶしの色面や写真が主体の画面には不向きです（draw-on メカニズムは塗りつぶし図形に適用できず、素材の大幅な改修が必要になります）。ストロークの意味を持たないベクターアイコンの自動バッチ処理（手動またはツールによる中心線抽出が必要）や、リアルな筆のタッチや紙の質感を必要とする精緻な手描きアート（本スキルはパスの出現のみを扱い、筆触テクスチャは生成しません）には適していません。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload whiteboard-animation.tar.gz
sha256:
Option B · Copy Guide for Agente46a8cf637ab1932…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 3e2d411b72.