Remotion 影片轉 Resolve 時間軸
讀取 Remotion 專案，撰寫一個小型轉接器，將其場景資料轉換為 resolve-screen-tutorial 技能所需的 film.json 格式，執行該建置流程，並將結果與 Remotion 的渲染輸出進行比對。
這是使用 Resolve 工具進行的重建，而非像素複製。React 可以繪製任何內容，而時間軸則使用圖片、關鍵幀和 Fusion 標題。因此，此工作的誠實部分是告訴使用者哪些內容能乾淨對應、哪些是近似結果，以及哪些無法轉換過來。
開始之前
resolve-screen-tutorial應位於此技能資料夾的旁邊。請立即閱讀其SKILL.md和references/film-format.md，因為你將撰寫該格式並遵循那些建置步驟。如果找不到，請告知使用者此技能需要該套件。- Remotion 專案需已安裝其依賴項。其原始碼維持不變：轉接器僅讀取其資料，不進行修改。
步驟
1. 讀取影片。 從 src/Root.tsx 開始，取得合成的 id、fps、width、height 和 durationInFrames，然後依序追蹤到場景元件及其資料。如果有多個合成且請求未指定，請詢問使用者。找出 public/ 下的所有素材。
2. 列出畫面內容並對應。 references/mapping.md 包含了從 Remotion 建構區塊到 film.json 的對照表。請立即閱讀。將每個元素歸類到以下三個群組之一：
- 直接對應： 全螢幕截圖、攝影機移動、游標、圓環、字幕、標題卡、淡入淡出。
- 近似處理： 其他緩動函數、其他轉場效果、未安裝的網頁字型、過於複雜的字幕樣式。
- 無法轉換： 圖表、粒子特效、3D、Lottie 動畫、逐字母動畫的文字。
如果有重要元素屬於第三組，請在建置前告知使用者，並提供 references/mapping.md 中的選項。如果影片主要屬於該組，則表示此方法不適用，請直接告知，不要勉強建置一個品質低劣的副本。
3. 取得參考影片。 在 out/ 資料夾中尋找此合成的渲染輸出。最好它比合成本身的原始碼檔案更新，且具有正確的 durationInFrames 幀數（使用 ffprobe 檢查）。小型網頁編碼也可以接受，只會稍微降低比對分數。如果沒有，請使用合成本身的設定進行渲染：
npx remotion render <composition id> out/<composition id>.mp4
4. 撰寫轉接器。 將其放在 <project>/resolve/<composition id>/export-film.mjs，並讓它在同一個資料夾中寫入 film.json。該資料夾即為建置流程的影片資料夾。僅當使用者希望將這些檔案保留在儲存庫中時，才將 build/ 加入專案的忽略清單，且除非使用者要求，否則不要提交。
轉接器應導入影片的真實資料，這樣當副本或時間發生變化時，重新執行轉接器即可自動同步更新。references/mapping.md 提供了骨架和算術邏輯。僅在數值深藏在 JSX 內部時才手動複製，並告知使用者哪些值是手動複製的，因為這些值將不會跟隨後續的程式碼變更。
根據程式碼的顏色、字型和 Logo 設定品牌（brand）。列出影片載入的每一個字型，並使用 fonts_available 檢查。如果某個字型未安裝，請詢問使用者是要安裝它還是使用一個相似的已安裝字型。即使名稱相同，已安裝的字型可能與網頁字型來自不同的字型版本，導致寬度略有不同。
5. 建置。 遵循 resolve-screen-tutorial 的 SKILL.md 中「Build」章節的步驟 1 到步驟 4，並將 WORK 設定為影片的資料夾。步驟 4 的 review_frames 是在渲染前進行的快速檢查。然後按照其步驟 5 進行渲染，因為比對需要完整的影片。跳過其 review.py 的呼叫，因為步驟 6 會使用參考影片執行相同的比對工作。比對完成後請移除你的渲染任務。其決策同樣適用於此：告知使用者此時間軸將放入哪個專案，且絕不取代你未建立的時間軸。將 fps 設為專案的影格率。film.json 中的時間使用秒為單位，因此即使與合成的影格率不同，時間點仍然正確。
6. 與 Remotion 渲染結果比對。 將參考影片傳遞給 review.py：
python "<resolve-screen-tutorial>/scripts/review.py" "<WORK>" "<WORK>/build/render/review.mp4" "<reference video>"
它會為整個影片和每個場景輸出 SSIM（結構相似性指數，1 表示完全相同），並顯示每個場景中最弱的影格。它會將並排比對結果寫入 build/review/ 資料夾（Resolve 在左側），以及 ssim-by-half-second.txt，此檔案可以揭露場景中最低分影格所隱藏的問題。開啟這些比對結果。如需更仔細查看，請加上 --at <seconds> 參數，以全尺寸顯示該時刻的並排比較（Resolve 在上方）。
作為參考，基於螢幕截圖且重建良好的影片，總分通常在 0.96 到 0.97 之間。如果某個場景的分數明顯低於相鄰場景，則表示存在實際差異，請查看其最低分影格：
| 你看到的畫面 | 可能原因 |
|---|---|
| 所有元素都偏移或尺寸錯誤 | 轉接器中的縮放或變形原點設定 |
| 整個影片在時間上偏移 | 轉接器中的場景開始時間或轉場重疊計算錯誤 |
| 攝影機靜止時正確，移動時錯誤 | 緩動函數（easing） |
| 圓環稍微過大 | CSS 邊框（border）位於框內部，請參閱 film-format.md |
| 僅文字不同 | 字型：被替換，或相同名稱但不同字型版本 |
有些差異是預期中的，不需修正：
- 重點標記出現得太晚，因為它要等到攝影機停止移動。
- 圓環的發光效果會讓圓環內部也著色，因為 Fusion 的模糊效果會向內外擴散。
- 字幕、游標和圓環在溶解轉場的中間就結束，而不是停留在轉出場景上。
- 第一個之後的卡片會延遲半個溶解時間才開始動畫。
修正轉接器，重新執行，然後再次執行 plan.py 和 build_film。當剩下的差異都是你可以明確命名的類型時，即可停止。
7. 報告。 包含 resolve-screen-tutorial「Finish」章節的所有內容，再加上：
- SSIM 分數
- 步驟 6 中的差異列表，每個差異附帶其原因
- 任何屬於「無法轉換」群組的項目，以及你如何處理它們
- 轉接器的位置，如何重新執行，以及提醒使用者重建會取代現有的時間軸，導致在時間軸上所做的編輯遺失