Remotion 動態圖形專業技能是做什麼的？

Remotion 將 React 組件逐幀渲染為影片。程式碼品質並非瓶頸——動態設計工藝才是。未經訓練的生成會產生線性緩動、只有不透明度的淡入淡出、同時進入、平坦的顏色，以及沒有紋理。這就是「AI 生成影片看起來很普通」的原因。此技能旨在防止這種情況。

不可妥協的規則（適用於每個合成）

永遠不要使用線性插值。 每個 interpolate() 都要有緩動曲線；每個入場優先使用 spring()。務必設定 extrapolateLeft/Right: "clamp"。
入場時同時動畫 2-3 個屬性（不透明度 + 垂直位移 + 縮放）。禁止單獨使用淡入。
交錯所有元素。 列表、單詞、光線、卡片：間隔 3-6 幀。沒有元素會同時進入。
出場必須存在且比入場更快（約 10 幀 vs 約 20 幀）。
每個場景都有五個圖層，由下至上：背景網格 → 素材 → 圖形/字型 → 調色 → 雜訊 + 暗角。絕不允許純色平面背景。
每個靜態圖片都要有 Ken Burns 效果（慢速縮放 1→1.08 + 平移）。每個影片素材使用 <OffthreadVideo>，絕不使用 <Video>。
閒置元素要呼吸：任何在畫面上停留超過 2 秒的元素都要有正弦波微動。
所有時間都從 fps 衍生，透過 useVideoConfig()。不允許使用魔術幀數字。
專案頂部只使用一個主題物件（顏色、緩動、彈簧預設、字型）。永遠不要在組件中內聯十六進位顏色或緩動。
渲染、提取影格、查看它們、修正、重新渲染。 絕不交付未經驗證的渲染。此循環是強制性的——請參閱下方的驗證。

工作流程

第一步——範圍界定

確定：時長、fps（預設 30；只有重度快速運動才用 60）、尺寸（Reels/Shorts 用 1080×1920，橫向用 1920×1080）、有哪些素材（圖片、影片、音檔、Logo），以及這是新建合成還是編輯現有專案。如果是編輯現有專案：先完整閱讀 src/，找到主題（或建立一個），並在添加功能之前重構違反上述規則的部分。

第二步——設定

新建專案：

npm install remotion @remotion/cli react react-dom
# 可選：@remotion/transitions @remotion/motion-blur @remotion/google-fonts

從此技能複製 assets/theme.ts 到 src/theme.ts，並根據使用者的品牌調整色板。目錄結構：src/index.ts (registerRoot) → src/Root.tsx (Composition, duration/fps/size) → src/scenes/*.tsx → src/components/*.tsx。使用者素材放在 public/，透過 staticFile() 載入。

第三步——建構

閱讀 references/motion-patterns.md 以了解可複用的組件實作（BgMesh, Grade, Grain, Vignette, KenBurns, WordReveal, Stagger, Counter, Spark, transitions, parallax）。從這些模式中組合場景。有關節奏、韻律、字體排印、色板與聲音設計規則，請閱讀 references/design-rules.md。

場景節奏：重點 → 停頓（15-20 靜止幀）→ 建構 → 重點。前 15 幀內必須有東西在動。連續超過 90 幀沒有新的視覺元素。

第四步——渲染

npx remotion render src/index.ts <CompId> out/video.mp4 --codec h264 --crf 17

Remotion 需要一個 Chromium 二進位檔。如果自動下載失敗（沙箱、離線 CI），找到一個並明確傳入路徑：

which chromium chromium-browser google-chrome 2>/dev/null
ls /opt/pw-browsers 2>/dev/null   # Playwright 安裝在此處
npx remotion render ... --browser-executable=<路徑>

如果完整版 Chrome 報錯「Old Headless mode has been removed」，請改用 headless_shell 二進位檔（Playwright 提供一個，路徑為 chromium_headless_shell-*/chrome-linux/headless_shell）。

第五步——驗證（強制性，絕不可跳過）

在關鍵時刻提取影格並視覺檢查每個影格。便攜方法——在沒有系統 ffmpeg 的機器上也能運作，渲染精確影格：

for f in 15 45 90 150; do
  npx remotion still src/index.ts <CompId> out/check_$f.png --frame $f --overwrite
done

如果系統 ffmpeg 可用，從完成的 mp4 中提取也能驗證編碼本身（-ss 搜尋比 select= 篩選器更便攜，後者的引號在某些 shell 和 Remotion 捆綁的 ffmpeg 中會出問題）：

ffmpeg -v error -ss 1.5 -i out/video.mp4 -frames:v 1 check_1.png

檢查並修正，按頻率排序：

間距錯誤：gap/margin 使用 em 時，會根據父元素的字型大小（通常是 16px）解析，而不是文字大小——請在大號文字周圍的 flex 容器中使用 px 值。
文字溢出或觸碰畫面邊緣（9:16 比例下，關鍵內容保持在垂直方向的中間 75%——平台 UI 會遮蓋頂部/底部）。
元素在入場前或出場後仍可見（缺少 clamp）。
顏色/對比度失敗：每個影格中英雄色使用超過一個元素，調色層上的暗淡文字無法閱讀。
圖層順序錯誤（雜訊/暗角必須在最上層，調色層在內容上方）。

修正 → 重新渲染 → 重新提取 → 重新檢查。僅在通過乾淨檢查後才交付。然後執行 references/design-rules.md 底部的最終檢查清單。

編輯使用者的現有素材

若要增強現有的 mp4（字幕、調色、片頭/片尾），而非從頭建構：將檔案放在 public/，使用 <OffthreadVideo src={staticFile("clip.mp4")} /> 將其渲染為素材圖層，根據片段長度設定合成持續時間，並在其上方疊加圖形/調色/雜訊。在設定合成之前，使用 ffprobe 獲取片段的持續時間和 fps。關於語音同步字幕，請參閱 references/motion-patterns.md 中的字幕章節。

參考檔案

references/motion-patterns.md——複製貼上元件庫：背景、調色/雜訊/暗角、Ken Burns、文字揭示、計數器、轉場、視差、音訊同步、字幕。在撰寫組件前閱讀。
references/design-rules.md——色板、字體排印規則、場景架構、聲音設計、交付前檢查清單。在設計場景和最終交付前閱讀。
assets/theme.ts——要複製到每個專案中的主題模板。

需主動避免的常見失敗模式

將 Emoji 當作圖示。 Emoji 會渲染為全彩色的平台字型（綠色 ✳️、藍色 🌐），它們會忽略你的色板並默默地打破一條英雄色的規則，而且它們會坐在你給它們的任何背景上（橘色吉祥物在橘色方塊上 = 隱形）。請使用 CSS/SVG 以主題色繪製圖形，或對照提取的影格驗證每個 emoji。
沒有音效素材不是交付無聲影片的理由。 從 Node 腳本合成最小音效包作為 16-bit WAV 檔案（噪音爆發呼嘯聲、音調下降的爆裂聲、正弦重擊 kick/bass、失諧正弦 pad）到 public/sfx/——請參閱儲存庫中的 examples/scripts/。零下載，完全可重現。
產生一個巨型組件，而不是主題化、可複用的片段。
durationInFrames 在 Composition 與場景內容之間不匹配（靜默空白）。
重新渲染時忘記 --overwrite，然後檢查舊檔案。
字型：永遠不要依賴系統預設字型來顯示英雄文字；透過 @remotion/google-fonts 或 @font-face + staticFile 載入顯示字型。
嘗試向使用者「描述」結果，而不是渲染並驗證它。

Remotion 動態圖形專業技能