製作頁面短片

概述

頁面本身就包含了你能獲得的最佳素材：其真實的動畫，正在實際運行。這項工作是真實地捕捉它們、選擇觀看路徑，並驗證最終成果。

核心原則：錄製真實動畫，絕不重新創造，並透過測量而非直覺來編輯。

頁面的錄製就是一個導覽影片。請明確說明。品牌影片則是另一種工作：需要分鏡腳本的設計動畫影片。此技能適用於「展示我們建置的頁面看起來和動起來的樣子」。

錄製前的決定

影片要證明的內容。 一句話。例如：「新頁面能自行建置並按設計滾動。」
使用的版本。 錄製真實且已發布到審查環境的版本。絕不錄製尚未發布的版本（未公布的產品頁面、草稿），也絕不錄製仍在變更中的原型。錄製測試環境的內容，而非本地建置。
格式。 16:9 的 1920x1080 是原生的桌面捕捉格式，也是最安全的選擇。不要使用團隊尚未進行品質驗證的直式版面。
長度。 保持簡短。15 到 20 秒足以展示整個頁面的功能。五秒可以展示一個動作。判斷你的影片需要哪種。
絕對不能出現的內容。 客戶標誌、附有名稱的引言、第三方標記、佔位文字、損壞的圖片、未公布的聲明。現在就列出清單。
解析度。 先以 1080p 審查。在剪輯獲得批准之前，不要渲染 4K 母帶。

步驟 1：錄製真實動畫

使用 Chrome 的 CDP 螢幕錄製，而非逐格截圖。滾動驅動的 GSAP 動畫、平滑滾動、Canvas 軌跡和計時進場效果都依賴實際時間運行。逐格播放會改變動畫效果。

Page.startScreencast  format jpeg, quality 100, maxWidth = viewport width, everyNthFrame 1

在 Apple Silicon 筆記型電腦上，這大約可以達到每秒 60 幀（中位數間隔 16.7 毫秒）。

載入進場動畫：先開始螢幕錄製，然後重新載入頁面，這樣進場動畫就會被錄在影片中。剪掉重新載入前的幀。
滾動：透過關鍵幀 [秒數, 位置] 驅動滾動。將位置透過單調三次插值（無超射，保持停留）傳遞，並使用平滑滾動函式庫的 scrollTo(y, { immediate: true, force: true }) 來應用每個值，如此頁面自身的滾動控制和平滑效果就會與讀者體驗完全相同。絕對不要用手動方式動畫頁面元素。
隱藏而非移除：對標誌和引言使用 visibility: hidden 可以保持固定版面佈局。display: none 會導致版面位移。
時鐘同步：在頁面內部取得開始時間（performance.timeOrigin + performance.now()），讓滾動關鍵幀和螢幕錄製時間戳使用同一個時鐘。
重新取樣到固定幀率：輸出第 k 幀顯示在時間點 k / fps 或之前最新的螢幕錄製幀。

此儲存庫中的 video/capture.mjs 可以根據一個小型 JSON 計畫完成上述所有操作。

步驟 2：透過測量選擇路徑

憑直覺選擇的滾動路徑會產生死區——即滾輪移動但螢幕上沒有任何變化的區域。找出它們：

錄製一次緩慢、穩定的完整範圍掃描。
對其執行 video/analyze.py。它會報告凍結的連續幀（完全相同的幀）以及最大的逐幀變化。
將凍結的連續幀映射回滾動位置。這些就是死區：快速越過它們。
為滾動驅動的瞬間（如圓形放大、卡片建立、計數器增加）提供緩慢、可讀的段落。滾動驅動的場景會跟隨滾動，所以等待並不會完成它們。
時間驅動的動畫在越過某個閾值時開始，需要真實時間才能完成。在最後一個動畫完成前，不要結束片段。

然後使用規劃好的路徑錄製真正的影片，並再次執行 analyze.py。在固定場景中短暫的凍結連續幀是正常的停留。但在動態過程中出現 0.4 秒的凍結則是不正常的。

檢查錄製本身的健康狀況：在你將使用的部分中，螢幕錄製幀之間的最大間隔應低於約 40 毫秒。更大的間隔表示卡頓，因此需要重新錄製。

步驟 3：選取已完成的最終素材

在決定最終素材前，每隔 0.5 到 1 秒查看一次聯絡頁樣張。拒絕：

空白卡片、損壞的圖片、顯示替代文字的圖片應有位置
CMS 列表中的佔位文字
頁面繪製時前幾秒的空白；修剪到標題開始出現的地方
「絕對不能出現的清單」中的任何內容

如果某個區塊未完成，就將其排除並告知負責人。一段展示損壞卡片的影片就是一份公開的錯誤報告。

步驟 4：使用正確標記的色彩進行編碼

./encode.sh <framesDir> out.mp4 <firstFrame> <frameCount> 60

螢幕錄製的幀是全範圍的 BT.601 JPEG 格式。此編碼會將其轉換為有限範圍的 BT.709 並標記串流，這樣播放器就不會猜測：

scale=in_range=full:in_color_matrix=bt601:out_range=tv:out_color_matrix=bt709,format=yuv420p
libx264 -crf 14 -preset slow -x264-params colorprim=bt709:transfer=bt709:colormatrix=bt709:fullrange=off
-movflags +faststart

yuv420p 和 +faststart 讓影片可以在任何地方播放並立即開始。透過解碼回幾個影格並逐像素與原始檔比較來驗證結果。不要比較頻道平均值：對數百萬個 float32 值求平均會累積足夠的誤差，從而憑空產生一個實際不存在的色偏。每個頻道差異在 3 個級別以內是可靠的。

步驟 5：影片品質檢查

從檔案中讀取的持續時間、幀率、尺寸和色彩標記
每秒檢查一個影格，並以正常速度檢查過渡效果
在任何影格中都沒有標誌、名稱、佔位文字、橫幅或損壞的圖片，不僅是選定的影格
畫面上沒有 Cookie 橫幅或同意小工具，也沒有點擊過任何此類元素：從頁面自身的 CSS 隱藏它，或錄製不顯示它的環境
第一個影格是鉤子。如果頁面繪製的是空白，請修剪掉它
選擇一個頁面完整且靜止的影格作為海報影格，而不是滾動中途的影格

然後執行 reviewing-page-design 中的冷門 reviewer 關卡。

步驟 6：說明你無法驗證的事項

聲音（如果有的話：「我聽不到」）。平台自身的重新壓縮。在你未測試過的裝置上顯示的任何內容。

當需要設計好的影片時

將頁面素材組合進一個佈局中，其中每個視覺元素都是時間的函數（閉合形式的彈簧動畫，每個節奏一個疊加想法，兩到五個字的字幕，品牌顏色僅用於名稱和結尾卡）。同樣的規則適用：頁面視窗永遠不會被覆蓋，文字在 360 像素寬度下可讀，結果畫面至少持續 1.2 秒。

紅旗標誌

對滾動驅動頁面進行逐格截圖捕捉
錄製正在變更中的原型或尚未發布的頁面
包含未完成區塊的影片
影格中出現客戶標誌或附帶名稱的引言
憑直覺選擇的路徑，沒有進行過掃描分析
透過頻道平均值比較顏色
在剪輯獲得批准之前渲染 4K

頁面短片製作