Continuum Walkthrough
標竿是 examples/po-desk/walkthrough.html（PO Desk Walkthrough v4.1，10/10）。Jason 說：「我喜歡動畫、音效等等，還有那種連續性的機制。」每個新作品都必須超越它。在開始寫任何新內容之前，先開啟標竿並複製它的運鏡方式。
流程（≈ 3–4 小時的代理時間；渲染約 1 小時，可脫離執行）
| # | 步驟 | 工具 | 關卡 |
|---|---|---|---|
| 1 | 需求問答：使用問題工具（每次 4 個問題，推薦選項優先）詢問 references/intake-qa.md 中的每個問題 | AskUserQuestion | 答案未到齊前不得開始建構 |
| 2 | 節拍表 + 腳本：為此提案填寫 references/beat-sheet.md；每個節拍一句口白，口語化風格 | 寫入 script.json | 用戶批准節拍表 |
| 3 | 語音：每句台詞錄製 2 次 | scripts/vo_gen.mjs | 免費方案額度足夠（見「語音」章節） |
| 4 | 驗證 + 字詞時間 | scripts/vo_verify.sh (whisper.cpp) | 每個選定的錄音必須與其台詞逐字匹配 |
| 5 | 畫面：複製 engine/starter.html，然後逐場景建構；將每個 T.* 鍵置於命名該詞的單字起始點 | engine/engine.js | 每個節拍的靜止畫面在兩種尺寸下都看起來正確 |
| 6 | 音效：為每個可見事件寫一個提示表（參見 references/sound-map.md） | scripts/mix.py cues.json | −14 LUFS，−1 dBFS，語音線不重疊 |
| 7 | 關卡 | 對 v 和 h 執行 scripts/ghost_audit.mjs | PASS。FAIL 會阻止渲染 |
| 8 | 渲染，脫離執行 | nohup zsh scripts/render.sh … & disown | 兩種格式的幀數皆須等於 LEN × 60 |
| 9 | 交付 | 4 個 MP4：9×16 和 16×9，每種各有「語音+音樂」與「語音+音效」版本 | 聯絡表（每 2 秒一張靜止畫面）需人工檢查 |
| 10 | 評分：要求 /10 評分，記錄下來，並將每個意見轉換為一列記錄和一項關卡 | references/lessons.md | — |
環境設定：node 20+、ffmpeg、python3 附 numpy、npm i playwright-core（或設定 PW_DIR）、Chrome（可選 CHROME=…）、whisper-cli + ggml-small.en-q5_1.bin。
故事結構（不得重新排序）
- 鉤子（0–5 秒）：以寄件者真實的大頭照和姓名，在一個逼真的 iMessage 上開啟一段個人化、隨意的開場白：「嘿，這有點突然……但我注意到你生意上可能有個有趣的地方。」此時尚無標誌或推銷。
- 物件到來（5–10 秒）：一堆逼真的通知。其中一個（真正的文件）蛻變成一張完整、可信的頁面：信頭、採購單號、表格、總計、簽名。
- 展示痛點（10–18 秒）：一個名叫「Maria」的人將它重新輸入到每個目的地：ERP（真實標誌）、CRM（真實標誌）、資料夾、電子郵件。她的時鐘在跑，鍵盤在響。每個目的地的名稱都在旁白中被唸出來。
- 估算痛點成本（18–26 秒）：費率 × 工時 × 工作日，用一個紅色計數器跳動到每年的成本。計算方式以小字持續顯示在畫面上。把錢說出來。
- 轉折（26 秒）：「當這些都為你處理好時，看起來就是這樣。」同一個物件回到畫面中央。連續性是關鍵。
- 解決方案（28–42 秒）：掃描器讀取文件，欄位飛入一張卡片，勾選框被打勾，一個例外被標記並解釋（「是平常的 10 倍」），然後點一下修正，再點一下核准。
- 證明（42–51 秒）：文件分別歸檔到所有 4 個位置，附帶真實標誌和勾選標記，接著是一張附有時間戳的收據（「1 分 44 秒，從郵件到歸檔」）。
- 行動呼籲（51–53 秒）：柔和且低壓：「值得一看？回覆就好。」
- 標誌獨現（53.8–58 秒）：字標獨自在空蕩的舞台上，淡出。畫面上沒有其他東西。
連續性規則（這就是視覺風格）
- 一個持續存在的物件（文件）使用
track()spring 動畫在不同佈局之間移動。它從未被切掉並重新建立。 - 每個場景都從前一個場景誕生：一條通知變成頁面，頁面縮小到旁邊，視窗堆疊起來，頁面又回來。
- 退場的元素應將透明度設為 0 並設為
visibility:hidden。 永遠不要將已完成元素以 20–50% 的透明度停在那當作「背景」。那個幽靈讓 v4 損失了它的輪廓（「從 0:18 開始，整個時間都有一個剪影被顯示出來」）。ghost_audit.mjs現在會將任何半透明顯示超過 3 秒的元素標記為失敗。 - 僅使用 Spring 動畫：
step()配合 z 值 0.88–1.0 且無反彈。進入/退出時使用模糊進/模糊出，60 fps 搭配 8 個子幀、180° 快門。 - 螢幕上：一次一個想法，大字型，無邊框 iOS 卡片，暖白
#F4F2EE，墨黑#0E0E0E，每個意義一個強調色（紅色 = 成本/問題，綠色 = 完成）。 - 佈局分別為
v（1080×1920）和h（1920×1080）設計。先設計 9:16 版本；手機是主要螢幕。
真實性檢查清單
- iMessage：真實的鎖定畫面語法（時間、日期、堆疊通知、「現在」/「2 分鐘前」），寄件者大頭照 + 姓名，三音提示聲。
- 文件：信件尺寸比例，真實欄位名稱，合理且加總正確的數字，簽名，頁尾。
- 標誌：真實 SVG（simple-icons，精確的品牌色碼）。只顯示潛在客戶實際使用或你真正整合的工具。 一個標誌意味著一項整合。
- 資料是虛構的，並標示為「範例資料 · 虛構公司」。金錢計算需顯示其公式。
語音：先詢問，再建構
務必先詢問他們想要的語音（需求問題 7），並提供以下選項。推薦 ElevenLabs，並告知是免費的：每月 10,000 免費額度。
| 選項 | 成本 | 聽起來 | 如何進行 |
|---|---|---|---|
| ElevenLabs（推薦） | 免費：每月 10,000 額度 ≈ 5 支影片 | 最像真人 | scripts/vo_gen.mjs 搭配他們的 API 金鑰（elevenlabs.io → Profile → API Keys） |
| 他們自己的聲音，錄製 | 免費 | 最個人化 | 他們用手機錄製每句台詞；儲存為 vo/raw/<id>-t1.wav 並照常執行 vo_verify.sh |
| 他們自己的聲音，複製 | ElevenLabs 付費方案 | 像他們，無需錄製 | 在 ElevenLabs 中進行即時語音複製，然後將該語音 ID 放入 script.json |
| 內建電腦語音 | 免費，無需帳號 | 機械感 | 使用 say -v Samantha -o a01.aiff "…"；僅用於時間草稿 |
ElevenLabs 細節：
- 金鑰：
ELEVENLABS_API_KEY或ELEVENLABS_KEY_FILE。切勿列印、貼到聊天室或提交到版本控制。在 T3 中，使用request_secret搭配檔案傳遞，並在使用後刪除檔案。 - 預設：語音 Brian
nPczCjzI2devNBz1zQrb，模型eleven_v4，穩定性 0.45。音訊標籤如[casual]、[measured]、[serious]和[confident]可引導朗讀風格。 - 免費方案： 每月 10,000 額度（≈ 10,000 字元）。一個 60 秒的腳本約 900 字元，因此所有台詞錄製 2 次約 1,800 字元，大約每月 5 支影片。
- 免費方案無商業授權（ElevenLabs 服務條款）。僅用於草稿和內部審查。在任何內容被發布或用作行銷用途之前，請在付費方案（Starter 為最便宜選項）上產生最終錄音。
- 台詞之間應放置 ≥0.3 秒的呼吸間隔。畫面事件應對齊 whisper 辨識出的單字起始點，絕不使用猜測的時間。
音效
每個可見事件都應有一個在手機喇叭上可聽見的音效：iMessage 的三音提示聲、通知的叮噹聲、打字的按鍵聲、每個視窗的快彈聲、年費數字的震撼音效、「只是重新輸入」的深沉低音、掃描器底盤聲、勾選框的滴答聲、每次點擊的按鈕聲、最後歸檔的成功音效，以及標誌的閃亮音效。完整的音效對應圖與增益設定在 references/sound-map.md。音樂是可選的背景音，設定為 −23 LUFS，並在語音下方降低音量。務必同時交付「語音+音效」版本，因為使用者常會在應用程式中加入流行音樂。
渲染注意事項
- 當主機應用程式重新啟動時，渲染會中斷。務必使用
nohup … < /dev/null & disown執行，並事後檢查幀數。在 2026-11-09 這天，即使是這種方式也因主機重啟而失敗；建議改用screen -dmS <name> zsh -c "…"。 - 磁碟：幀資料直接串流至 ffmpeg，永不寫入磁碟。
render.sh會在混流後刪除無聲的中間檔案。 - 對於
offsetWidth不正確的 SVG 或圖片（例如字標），請自行設定el._w/el._h，否則它會渲染在偏離中心的位置。 - 任何在動態模糊下必須保持清晰的元素（快速「飛入」的晶片）應使用
tf（幀時間）代替t。