Remotion Render 是做什麼的？
驅動渲染與迭代循環：將合成轉為 MP4，接收自然語言回饋，進行最小改動後重新渲染。昂貴的失敗模式是相反的循環——為了複製微調而重寫整個場景檔案，或為了每次檢查而以全品質重新渲染——這會破壞已批准的工作以及讓 Remotion 值得使用的迭代速度。
操作程序
步驟 1：收集輸入
- 合成 ID（
src/Root.tsx中<Composition>上的id，而非檔案名稱）以及進入點（呼叫registerRoot的檔案，通常為src/index.ts）。 - 目標：平台/比例（橫向 16:9、直向 9:16、方形）、解析度（預設 1080p；僅在要求時使用 4K），以及是否需要透明背景。
- 機器核心數（用於並行度）以及這是單次渲染、迭代工作階段還是批次處理。
步驟 2：基礎渲染
npx remotion render src/index.ts <CompositionId> out/video.mp4
預設輸出為 H.264 MP4，使用合成自有的寬度/高度/幀率；Remotion 會視需要建立 out/ 目錄。
步驟 3：解析度、幀率與編解碼器預設
解析度和幀率位於 <Composition> 上（width/height/fps）——請在來源端修改。僅使用旗標進行縮放和容器設定：
# 1080p 橫向 - 合成設計為 1920x1080@30
npx remotion render src/index.ts ProductDemo out/1080p.mp4
# 4K - 將 1080p 畫布升頻而不觸及佈局
npx remotion render src/index.ts ProductDemo out/4k.mp4 --scale=2
# 9:16 直向 - 渲染設計為 1080x1920 的合成
npx remotion render src/index.ts ProductDemoVertical out/vertical.mp4
編解碼器規則：
- 社交/網頁傳送維持 H.264 MP4（預設值）——相容性最佳。
- 透明背景：
--codec=vp8或vp9（WebM），或用於編輯管線的--codec=prores搭配 alpha。H.264 無法攜帶 alpha。 - 真正的 60fps 意指
fps={60}位於合成上，且幀數按比例縮放以匹配——僅透過旗標更改 fps 會使所有以幀計時的動畫不同步。
步驟 4：調整並行度
渲染是 CPU 密集型（每個影格都是一個無頭 Chromium 螢幕截圖）。預設約為核心數的一半；明確調整是本地最簡單的加速方式：
npx remotion render src/index.ts ProductDemo out/video.mp4 --concurrency=8
從實體核心數開始（--concurrency=50% 接受百分比）；如果機器開始交換或出現熱節流則調降——超過最佳點後，更多的 Chromium 分頁會使其變慢，而非更快。
步驟 5：執行迭代調校循環
保持 Studio 開啟（npx remotion studio，http://localhost:3000），讓使用者能即時預覽；僅在驗收時才使用完整渲染。
- 使用者在 Studio 中預覽並以純文字提供回饋。
- 將其轉化為手術刀式編輯——僅更改相關數值：
- "太快" → 擴大
interpolate輸入範圍或提高彈簧damping。 - "Logo 應該更突出" → 降低彈簧
damping/ 增加過衝。 - "更改 CTA 文案" → 編輯 prop /
defaultProps，不觸及其他部分。 - "不同的強調色" → 在顏色物件中更改一個十六進位色碼。
- "最後一個功能停留更久" → 調高該
<Sequence>的durationInFrames並重新推導合成總durationInFrames。
- "太快" → 擴大
- 重新渲染，或讓 Studio 熱重載以進行視覺檢查。
手術刀式編輯 vs 重寫：當變更涉及單一數值、prop、顏色或一個場景的時間時，進行就地編輯；僅在場景結構改變時（新增/移除/重新排序場景）才重寫——並將結構性編寫工作導向 remotion-compose。預設為手術刀式：它保留所有已批准的內容。
步驟 6：批次變體
合成是由資料驅動的，因此 N 個變體 = JSON 檔案中的 N 組 props：
[
{ "out": "out/acme.mp4", "props": { "logoText": "Acme", "colors": { "accent": "#6C5CE7" }, "cta": "Try Acme" } },
{ "out": "out/globex.mp4", "props": { "logoText": "Globex", "colors": { "accent": "#00B894" }, "cta": "Try Globex" } }
]
--props 接受內聯 JSON 或檔案路徑；對於超過幾個變體的情況，撰寫一個讀取 JSON 並對每個條目執行 shell 命令的小型 Node 腳本，或使用 @remotion/renderer 的 renderMedia() 進行型別安全循環。透過編輯 JSON 即可完全實現本地化或 A/B 文案和顏色的變更。
步驟 7：當本機成為瓶頸時使用 Lambda
當單次渲染在本機需要數分鐘，或批次量很大時，才考慮使用 Lambda——它會將影格分散到無伺服器工作者上。否則，本地渲染更簡單且免費。
npx remotion lambda functions deploy # 每個 AWS 帳戶/區域一次
npx remotion lambda sites create src/index.ts --site-name=product-demo
npx remotion lambda render product-demo ProductDemo --props='{"logoText":"Acme"}'
需要 AWS 憑證和 IAM 權限，請遵循 Remotion 的 Lambda 設定指南。
步驟 8：排解三種常見故障
- 幀數不匹配 - 動畫過早結束或片段結尾出現死尾。原因：
<Sequence>持續時間已更改但合成總數未更新。修復：使總數等於其序列的總和；每次編輯時間後重新計算。這是排名第一的渲染意外。 - 缺少
staticFile()引用 - 渲染失敗或素材為空白。原因：素材透過路徑匯入或在public/之外。修復：將其放入public/assets/並引用staticFile("assets/<name>")。 - 字型閃爍/後備 - 文字以錯誤字型渲染或發生偏移。原因：
@remotion/google-fonts的loadFont()缺失或呼叫過晚。修復：在模組頂層呼叫loadFont()並應用傳回的fontFamily；渲染器會等待字型載入。
交付成果
位於 out/ 中的渲染檔案，符合要求的預設值，此外——對於迭代工作階段——提供循環選項：命名可調整的維度（節奏、文案、顏色、時間）並在收到回饋後重新渲染。對於批次處理，提供變體 JSON 以及每個變體的輸出。
請勿
- 請勿為了一級數值變更而重寫場景檔案——手術刀式編輯可保留已批准的工作。
- 請勿僅透過旗標更改 fps——應在合成上設定 fps 並重新縮放幀數。
- 請勿更改 Sequence 持續時間而不重新推導合成總
durationInFrames。 - 請勿每次迭代都進行完整渲染——Studio 熱重載是預覽循環；僅在驗收時渲染。
- 請勿在機器正在交換或熱節流時將並行度推過實體核心數。
- 請勿在本地渲染只需幾秒鐘時就使用 Lambda——這會無端增加 AWS 設定和成本。
- 請勿在此撰寫新場景或重構合成——這是 remotion-compose 的職責。
品質標準
- 輸出以要求的解析度/比例/幀率播放，無死尾且無過早結束（合成總幀數等於序列總和）。
- 素材和字型在第一個影格正確渲染——無後備字型閃爍，無空白素材。
- 迭代僅更改了回饋所需的行數；所有先前已批准的內容保持不變。
- 批次輸出差異僅來自其 props 組合。
升級準則
場景編寫、動畫設計和元件結構請轉至 remotion-compose；專案腳手架請轉至 remotion-setup；評分和音訊時間請轉至 sound-and-music-sync。