Vox 風格動畫
你將製作具有編輯拼貼風格的短篇解說影片：紙張背景、帶邊框與陰影的色調相片卡、黃色螢光筆標註關鍵字、紅筆圓圈與箭頭、地圖與圖釘、格數運動（on twos）的拼貼動畫，以及物理剪裁效果，並配有設計好的音效。工具包位於 kit/，渲染器位於 scripts/，工藝規則位於 references/。
超越一切規則的規則：畫面必須支撐論點。 用裝飾掩蓋薄弱的論點，仍然是薄弱的影片。第二條規則：它看起來必須是故意用手工製作的。 工具包中的每個預設值都會添加微小的物理不完美，或移除數位世界的完美。
開始建構前：請閱讀以下文件
references/LOOK_BOOK.md：什麼讓它看起來專業，包含量化的數字和 18 個業餘跡象。一定要讀。references/SCRIPT.md：問題 → 資料搜集 → 腳本 → 鏡頭列表。寫腳本或配時間時閱讀。references/API.md：工具包的每個呼叫方法。撰寫頁面前閱讀。references/TIPS.md：來自已完成影片的訣竅（畫面、節奏、音效、真實性、呈現方式），以及一個 10–12 秒的拆解鏡頭。撰寫短鉤子或拆解內容前閱讀。references/SOUND.md（錄製的 Foley 音效、紀錄片混音、旁白）、references/ASSETS.md（授權！）、references/QA.md（視需要閱讀）。
工作流程
- 問題與腳本。 一個可以回答、令人驚訝且「有畫面可呈現」的問題。鉤子 → 背景 → 轉折 → 證據 → 收穫（一個 10 秒的拆解：主張 → 「其實不然」 → 數據 → 讓步 → 收穫，詳見 SCRIPT.md §7）。創作者說話時約每分鐘 215 字；紀錄片旁白約每分鐘 150–165 字，每行需有語氣指示。每個事實都必須引用來源並記錄在
SOURCES.md中，絕不捏造數字、引言或文件；若數據無法支持，則刪除該主張。 - 先搜集資料。 在完成腳本之前，先找到圖片和真實影片素材：NASA、美國國會圖書館、史密森尼開放取用、維基媒體、Pexels（檢查每個授權；為每個剪輯製作連絡表，檢查是否有浮水印和燒錄文字）。卡片內的影片素材給人紀錄片的感覺；只有靜態圖片則像投影片。記錄檔案名稱、網址、授權和出處。絕不提交 Texturelabs 的檔案或商業字型。不允許使用 Vox 標誌或素材。絕不讓模型猜測圖片（
--query noimg能顯示這樣做有多廉價）。 - 鏡頭列表。 每個口語短語一行，時間來自逐字稿：
python3 $SKILL/scripts/words.py vo.wav --inject <page>，然後在頁面中使用const w = V.wordmap("#words")，並在混音中使用相同的字詞，這樣重新錄製旁白時會自動重新對齊所有時間。每行只安排一個主要動作。為整個影片選擇一個重複出現的視覺概念。在每個場景轉換處命名剪接方式（硬切、curveCut、zoomCut、holePush、whip、paperWipe；絕不使用溶解效果）。 - 建構。 請在此技能的文件夾內工作（即包含此 SKILL.md 的文件夾，稱之為
$SKILL，通常是~/.claude/skills/vox-style-animation）。執行cd $SKILL && npm run new -- <name>；它會建立videos/<name>/index.html並設定好所有路徑。如果專案在其他位置，請執行node $SKILL/scripts/new.mjs <name> --dir <folder>。不要手動複製頁面：../../kit路徑僅在技能文件夾下兩層才能正確運作。將圖片放在videos/<name>/assets/中，並在該目錄的SOURCES.md中記錄。除非有特殊原因，否則保持預設值：- 使用紙張背景，而非白色；色調相片；卡片旋轉 ±1.5–3°，帶 4% 邊框和柔和陰影；
onTwos: true（12 fps 的拼貼運動）；紙張保持靜止（drift: 0），但物件必須有呼吸感：對每個處於靜止狀態的相片使用breathe()，卡片和剪裁物使用float()2–3 像素，一兩個scrap()掠過鏡頭，在真實文件後方使用ghost()（LOOK_BOOK §10）；- 主張在第 1 幀就可見；在卡片內使用真實剪輯素材搭配
footage()； - 推進速度：停留在原地時 +1–3 %/s，強調時 +4–6 %/s；
- 註解對應到其文字；使用三種旁白語調；1–3 個重點，每個重點只做一件事；
- 在 9:16 比例下，頂部 12% 和底部 20% 的區域不要放置重要內容（平台的介面會遮蓋）。
examples/apollo/index.html展示了幾乎所有的輔助功能。如需地圖，使用node $SKILL/scripts/map.mjs …。如需預處理靜態圖片或剪輯，使用python3 $SKILL/scripts/photo_treat.py。
- 先檢查靜態畫面。 在每個場景轉換和註解處執行
node $SKILL/scripts/render.mjs videos/<name>/index.html --stills t1,t2,…。打開 PNG 檔案仔細查看。 逐條檢查references/QA.md並修正所有問題。如果渲染因頁面錯誤而停止，錯誤訊息會指出遺失的輔助功能名稱和目標。 - 渲染。 對於草稿，使用
node $SKILL/scripts/render.mjs videos/<name>/index.html --voice vo.wav [--music bed.mp3] --gif，它會混合工具包合成的音效提示（音樂 -22 dB 並做閃避處理、環境音、-14 LUFS）。對於最終版本，請使用錄製的 Foley 音效： 先以--no-sfx參數渲染，然後執行python3 $SKILL/scripts/doc_mix.py silent.mp4 --cues cues.json --words <page> --voice vo.wav --music … --room $SKILL/kit/sfx/cc0/room_tone_office.mp3 --out final.mp4 --stems（旁白作為參考，每個音效樣本以其峰值為準，並在該字詞處對齊峰值；詳見 SOUND.md）。絕不單獨對效果進行後製。如果影片將在 4K 解析度下播放，請使用--scale 2參數渲染（原生 3840×2160 主檔案）。 - 最終檢查。 從 MP4 檔案中擷取場景轉換處的幀畫面。使用
ffmpeg -i out.mp4 -af ebur128 -f null -確認音量。然後報告你製作了什麼，以及其來源和授權。
設定（每台機器一次）
npm install # gsap, playwright, d3-geo, topojson-client, world-atlas
npx playwright install chromium # 渲染器使用的瀏覽器
# 選擇性安裝，用於重新產生紋理和音效：pip install numpy scipy pillow
# 選擇性安裝，用於 words.py 和 doc_mix.py：pip install faster-whisper numpy
# 選擇性安裝，用於 narration.py 的保留音調加速功能：需安裝包含 rubberband 的 ffmpeg（macOS：brew install ffmpeg-full）
你需要在 PATH 環境變數中安裝 Node 18+ 和 ffmpeg 4.4+。工具包是純瀏覽器 JavaScript；無需建置步驟。如需瀏覽器預覽，請執行 npm run preview，讓它持續運行，然後打開 http://localhost:8080/videos/<name>/。
不可妥協的事項
- 只使用有來源的真實事實。打字的「事實清單」卡片可以接受。但偽造的書信、收據或標題並將其呈現為真實的，絕不允許。
- 每張圖片的授權都必須清楚。借用素材需在畫面上顯示來源標示（例如「資料來源 · NASA」），或在平台禁止螢幕標示的情況下於字幕中致謝。
- 不要使用 Vox 標誌或素材。「Vox 風格」描述的是視覺風格；標誌則暗示了背書。如果使用者希望將「Vox」字樣作為風格提示（許多 Vox 風格影片確實如此），請使用內含的免費襯線字體，並在畫面上某處保留「Vox-style」標籤，同時告知使用者商標風險；最終由他們自行決定。
- 在地圖上檢查有爭議的邊界。
- 避免在 AI 生成的圖片中放入文字；所有文字請在頁面中新增。
- 印度地圖（及其他爭議地區）：Natural Earth 的邊界是事實上的邊界，並非官方邊界。發布前請參閱 ASSETS.md。
與 Vox Media 無任何隸屬、背書或關聯關係。「Vox」是 Vox Media, LLC 的商標。
當使用者的影片「看起來廉價」時
截取靜止畫面，並逐一比對 LOOK_BOOK.md 中的 18 個業餘跡象。依影響程度排序的常見修正方法：
- 紙張背景和相片色調。
- 使用格數運動（on twos），且一次只移動一個物件。
- 註解對應到所述文字。
- 卡片旋轉、邊框和陰影。
- 物件在進入和離開畫面之間完全靜止：加入
breathe、float或scrap。 - 音效：在關鍵動作上使用錄製的 Foley 音效，對齊峰值，置於人聲之下；音樂比人聲低 18–24 dB。
- 用剪接取代溶解轉場。