thedixitjain/the-mega-skill-library

Remotion 影片建構器

您的 Remotion 知識可能已過時。當需要確切的 API 行為時，請優先使用官方 remotion-documentation MCP 伺服器或瀏覽 remotion.dev 文件。

從這裡開始

• 如果專案尚未存在，請使用 npx create-video@latest 建立脚手架，並偏好空白範本。
• 保持所有 remotion 和 @remotion/* 套件版本完全相同，並避免使用 caret 範圍。
• 標準進入點結構：
  • src/index.ts 呼叫 registerRoot()
  • src/Root.tsx 使用 <Composition> 或 <Still> 註冊所有影片

建置順序

1. 首先建立輸入合約：
   • 頂層 props schema
   • 時間軸或事件資料
   • 渲染設定檔
2. 使用 zod 定義共享 props，並將 schema 傳遞給每個 <Composition>。
3. 使用 calculateMetadata 推導出 durationInFrames、width、height、轉換後的 props 以及 defaultOutName。
4. 使用 <Series> 建立敘事順序的場景結構，並使用 <Sequence> 處理重疊、出場、影片視窗和標註。
5. 在 Remotion v4.x 專案中，為那些需要在出現前載入資源的 <Sequence> 元素明確設定 premountFor。
6. 在打磨動畫之前，加入範例資料和渲染腳本。

預設值與規則

• 除非簡報中有其他說明，否則預設 fps={30} 和 1920x1080 橫向解析度。
• 使用 AbsoluteFill 進行圖層疊加。
• 使用 staticFile() 引用 public/ 目錄中的任何檔案。
• 使用 useCurrentFrame() 和 useVideoConfig() 實現基於影格的邏輯。
• 偏好細微的動畫：
  • 使用高阻尼的 spring()
  • 使用帶有 clamping 的 interpolate()
• 不要使用 Math.random()，應使用 remotion 中的 random(seed)。
• 保持文字動畫簡單且易讀。
• 除非簡報確實需要分歧，否則保持橫向和直向輸出使用相同的業務邏輯。

參數化影片檢查清單

• 一個共享的頂層 z.object() schema
• defaultProps 符合元件 prop 結構
• 當輸入需要時，calculateMetadata 返回動態的持續時間或尺寸
• 用於本地預覽的範例 JSON 或 TypeScript 資料
• 每個目標輸出都有的渲染腳本

影片素材策略

在影片素材為可選的情況下，支援以下模式：

• none
• placeholder
• real

當沒有真實影片素材時，時間軸和重疊內容仍應正常渲染。

Millrace 啟動影片

如果請求是關於 Millrace 或啟動影片管線，請在實作前先閱讀 references/millrace-launch-video.md。

參考資料

• references/remotion-core.md
• references/millrace-launch-video.md

---

來源： hashgraph-online/awesome-codex-plugins → plugins/tim-osterhus/codex-remotion-plugin/skills/remotion-video-builder/SKILL.md