動畫風格
十種視覺風格，每一種都是一個真實的程式碼檔案，Claude 可以將其指向任何故事。這裡沒有呼叫任何影像或影片模型，因此同一個故事每次渲染的結果都相同，而且完全免費。
模板附帶一個完成的 22 秒範例：Claude 乘坐自製火箭飛向月球，每個節拍切換一種新風格。先執行一次看看每一種風格的動態，然後再替換成你自己的故事。
風格
| 檔案 | 風格 | 一句話描述外觀 |
|---|---|---|
pixel.js | 像素藝術 | 大約以 120 像素寬度繪製並無平滑縮放。小調色盤、遞色天空、遊戲 HUD |
ps2.js | PS2 風格 | 少量多邊形、模糊的小紋理、霧氣、拉伸的低解析度畫面、任務 HUD |
comic.js | 漫畫藝術 | 粗墨線、平塗色塊、Ben-Day 網點、動作線、對話框、一個大大的 BOOM |
brick.js | 樂高風格 | 所有物體都是由帶有凸點的塑膠積木構成，在柔和陽光下 |
clay.js | 黏土動畫 | 帶有指紋印的柔軟形狀、柔和光線、每秒 12 幀 |
paper.js | 紙剪影 | 多層切割卡片紙，帶有微小陰影、紙纖維紋理、每秒 8 幀 |
anime.js | 復古動畫 | 80 年代賽璐珞風格：漸層天空、大太陽盤、速度線、打擊時的負片效果、影片顆粒感 |
poly.js | 低多邊形 3D | 平面與硬光，沒有圓潤的物體 |
riso.js | Risograph | 兩種油墨印在米白色紙上，各自帶有網點，稍微套印不準 |
mini.js | 微縮立體模型 | 桌上的微型手工場景，使用紙板和棉花，移軸模糊效果 |
styles.md 檔案內有每種風格的規則：是什麼讓它被認為是那種風格、針對不同主題要改變什麼、以及什麼會破壞它。在為某個風格編寫場景之前，請先閱讀該風格的說明。
步驟
- 取得簡報。 了解故事或應用程式是什麼、影片方向是直式（Reels、TikTok）還是橫式（X、YouTube），以及需要哪些風格？如果沒有偏好，就選擇 3 到 5 個適合故事節拍的風格，或者全部 10 種風格來炫耀一下。整支影片只用一種風格也可以。
- 使用
copywriter.md編寫故事。 一個節點一行。向用戶顯示帶有風格標註的每行文字，並等待用戶同意。 - 複製模板：
cp -r ~/.claude/skills/claude-animation-styles/template ~/my-video && cd ~/my-video && npm i。在修改任何內容之前先確認它能執行：node render.cjs stills 2,6,12並打開圖片。這些圖片顯示的是範例故事，所以在開始處理你的故事之前，請先刪除stills/資料夾。 - 撰寫 story.json。
format是vertical或wide。每個節點都有一個style（檔案名稱）、seconds和它的line。同一個風格可以在多個節點使用，每個節點都會得到自己的場景（見下文）。 - 改寫你正在使用的每個風格檔案中的場景。 保留視覺風格，替換主題角色。請參閱「更改主題角色」一節。
- 在每個風格之後檢查靜態畫面：
node render.cjs stills 1,3.5,6。這些數字是進入整個影片的秒數，而不是進入該節點的秒數，並且它會列印每張圖片的檔案名稱。打開每一張。在沒有聲音的情況下，主題角色是否易於辨識？它看起來像是該風格的東西嗎？是否有任何部分被畫面邊框切掉？ - 如果用戶需要，加入語音旁白：
ELEVENLABS_API_KEY=... python3 voice.py [voice_id]。它會讀取台詞，寫入voice.mp3並重新調整 story.json 中節點的時間以匹配。沒有 API 金鑰就沒有語音，所以請手動設定秒數並加入音樂。 - 渲染：
node render.cjs video --audio voice.mp3，或者如果沒有聲音則使用node render.cjs video。它會輸出out/video.mp4。一段 20 秒的影片需要幾分鐘。 - 在交付前檢查完整影片：
ffmpeg -i out/video.mp4 -vf "fps=1,scale=240:-1,tile=8x4" -frames:v 1 out/sheet.jpg（每秒一張圖片，因此末尾出現空白格子是正常的）。你無法聽到聲音，所以請告知用戶檢查音效。
若要將音樂放在語音下方，音樂比語音低 14 dB：
ffmpeg -i voice.mp3 -i music.mp3 -filter_complex "[1]volume=0.2[m];[0][m]amix=inputs=2:duration=first:normalize=0" audio.wav
使用 -af ebur128 測量兩者並調整音量，因為不同音軌的響度差異很大。
更改主題角色
每個風格檔案都有一個 create 函式用於建立世界一次，以及一個 render(t, ctx, dur) 函式用於繪製任何時刻，其中 t 是進入該節點的秒數，dur 是該節點的長度。它只關注 t，因此任何幀都可以按任意順序繪製。
同一個風格使用兩次。 create 會收到 index（該節點在 story.json 中的位置）、line 和 beat。儲存 this.index = index 並為每個節點繪製不同的場景。不要為此測試 start，因為它會在時間改變時變化。
2D 風格（像素、漫畫、紙、動畫、Risograph）。 主題角色透過一個小型繪圖器繪製：paint.fill(path, key) 和 paint.lines(segments, width, key)，每個風格決定這些函式的作用。在漫畫風格中，它們會加入墨線。在紙風格中，它們會加入陰影。在 Risograph 風格中，它們會疊加油墨密度。lib/common.js 包含了範例主題角色，drawClaude 和 drawRocket。以同樣的方式編寫 drawCat、drawPhone 或 drawFounder，在每個風格中使用相同的部位名稱，它就會自動套用每種視覺效果。新增的部位名稱（如 fur、apron）必須加入到該風格的調色盤中，在漫畫、紙和動畫風格中為 PAL，在 Risograph 風格中為 toneA 和 toneB，否則它會用錯誤的顏色繪製且不會報錯。像素藝術風格則是自己繪製精靈圖，所以需要手動編寫。
3D 風格（PS2、樂高、黏土、低多邊形、微縮）。 lib/three-claude.js 使用簡單的形狀構建主題角色，並透過 kit 決定多邊形數量和材質。以相同方式構建你的主題角色：makeCat(kit)。樂高風格是個例外，因為所有東西都必須用積木構建，所以請複製它的 add 輔助函式。
在所有風格中保持主題角色一致。 相同的輪廓、相同的兩三種顏色。這才能讓風格的轉換讀起來像是同一個故事，而不是一段新的片段。一個簡單易辨識的形狀勝過一個細節豐富的角色。
讓這些影片成功的關鍵
- 在硬切接時改變風格。 直接切換到下一個視覺效果。這種驚喜感本身就是一種轉場。
- 中間有一個大的物體在移動。 人們需要在不到一秒鐘內理解每個節點，通常是在關掉聲音的手機上觀看。
- 每個節點持續 1.5 到 3 秒。 時間長到足以看清風格，短到讓他們想看下一個。
- 讓故事在切接時持續推進。 如果火箭在一個節點結束時正在爬升，那麼在下一個節點開始時它應該仍在爬升。
- 文字屬於該風格。 遊戲風格中使用 HUD，漫畫風格中使用對話框。不要在影片上方疊加字幕。
如果出了問題
- 缺少 Puppeteer 或 Three.js： 在包含
render.cjs的資料夾中執行npm i。 - 缺少 ffmpeg： 在 Mac 上執行
brew install ffmpeg。靜態畫面在沒有它的情況下也能運作，但影片需要它。 - 3D 幀全黑或渲染極慢： 在 Mac 上渲染會使用 GPU，在其他地方則使用軟體渲染器（
render.cjs中的gl行）。軟體渲染可以運作但需要更長的時間。 - 標題使用了錯誤的字型： 頁面會從 Google Fonts 載入 Inter Tight 和 Bangers 字型，因此在渲染期間需要網路連線。
- 漫畫風格中的某個單字出現延遲： 倒數計時在有語音時會從
voice.json讀取單字時間。請修改comic.js中它要尋找的單字。
保持原創
複製這些視覺效果，並創建你自己的主題角色。不要在畫面上使用任何品牌的標誌、遊戲的角色或真實公司的佈景，也不要逐鏡頭複製其他創作者的作品。