懶人包
- ClaudeAnimationBase 是 JohnHeibel 在 2026-09-23 開源的 MIT 模板（2026-10-25 查 1,750 星），讓 Claude 寫 p5.js 加 p5.brush 程式，逐格畫出手繪水彩風動畫，再用 headless Chrome 和 ffmpeg 輸出 MP4。
- 模板的核心是一份 461 行的
ANIMATION_GUIDE.md。最值得帶走的三條規則：先寫分鏡、每個鏡頭只發生一件事、每一步都渲染縮圖用眼睛自審。- 我照這套流程做了一支 9 秒原創短片〈楓葉帽子〉，主角換成自創的麻糬角色。第一輪縮圖抓出角色太小、跳太低、葉子像星星三個問題，第二輪修好才正式渲染。
- RTX 4070 渲染 9 秒（216 格）花 327 秒；官方 11 秒 demo 用軟體渲染每格約 16 秒，比 GPU 慢約 12 倍。
- 適合做短片頭、角色小動畫和「AI 寫程式做影片」的教學示範；需要快速交片的商業影片、或沒有獨立顯示卡的機器不適合。
這支是成品，已經上傳成 YouTube Shorts（直式版、循環兩次共 18 秒）：
畫面裡沒有任何一格是 AI 生圖模型「生」出來的。每一格都是 Claude 寫的 JavaScript 畫出來的：同一個時間點 t 丟進去，永遠畫出同一張圖。這篇整理 ClaudeAnimationBase 模板是什麼、它的指南要求模型怎麼工作，以及我實際做一支短片的過程和數據。
🎨 ClaudeAnimationBase 是什麼？
它來自一支 MV。〈I'm Upping My P(Doom)〉的畫面全部由 Claude 寫程式產生，原始碼放在 JohnHeibel/PDoomVideo，README 寫明 repo 裡的東西都是模型生成的。作者隔天把引擎、角色和「模型哪裡做得好、哪裡做不好」的分析整理成模板，就是 ClaudeAnimationBase。
| 項目 | 內容（2026-10-25 查） |
|---|---|
| Repo | JohnHeibel/ClaudeAnimationBase，MIT 授權，1,750 stars，2026-09-23 建立 |
| 來源專案 | JohnHeibel/PDoomVideo，2,561 stars，2026-09-22 建立 |
| 繪圖 | p5.js 2.x 加 p5.brush（WebGL 上的水彩填色與墨線筆觸） |
| 輸出 | render.mjs 用 puppeteer-core 開 headless Chrome 逐格截圖，ffmpeg 合成 MP4 |
| 需要 | Node.js、Google Chrome、ffmpeg；README 建議有獨立顯示卡 |
| 內建角色 | Claude 吉祥物 Clawd，含 31 種表情、五個轉身角度、帽子與舞步 |
它跟一般「AI 生成影片」差在哪？每一格都是時間 t 的純函式，所以可以重現、可以改一行重算、可以進版本控制。線條的手繪抖動（boil）是每秒換 12 次亂數種子做出來的，不是隨機雜訊。
📏 461 行指南的核心規則是什麼？
ANIMATION_GUIDE.md 我用 wc -l 量過，剛好 461 行。它分成規則、動畫原則、工作流程、引擎 API、角色 API 和「常見失敗」清單。開頭就講清楚分工：使用者決定影片講什麼，指南決定怎麼做。
七條規則服務三個目標：看起來像手繪（Handmade）、一直有東西在動（Alive）、是一部完整的片而不是一堆片段（One piece）。我覺得最值得帶走的是下面三條，它們不只適用於動畫，也適用於任何讓 AI 做「看得到的成果」的任務。
先寫分鏡，而且要寫出「reads」
規則 7 要求寫任何場景程式之前，先寫 STORYBOARD.md。格式固定：一句話 logline、世界觀與色彩變化、重複出現的母題、角色情緒弧線，然後逐鏡列出時間。
重點在 reads：每個鏡頭裡，觀眾必須依序看懂哪些事，每件事從第幾秒到第幾秒。指南的說法是，你寫了程式所以知道發生什麼，觀眾只看一次、全速播放、第一次看。指南也直接點名，時間掌握是模型最常做錯的一條。
每個鏡頭只發生一件事
規則 3 寫「Every shot needs an event」：每個鏡頭的第一格和最後一格之間，一定要有東西改變。同時只有一個焦點動作，先有原因再有反應，反應要給時間。
搭配規則 2「不放文字」：不准有字幕、標籤、對話框。角色拿著寫「我迷路了」的牌子，指南直接判定這個鏡頭失敗，要畫出迷路的樣子。
每一步都看縮圖，用眼睛自審
工作流程第 3 步叫「Look at it」。指南開宗明義：讀程式碼看不出動作。render.mjs 提供三種檢查圖：
| 檢查圖 | 指令參數 | 用途 |
|---|---|---|
| contact sheet | --sheet=0.1,0.8,... | 看整支片的形狀，每個鏡頭的頭、中、尾 |
| strip | --strip=2.1:2.6 | 一個動作的每一格（跳躍、轉身、轉場） |
| crop | --crop=x,y,w,h | 全解析度看細節（臉、手、接觸點） |
🍁 實測：〈楓葉帽子〉怎麼做出來的？
我在 Claude Code 裡請模型照 ANIMATION_GUIDE.md 的流程做一支 9 秒原創短片。唯一的額外要求是不用 Clawd：Clawd 是 Anthropic 的吉祥物，對外的作品我改用自創的麻糬角色 Mochi。指南本身寫明「No design here is final」，換角色是它預期的用法。
分鏡
模型先交出分鏡，兩個鏡頭，每鏡一件事：
Logline: Mochi wants the falling maple leaf, but a gust steals it at the top
of the jump, so Mochi gives up — and the leaf comes back on its own and lands
on Mochi's head like a hat.
A 0.0–4.6 [iris in] EVENT: the leaf is snatched by a gust mid-jump
reads: 0.8–1.9 a red leaf zig-zags down; Mochi's eyes track it
1.9–2.2 Mochi crouches (anticipation)
2.2–2.75 Mochi jumps, reaching for the leaf
2.45–3.1 a gust whips the leaf off-screen right
2.8–3.6 Mochi lands, surprised → sad
B 4.6–9.0 [brush wipe] EVENT: the leaf drifts back and lands on Mochi's head
reads: 5.6–6.9 the leaf drifts back in; Mochi doesn't notice
6.9–7.3 the leaf lands on Mochi's head; surprise take
7.7–8.4 happy: bounce, blush, sparkles, warm glow
[iris out 8.4–9.0]
Checks: event in every shot ✓ · no text ✓ · transition at every seam ✓
ending rhymes with opening (leaf above the head → leaf on the head) ✓結尾呼應開場也是指南的規則：開場葉子在頭頂上方搆不到，結尾葉子停在頭上。色彩也跟著情緒走，失望時畫面轉灰，葉子落下後暖光回來。
第一輪縮圖：抓出三個問題
場景寫完先跑 contact sheet，不直接渲染：
這張看得出三個問題：角色在畫面裡太小、跳起來幾乎沒離地、葉子的形狀像星星不像楓葉。指南對角色大小有具體數字（中景時角色寬約 200 到 280 像素），這版明顯不夠。
第二輪：修完才渲染
修正後的 contact sheet：
角色放大、跳躍拉高，葉子改成有鋸齒的形狀。這一輪每個 read 從縮圖就看得懂，才進正式渲染。成品每秒抽一格：
整個場景檔 197 行。其中 Mochi 的身體、眼睛、嘴巴繪製函式約 40 行，表情切換沿用指南的做法：換表情的瞬間先瞇眼遮住切換，再做一個大小隨情緒調整的反應動作。
⏱️ 渲染要多久？沒有顯示卡行不行？
我在同一台 Windows 桌機（RTX 4070）量了三組：
| 項目 | 片長 / 格數 | 耗時 | 每格 |
|---|---|---|---|
| 官方 demo，GPU（ANGLE d3d11） | 11 秒 | 353 秒 | 約 1.3 秒 |
官方 demo，--soft-gl 軟體渲染 | 只跑 1 秒（24 格） | 392 秒 | 約 16 秒 |
| 〈楓葉帽子〉，GPU | 9 秒 / 216 格 | 327 秒 | 約 1.5 秒 |
實測遇到一個坑：兩個渲染同時跑會搶 WebGL context，噴出 CONTEXT_LOST 和 Error creating webgl context。一次只跑一個就正常。
🛠️ 怎麼自己跑一次？
需要 Node.js、Google Chrome、ffmpeg。我用的是 Node.js 24.11.1。
git clone https://github.com/JohnHeibel/ClaudeAnimationBase.git
cd ClaudeAnimationBase
npm install
node render.mjs --clip --out=out/video.mp4這會渲染內建的 11 秒 demo。想先看畫面不想等渲染，用 Chrome 開 studio.html 可以拖時間軸預覽。Chrome 不在預設路徑的話，加 --chrome=<path> 或設 CHROME_PATH。
要做自己的片，在 Claude Code 裡開這個資料夾，照 README 的格式下指令：
Read ANIMATION_GUIDE.md, then make a 9-second video of <你的角色> <想做的事>.模型會先寫 STORYBOARD.md。建議先看過分鏡再讓它動工，指南也寫明有人在場時要先給人看分鏡。之後每輪 contact sheet 都可以打開來看，問題用白話講就好，例如「角色太小」「跳不夠高」。
🎯 適合拿來做什麼？
| 用途 | 為什麼適合 |
|---|---|
| 頻道或課程的 5–15 秒片頭 | 畫風固定、可重現、沒有素材授權問題，換角色或換場景就是改程式 |
| 原創角色的小動畫、貼圖 | 角色是一組繪製函式，表情可以加，帽子、道具都能掛上去 |
| 教「AI 代理人怎麼工作」 | 分鏡、程式、縮圖自審都是實體檔案，一支片就把「規劃、做一點、看結果、修」演完一輪 |
| 練習寫給 AI 的規格 | 這份指南本身就是很好的範本：目標、規則、常見失敗清單、自審流程都有 |
- 要快速交片的商業影片：9 秒片 GPU 渲染要 5 分半，還要來回看縮圖修正。
- 沒有獨立顯示卡的機器：軟體渲染慢 12 倍，要嘛接受，要嘛請模型放棄水彩填色。
- 寫實或 3D 畫面：指南明文禁止 3D 投影，畫風就是扁平 2D 手繪。
- 直接拿 Clawd 對外發布：Clawd 是 Anthropic 的吉祥物。自己玩沒問題，要公開的作品請換成原創角色。
🔗 延伸資源
- JohnHeibel/ClaudeAnimationBase：模板本體，先讀
ANIMATION_GUIDE.md - JohnHeibel/PDoomVideo：MV 原始碼，可以看模型怎麼拆章節給子代理
- p5.brush：水彩與筆觸的繪圖函式庫
- animation-vocabulary skill 實測：想描述動作卻叫不出名字時，先查動畫術語再交給模型
--sheet，幾十秒就能看到 contact sheet，確認你的機器跑得動再寫自己的分鏡。
❓ 常見問題
ClaudeAnimationBase 一定要用 Claude 嗎？
不一定。README 寫「open it in Claude Code (or any coding agent)」，任何能讀檔、寫程式、跑指令的代理人都能用。作者的測試影片是 Opus 5.5 加 xhigh 推理強度做的。
沒有獨立顯示卡可以跑嗎？
可以，加 --soft-gl 用軟體渲染 WebGL。我實測每格約 16 秒，是 RTX 4070 的 12 倍左右。README 建議這種情況請模型不要用水彩填色。
可以把 Clawd 換成自己的角色嗎？
可以，指南寫明角色、表情、道具都只是起點。我把 Clawd 換成麻糬角色 Mochi，身體、眼睛、嘴巴的繪製函式約 40 行。
做出來的影片可以商用嗎？
模板是 MIT 授權，改作再發布要保留授權聲明。Clawd 是 Anthropic 的吉祥物，公開作品建議換成原創角色。