Communitygithub.com

kbohara315/what-if-animation

根據一個主題句(例如「如果你能倒轉 10 秒會怎樣?」),製作一部「What If」風格、黃昏光線下的線條人動畫短片。使用 Remotion 與 SVG 逐格生成畫面,並整合 ElevenLabs 語音與音效。

what-if-animation 是什麼?

這個技能可以從一個簡單的「What If」主題句開始,自動化產出一支 15-25 秒的動畫短片。它會先按照七拍公式撰寫劇本,再用 ElevenLabs 生成語音與音效,接著規劃鏡頭清單、繪製分鏡圖並進行自我檢查,最後使用 Remotion 與 SVG 逐格生成動畫並完成混音與母帶處理。支援原始角色與場景,並內建兩個完整範例(rewind 與 copy-paste)供參考。適合用於製作 What If 風格的解說動畫,或是簡單的線條人動畫。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add kbohara315/claude-what-if-studio

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

What If 動畫

輸入一個主題句,輸出完成的 15-25 秒短片。每一幀都是 Claude 編寫的 SVG(由 Remotion 渲染);語音與音效來自 ElevenLabs。studio/src/episodes/ 中附帶兩個範例,可直接渲染:rewind(「如果你能倒轉 10 秒會怎樣?」的測試片段:以倒放鏡頭展示能力)和 copy-paste(「如果你能複製貼上任何東西會怎樣?」:技能首次完整執行,包含新廚房場景、科學步驟示意圖以及懸疑斷電結局)。開始前,請先閱讀與你的主題最接近的範例。

檔案內容
references/formula.md七拍 What If 公式、15-25 秒結構、劇本規則、選擇主題
references/look.md指定的視覺風格、節奏、鏡頭詞彙,以及分鏡與動作檢查清單
references/kit.md建構模組:引擎、角色、場景、房間套件、燈光、UI、外觀,以及如何新增
references/sound.md編寫音效事件、提示詞、音量、成本
references/traps.md兩個範例製作過程中所遇到的所有問題記錄
studio/Remotion 專案:複製一次,然後每個劇集都在其中製作
scripts/voice、plan、stills、board、sfx、mixcheck、motiongrid、master(需要 Python 3.9+ 與 Node)

規則

  • 僅使用原創角色。 Pip(英雄,外觀 B)和 Mo(他的朋友)是我們的角色,還有姐妹、媽媽以及角色骨架上的套裝。絕對不能使用頻道自己的主角,也不能使用任何相似的知名卡通角色:每次新增外觀都要在角色表上檢查(Mo 的第一頂帽子因與某知名角色相似而被棄用)。
  • 原創故事。 公式是共用的,但劇集必須是原創的。不要重製任何頻道的標題。
  • 永遠不要聲稱這些爆紅頻道是用 Claude 或其他工具製作的。 沒有人知道他們是如何製作的。
  • 僅使用環境變數名稱。 ELEVENLABS_API_KEY,從環境變數或 studio 上層的 .env 檔案讀取。絕不列印、貼上或硬編碼任何 API 金鑰。
  • 回報每次執行的 ElevenLabs 點數: 腳本會將它們記錄在 out/<slug>/costs.json,而 master.py 會將總和寫入 report.json。語音成本從帳戶歷史記錄中讀取(精確);音效片段不會顯示在那裡,因此其成本來自帳戶計數器,該計數器可能會有延遲:在回報前重新讀取一次。交付劇集時要說出數字。copy-paste 執行花費 152 點數(語音 78 點,12 個新音效片段 74 點)。
  • 先做分鏡再動畫。 在靜態畫面通過自我檢查(步驟 5)並且(如果有人在流程中)他們看過分鏡前,不能開始渲染影片。
  • 每個數字都必須真實。 劇本中的數字必須先在劇集的 science 欄位中計算並註明出處。

初始設定(每台機器一次)

需要 Node 18+、PATH 中的 ffmpeg 和 ffprobe、Python 3.9+ 以及 numpy 和 Pillow,還有 ElevenLabs 金鑰。

cp -r <skill>/studio ./what-if-studio && cd what-if-studio && npm install

以下所有操作都在該 studio 資料夾中執行;<skill> 是此技能的資料夾路徑。如需離線工作或使用自己的品牌字型,請將顯示字型放入 public/fonts/,並在 src/studio.config.ts 中設定 titleFont(預設標題字型 Bricolage Grotesque 和 UI 字型會在渲染時從 Google Fonts 載入)。若要將現有 studio 更新到較新的引擎,請將 <skill>/studio/src/engine 複製取代原有的 src/engine。

工作流程

請依序完成以下步驟。每個步驟結束時,你都會產出一個可供下一個步驟檢查的成果。

1. 劇本

閱讀 references/formula.md。先搜尋 YouTube 確認前提:如果某個 What If 頻道已經有完全相同的劇集,請更改能力或規則。從主題句出發,決定能力的名稱、規則、三個逐步升級的示範,以及轉折點(一個附帶數字的事實)。編寫 src/episodes/<slug>/episode.json,內容包含 id(PascalCase,即合成名稱)、slug、topic、title(兩行)、script(每個節拍一個條目)和 science(每個事實:主張、計算過程、來源)。45 到 65 個字。用正常的語速大聲朗讀一遍:每一行都必須能轉化為畫面。

2. 語音

python <skill>/scripts/voice.py <slug>

使用 ElevenLabs 錄製一次包含字元時間戳的語音(356 個字元的 copy-paste 錄製花費 78 點數),然後將停頓修剪至該風格的節奏:public/<slug>/voice.wav 和 src/episodes/<slug>/words.json。檢查長度(15-25 秒)以及它列印出的單字時間點。使用 episode.json 中的 gaps 調整停頓並重新執行:錄音會被快取,因此重新調整是免費的。更改任何單字則會再次呼叫 API。

3. 鏡頭清單

為劇本中的每個畫面設計一個鏡頭(通常 9 到 14 個),每次切換時變換尺寸和角度(全景、插入、中景、特寫、越肩、俯拍、仰拍;請參閱 references/look.md)。將以下內容添加到 episode.json:

  • shots:{ "id": "S1", "size": "medium", "set": "kitchen", "key": 14, "note": "what we see" }(key 是分鏡顯示的該鏡頭自身時鐘的影格)
  • edit:{ "shot": "S1", "at": "cookie" },每個剪輯點一個,以它落下的單字為提示(plan.py 會列出提示形式;reverse、from、to 和 look 用於那些會扭曲鏡頭時鐘的能力)
  • fx:單影格閃爍和晃動,{ "at": "S3+2", "kind": "flash" }
python <skill>/scripts/plan.py <slug>

它會寫入 timeline.json 和 out/<slug>/shotlist.md,並列印節奏。目標是開場每分鐘 27+ 次剪輯,且任何靜態鏡頭不超過約 3 秒;在開始繪製前修復它標記的問題。

4. 分鏡

閱讀 references/kit.md 以了解建構模組。編寫 src/episodes/<slug>/shots.tsx,每個鏡頭一個元件,每個元件都是其時鐘 t 的純函數(複製兩個範例 shots.tsx 中的模式),以及 index.tsx(劇集及其能力外觀),然後將劇集添加到 src/episodes/index.ts。在此步驟中,每個鏡頭只需在其 key 影格處正確即可。當主題需要圖書館中沒有的場景時,使用房間套件構建它,並將其添加到 src/engine/sets/(以及此技能的副本)中,以便下一個劇集可以使用,就像 copy-paste 執行時添加廚房和示意圖一樣。新的角色或服裝:添加外觀,然後在角色表上檢查(npx remotion still src/index.ts Cast out/cast.png)。

npx tsc --noEmit
node <skill>/scripts/stills.mjs <slug>
python <skill>/scripts/board.py <slug>

out/<slug>/storyboard.jpg:每個鏡頭一張帶說明的靜態畫面。

5. 自我檢查靜態畫面

查看分鏡,然後以全尺寸開啟 out/<slug>/board/ 中的每個靜態畫面,並根據 references/look.md 中的分鏡檢查清單,逐個鏡頭誠實地檢查。記下失敗的部分,修復它,僅重新渲染那些鏡頭(stills.mjs <slug> S3 S7),重建分鏡表並再次檢查。重複直到通過。在設計修復方案之前,請先查看 references/traps.md 中是否有你遇到的問題。如果有人在流程中,請在開始動畫之前向他們展示分鏡並記錄他們的意見。

6. 動畫

從關鍵姿勢開始為每個鏡頭注入生命力:使用 poseAt 關鍵幀設定預備動作、停頓和過衝,使用 faceAt 設定表情,使用 kf 設定鏡頭移動,能力的外觀,以及 fx。然後渲染一個草稿並檢查動作:

python <skill>/scripts/master.py <slug>
python <skill>/scripts/motiongrid.py <slug> S2 S5
node <skill>/scripts/stills.mjs <slug> --frames 120 240

像翻頁書一樣,根據 references/look.md 中的動作檢查清單閱讀網格中的畫面;修復並重新渲染直到動作流暢。

7. 音效

閱讀 references/sound.md。將 sound 添加到 episode.json:音效片段(提示詞和長度)、每個與特定鏡頭對應的可見動作事件、每個位置的環境音、背景音樂以及音量級別。先檢查圖書館中已有的音效,然後生成:

python <skill>/scripts/sfx.py <slug> --dry
python <skill>/scripts/sfx.py <slug>

它會列印所使用的點數,並在 timeline.json 中設定音軌音量。然後檢查每個單字是否清晰可辨:

python <skill>/scripts/mixcheck.py <slug>

它會列出在語音播放期間,音效或音樂聲音與語音相差 3 dB 以內的時刻。用來說明單字的音效應落在該單字之後的停頓處,絕不能與之重疊;背景音(嗡嗡聲、持續音)在關鍵台詞下應降低音量;如果大部分音軌壓過語音,請降低 sfx_lu。重新執行 sfx.py 並檢查,直到只剩下故意的重疊(例如標題轟鳴、轉折點)。

8. 母帶處理與交付

python <skill>/scripts/master.py <slug>

渲染影片,將混音調整至 -14 LUFS,峰值低於 -1 dBTP,並寫入 out/<slug>/report.json(長度、響度、節奏、點數)。完整觀看最終檔案一次(含聲音)。交付 out/<slug>/<slug>-final.mp4 和 out/<slug>/storyboard.jpg,並附上長度、所使用的 ElevenLabs 點數,以及你認為仍可改進的部分。

劇集檔案結構

路徑內容
src/episodes/<slug>/episode.json你編寫的所有內容:劇本、科學、鏡頭、剪輯、特效、音效
src/episodes/<slug>/shots.tsx、index.tsx繪圖:每個鏡頭一個元件、能力的外觀
src/episodes/<slug>/words.json、timeline.json由 voice.py 和 plan.py 寫入(sfx.py 添加音量)
public/<slug>/voice.wav、sfx.wav、music.wav
out/<slug>/分鏡靜態畫面、storyboard.jpg、shotlist.md、動作網格、渲染影片、costs.json、report.json
library/sfx/所有已生成的音效片段,供所有劇集共用

相關技能