手绘风格的动效视频 Skill（Claude Code / Agent Skill），十种画风可选：白板、黑板、水彩、蓝图、笔记本、牛皮纸、漫画、软木板、水墨、霓虹。字一个个手写出来，线条像马克笔一笔笔画出来，一支马克笔跟着笔尖走；截图和视频片段用胶带贴在白板上，场与场之间镜头在白板上横移。适合产品介绍、功能讲解、知识科普。

点上面的动图看完整成片（3 分 33 秒，1080p，带配音和配乐）：demo-codemotion.mp4。这条是用本 Skill 把一篇文章做成的讲解视频，稿子和每场画面在 examples/codemotion。

配置里改一行 "theme"，同一份稿子、同一段配音就换一种画风，场景代码不用动。下面是同一段开场在十种风格下的样子（examples/styles），完整对比视频：demo-styles.mp4。

白板 whiteboard（默认）	黑板 chalkboard
水彩 watercolor	蓝图 blueprint
笔记本 notebook	牛皮纸蜡笔 kraft
漫画 comic	软木板 cork
水墨 inkwash	霓虹 neon

"transition": "canvas"：所有白板摆在一张大画布上，换场时镜头平移、缩放过去，像在真白板上拖动；讲到一半能拉远看前面的白板，结尾拉到最远看全景。例子在 examples/codemotion-canvas，成片：demo-canvas.mp4。

画面全是 HTML + SVG，由按时间推进的运行时驱动，无头 Chrome 逐帧截图，所以每一帧都能复现，改一句话只重跑那一句。

git clone https://github.com/SpaceZephyr/space-handdrawn-motion-video ~/.claude/skills/space-handdrawn-motion-video
cd ~/.claude/skills/space-handdrawn-motion-video
npm i --prefix scripts                 # puppeteer-core、roughjs
bash scripts/assets/fetch_audio.sh     # 下载配乐和音效（Mixkit）

还需要：Chrome、ffmpeg、Python 3（numpy）。配音用 yovoice（Qwen3-TTS CustomVoice，本机运行，不克隆任何人的声音），校验用 mlx-audio + whisper-large-v3-turbo（Apple Silicon）。不配音也能做，只垫配乐。

在 Claude Code 里说「用手绘风格介绍 XX」「把这篇文章做成白板动画」就会触发。完整流程见 SKILL.md：

素材 → lines.json（一句一场）→ 配音 + 对时 → scenes.mjs（每场画面）→ 逐帧渲染 → 混音 → MP4 + 封面

参考：画面写法和组件 · 配音 · 踩过的坑

例子：

• examples/codemotion：讲解类，文章 → 3 分半视频，每种工具配演示动图和案例片段
• examples/duet：剪贴画宣传片，界面、手机、人像全部从官方 4K 发布视频剪下来贴上，英文旁白 + 双语字幕 + 卡拍
• examples/grokbot：产品介绍，中文旁白，84 秒
• examples/grokbot-en：同一个产品，英文旁白 + 中英双语字幕 + 动感卡点

例子里用到的第三方截图和视频片段不随仓库分发，重做时按各例子 README 里的说明重新抓。

代码 MIT。字体 小赖 Xiaolai，SIL OFL 1.1（assets/fonts/OFL.txt）。配乐和音效来自 Mixkit，免费可商用，但不允许再分发原文件，所以由 fetch_audio.sh 下载，不放进仓库。演示视频里引用的 YouTube 片段版权归原作者，画面下已标注出处。