Pixel Crew Reel
要模仿的範例是 projects/ai-delivery-team（請閱讀 docs/REFERENCE-BREAKDOWN.md 了解其運作原理）。請閱讀 CLAUDE.md 取得專案地圖以及曾經困住我們的規則。
1 · 先寫腳本 (script.json)
適用的結構：鉤子 (≤5 秒) → N 個相同的節拍 (~每個 3.5 秒) → 回報 → 關鍵字行動呼籲。
- 鉤子：一個令人驚訝的數字加上整個系統濃縮在一個畫面中（「7 個員工，沒有一個是人類」）。
- 每個節拍：「角色 做 a、b 和 c。」——三個可以製成動畫的具體名詞。
- 回報：人類唯一的工作（核准、決定、審查）。
- 行動呼籲：「留言 關鍵字，我會寄給你……」(關鍵字在
brand.keyword中)。 - 將
lines寫成 2-4 個字的短語；每一行變成一個字幕。 - 目標總長度為 30-45 秒；語速 1.3–1.4 可使 Kokoro 維持在每秒約 3.5 字。
- 如果不知道使用者的品牌名稱/核准者姓名/關鍵字，請詢問；否則保留
@你的代稱佔位符並告知使用者。
2 · 建立專案骨架
node scripts/new.mjs reel <名稱>
python3 scripts/voice.py projects/<名稱> # 先處理時間，再依時間設計
3 · 場景 (index.html + style.css + scenes.js)
- 每個腳本場景對應一個
<section class="scene">，順序相同（R.cuts()會將其對應到TIMING.scenes）。 - 每個員工場景：
.head搭配.step[data-step][data-label]+.title（尺寸要能容納在 ≤ 980 px 內），然後是一個或兩個執行工作的.card。 - 每個場景都要有自己專屬的強調色（
--accent: var(--rN)）並交替使用背景（is-paper、is-peri、is-lav、is-cobalt）。 - 將每個口語化的名詞製作成動畫：
R.pop(el, R.word(scene, line, "名詞"))、R.tick、R.type、R.grow、R.slam（用於印章效果）。 - 使用
data-icon、data-bot、data-burst、data-face、data-presenter佔位符；Sprites.hydrate()會填入它們。 - 最後以
R.captions(...)和R.register()結尾；保留內嵌的window.__timelines["main"]這行程式碼。
4 · 檢查，然後渲染
node scripts/build.mjs projects/<名稱> --no-voice --no-render --snap <每個場景一個時間點>
# 檢視 projects/<名稱>/build/snaps/contact-sheet*.jpg，修正問題，然後重複
node scripts/hf.mjs lint projects/<名稱>
node scripts/build.mjs projects/<名稱> --no-voice # → renders/<名稱>.mp4
驗證 MP4 本身：ffmpeg -i renders/<名稱>.mp4 -vf fps=1,scale=180:-1,tile=8x5 sheet.jpg
以及 -af ebur128（目標 ≈ -14 LUFS）。檢查是否有：空白的第一幀、文字碰到邊緣、元素低於 Instagram 的 UI、字幕不同步。
替換選項
- 語音：
script.json → voice.voice（am_michael、am_puck、am_fenrir、af_heart、bf_emma……）或自行錄製到build/voice.wav並執行voice.py --from-wav。 - 音樂：將音軌放入
build/music-override.wav。 - 主持人：擁有者的漫畫形象（
kit/brand.js、kit/avatars/）會由[data-presenter]和[data-face]自動使用；使用.is-img將主機圖片按寬度縮放，它只顯示腰部以上。除非被要求，否則不要畫出不同的角色。