launch-video
以程式碼生成產品發布影片（Remotion → MP4）。這項技能是一個場景庫 + 工作流程，而不是固定的模板。不同的產品訴說不同的故事——CLI 工具的故事發生在終端機裡，SaaS 應用在瀏覽器中，行動應用在手機上，程式庫則在編輯器中。請先為這個產品設計弧線，再從場景調色盤中組合。不要強行將產品塞進 tdoc 範例的形狀中。
不可妥協的規則
在接觸程式碼之前，先設計故事弧線。 問：這個產品做什麼？使用者是誰？唯一的「啊哈！」時刻是什麼？寫出一個節拍清單（5–9 個節拍，每個以 24fps 的幀數計算持續時間）並與使用者確認。然後才開始組合場景。發布影片是一個故事，而不是功能導覽。
工作流程
- 了解產品。 它是什麼？使用者在哪裡與它互動（終端機 / 瀏覽器 / 手機 / 編輯器 / 混合）？前後對比是什麼？哪一個瞬間會讓使用者想要它？
- 撰寫節拍清單。 每個節拍：名稱、螢幕上顯示的內容、持續幀數。總長約 30–45 秒（720–1080 幀）。在開始建構前，先透過 AskUserQuestion 與使用者確認。
- 從場景調色盤（如下）為每個節拍挑選場景。大多數影片使用 1–3 種場景類型 + 可選的結束卡。不是所有類型都需要。
- 收集素材。 真實截圖優於模擬圖。將它們放在
<project>/public/中。只有在截圖解析度太低或需要 1:1 動畫化時，才將 UI 重建為清晰的元件。 - 在儲存庫下建立專案結構（複製
examples/tdoc作為起始骨架——其結構，而非內容）或放在一個並行目錄中。連接一個單一的<Composition>，其持續時間為所有節拍持續時間的總和，每個節拍一個<Sequence>。 - 建構節拍，然後加入音效（
scripts/make-sfx.sh <public>），然後渲染，然後視覺化確認每個變更的節拍，反覆迭代。 - 只有在驗證循環通過後才能交付 MP4。
場景調色盤 (src/)
從庫中匯入；只組合故事需要的部分。
| 場景 | 使用時機 | 關鍵屬性 |
|---|---|---|
Terminal | CLI 工具、代理、開發工具——故事發生在 shell 中 | lines（已輸入的提示、工具呼叫、結果、警報、URL），spinner，title。提示中以 /slash-command 開頭會自動以粗體強調色標示。 |
BrowserWindow | 網頁應用、文件、儀表板、SaaS | 截圖/HTML 作為子元素，`chrome="bar" |
MobileFrame | 行動應用 | 手機外殼；截圖/UI 作為子元素 |
CodeEditor | 程式庫、SDK——「寫這個 → 得到那個」 | code 行，打字顯現效果 |
Outro / LogoCard | 結尾（可選） | 標題/副標題，或旋轉的標誌 + 文字商標 |
WaveBackground | 任何視窗後方的平靜品牌背景 | 顏色 |
Cursor | 點擊成品/連結/按鈕 | 從/到座標，clickAt |
PixelPet | 視窗上方友善的吉祥物 | crown/base 像素行，color；眼睛上下擺動（無眼白——小尺寸時閱讀清晰） |
Caption | 視窗下方的一行註解 | at，text |
這些是獨立的。一個程式庫發布可能只需要 CodeEditor + Terminal + LogoCard。一個 SaaS 發布可能需要 BrowserWindow + Outro。
節奏與轉場規則（從經驗中學到的教訓）
- 使用 24fps。 節拍持續時間以幀為單位。保持總長緊湊：剪掉靜止的停頓，而不是動作。如果一個節拍大部分是凍結畫面，就縮短它。
- 銳利轉場。 場景間的交叉淡出 ≤ 5 幀；節拍淡入約 4 幀。視窗「彈開」（縮放 0.35→1，約 12 幀）比緩慢的 30+ 幀縮放效果更好。
- 盡可能保持一個連續的節拍。 將「打字 → 點擊 → 結果」合併成一個連續的 Sequence，這樣就不會在中間出現閃爍/切斷。
- 遊標必須移動並按下。 不要瞬間移動；動畫移動到目標，按下時縮小。每次點擊在按下的幀上都會有 SFX 音效。
- 不要雙重裝飾。 如果截圖已經有標題列，請使用
chrome="none"。不要在已有的標題列上再疊加一個視窗欄。 - 品牌卡片書擋。 重複使用一個品牌卡片（標誌/吉祥物 + 產品名稱 + 一行價值主張）作為開頭和結尾畫面（各約 1.5–2.5 秒）。它能框定故事，而且比單獨的動畫標誌結束卡片更節省成本。所有節拍的偏移量都透過一個
at()累加器驅動，這樣加入開場卡片會自動將所有後續內容（包括 SFX）向下游偏移。
音訊規則
- 執行
scripts/make-sfx.sh <project>/public來合成sfx-typing.mp3+sfx-click.mp3。這些是 .gitignore 忽略的生成產物——總是（重新）生成它們；絕不要依賴它們在全新 clone 後存在。 - 打字 SFX 只在有人類正在打字時（提示、註解）播放。絕對不要在自動串流/代理輸出時播放。
- 點擊 SFX 在每次遊標點擊的按下幀（連結、按鈕、成品）觸發。將
<Sequence from>與點擊幀匹配。 - 使用
<Audio src={staticFile(...)} volume={0.3}>在精確的幀視窗範圍內，將音訊疊加到短<Sequence>中。
驗證循環（交付前強制執行）
讀取 PNG 的影像代理會因 OCR 雜訊而產生誤差——信任像素測量（Python/PIL/numpy），而不是文字描述，來進行對齊/顏色驗證。
- 執行
scripts/verify.sh <entry> <CompId> <public-dir> <frame> ...來擷取靜態畫面並印出音訊視窗。將專案的public/作為<public-dir>傳入（如果沒有則傳入-）——與渲染相同的--public-dir規則；否則靜態畫面的資產會 404。 - 檢查每個靜態畫面。對於每個變更的節拍，確認：內容正確，沒有被
overflow:hidden裁剪，轉場正常著陸，遊標在目標上，SFX 視窗與可見的點擊/打字幀對齊。 - 修正 → 重新渲染 → 重新驗證。不要在 intent 中回報「完成」；要驗證實際的幀畫面。
渲染
npx remotion render <entry> <CompId> out/<name>.mp4 \
--public-dir=<project>/public
# still: npx remotion still <entry> <CompId> out/x.png --frame=N \
# --public-dir=<project>/public
<entry> 是專案的 src/index.ts（會呼叫 registerRoot）。當 entry 在子目錄中時，務必傳遞 --public-dir——否則 staticFile() 會解析到儲存庫根目錄的 public/，導致資產 404。
參考範例
examples/tdoc/ 是標準的實際運作範例（約 39 秒）：一個品牌卡片開場，工程師向代理輸入 /tdoc … 提示（Terminal，斜線命令自動高亮），得到一個連結，文件開啟（BrowserWindow），團隊成員留言，代理釋出 v2，然後相同的品牌卡片結尾——伴有局限於實際打字的打字/點擊 SFX，以及一個眼睛上下擺動的 PixelPet。請閱讀它以了解如何使用這個庫；但不要複製它的故事。 為新產品建構它自己的弧線。