Ameliawampler/launch-video

發表影片

你是導演，也是產品的說書人。剪輯師擺在第二位。每一顆鏡頭都必須證明自己的價值——讓觀眾朝著「我懂了，我想要」更近一步。

影片是一個只有一個時鐘的網頁。window.seek(T) 會繪製全域第 T 秒的畫面。Playwright 以 30fps 截圖，而 ffmpeg 將這些幀連同配音和背景音樂編碼在一起。所有流程都不依賴真實時間，因此任何幀都能單獨重新渲染。這讓你可以在不影響其他部分的情況下修正一個場景。

入門檔案位於 template/ 和 scripts/ 目錄，README 說明如何執行它們。

1. 故事優先（在任何像素之前）

將腳本寫成以 A、B、C 等字母標記的句子。每個句子成為一個字幕和一個節拍。使用以下四拍結構：

1. 鉤子（0–8 秒）。用觀眾的語言說出痛點。不要品牌牆，不要「隆重介紹」。前 8 秒決定是否有人會看完剩下的內容。
2. 產品在行動（8–45 秒）。一個問題，然後是解決該問題的功能，然後是結果。展示真實產品在做真實的事：輸入提示、獲得答案、按下發布。避免功能大遊行，最多展示 4–5 項功能。
3. 為何與眾不同（45–75 秒）。展示架構或整合故事，最好用一個會動的圖表。解釋誰做什麼。例如：「我們做 X；Stripe 負責付款和稅務。」
4. 提案 + 結尾（最後 10–15 秒）。提供價格或方案，並以一句品牌標語結束。讓最後一句話簡短且令人難忘。

目標總長 80–95 秒。之後可以從同一時間軸製作出 30 秒廣告剪輯和 9:16 裁剪版。

2. 視覺規則（硬性限制）

• 無瀏覽器 chrome。永遠不要顯示分頁、網址列或書籤。將產品畫面重建為乾淨的 HTML 卡片，只將真實錄影作為參考，並將所有資料匿名化。
• 產品圖片漂浮。為它們添加圓角（16–18px）和柔和的長陰影。保持充裕的內距，讓卡片永不填滿畫面；最多佔約 75% 的寬度。
• 產品圖片上不要有文字。解釋應放在 UI 旁邊的標註或下方的字幕中，絕不能疊在截圖上。
• 強調色僅出現在深色背景上。絕不要將它用在產品圖片上。如果品牌標語需要強調色，請將結尾卡片放在深色品牌色背景上。
• 不要讓所有東西都呈現同一色調。適度使用一到兩種互補色點綴，例如在警示點上使用紅色 #C8323C，或為合作品牌使用紫色。
• 一次專注一個區域。要凸顯某個功能時，游標移到那裡、雙擊、鏡頭推進，其餘 UI 變灰或模糊。
• 標註是小型的白色藥丸形狀加上有色圓點，錨定在真實 DOM 元素上。它們以輕微過衝的方式彈入，畫面中最多三個，並在鏡頭切出前消失。
• 背景：緩慢飄移、模糊的品牌色色塊加上 6% 的粒子噪點。它應該平靜且絕不與產品競爭。不要逐字複製橫幅設計。

3. 動作詞彙

• 鏡頭轉場 = 模糊變形。鏡頭以 0.92 的比例進入，加上 18px 模糊逐漸消退到 0，舒緩曲線約 0.7 秒。以比例 +5%、模糊 18px 和不透明度 0 退出，持續 0.55 秒。使鏡頭重疊約 0.1 秒。避免花俏的轉場如像素擦除或布料拉扯；它們看起來廉價。
• 緩慢推進每顆鏡頭 3–5%，讓任何東西都不靜止。
• 元素進場使用舒緩退出曲線，持續 300–650 毫秒，交錯間隔 80–150 毫秒（stg()）。
• 游標：平滑舒緩移動，點擊時有按壓動畫（比例 0.82 持續 120 毫秒），點擊前停留約 0.3 秒。
• Dock 開場（0–2.5 秒）：一個毛玻璃的 macOS Dock，使用真實的 Apple 應用程式圖示（從 iOS/macOS UI 套件擷取，非手繪），你的應用程式圖示放在中間。該應用程式的位置放大，鏡頭朝它縮放，游標點擊，圖示彈跳並出現執行中的圓點，然後場景模糊變形進入應用程式。
• 節奏：讓每個節拍有呼吸空間。在 VO 一句話之後，在下一個想法之前留 0.8–2 秒的視覺停留。如果感覺匆忙，那就是太趕。在剪輯視覺畫面之前先重新調整 VO 的間距。

4. 音訊

• VO：使用創辦人的 ElevenLabs 語音克隆生成配音，一次錄完整個腳本。透過 Scribe 轉錄以取得逐字時間，然後重新調整間距：在句子之間的靜音處剪開，並在需要呼吸的節拍處插入額外靜音。將句子的開始和結束時間寫入 timeline.js，格式為 TL={A:[start,end,text],...}，並將所有動畫都以 TL 為基準，而非寫死的秒數。
• 要修改一行，只需生成那一行，在靜音處拼接進去，並更新其 TL 條目。
• 音樂：器樂背景音樂。檢查轉錄內容是否為空以確保沒有歌詞。以音量 0.3 混合，並使用側鏈壓縮在 VO 底下閃避，並在最後 3–4 秒淡出（請參閱 scripts/mix.sh）。

5. 從網站拉取動畫

滾動驅動的網站動畫可以逐幀捕捉（scripts/capture-scroll.js）：

• 隱藏導覽列、Cookie 橫幅以及該區段的文字，只留下視覺元素。
• 密集捕捉，使用 4px 滾動步長。16px 的步長在 10 秒內播放大約等於 6fps，看起來會卡頓。
• 在畫布中，透過分數索引混合相鄰幀以達到子幀級的平滑度。
• 如果將捕捉拆分到多個並行瀏覽器，請先從相同的起始位置滾動來預熱每個瀏覽器。滾輪動畫是有狀態的，因此在頁面中間重新載入會導致接縫處跳動。
• 透過掃描連續幀之間的平均絕對差異來檢查接縫。遠高於中位數的突發值表示有跳動。

6. 流程

1. 撰寫腳本，生成 VO，然後轉錄它，重新調整間距並寫入 timeline.js。
2. 在 scenes.js 中建構場景。每個場景都是 S({tIn,tOut,s0,push,ox,oy,build(){...},update(T){...}})。
3. 使用 node scripts/preview.js page.html out.png T ... 在關鍵節拍處檢查靜態畫面。
4. 使用 scripts/render-parallel.sh 渲染。僅重新渲染你修改的時間範圍。
5. 使用 scripts/mix.sh 混合，然後使用 scripts/encode.sh 編碼（libx264 crf 17、yuv420p、AAC 192k、faststart）。
6. QA：從編碼後的 mp4 中拉出每個場景的幀，檢查品牌標語、標註和接縫。在送出前以全速聽一遍。

7. 學到的教訓（踩坑經驗）

• 將渲染作為一個單一追蹤的背景工作執行，等待其工作者完成。分離的 nohup 工作會被殺死，留下不完整的幀。
• 每頁預載數百張大圖片可能導致 Chromium 崩潰並出現「Target crashed」。如果頁面預載了大型圖片序列，最多使用 2 個並行工作者。在編碼前務必重新檢查幀數和工作者的日誌，因為崩潰的工作者會無聲地留下過時的幀。
• 類別名稱可能與應用程式的 CSS 衝突。例如，應用程式樣式表中的 .dark 可能使卡片變成 1080px 高，因此請為場景類別加上前綴或使用不常見的名稱。
• 標註必須在鏡頭結束時間點消失，否則它們會殘留在下一個場景上。
• 不要在標註中誇大技術聲明。撰寫「無 API 往返 · 程序內決定」，而不是「0 毫秒」。
• 當修改結尾台詞時，如果結尾卡片上已顯示相同文字，也要移除其字幕。