Remotion 影片建置器
您的 Remotion 知識可能已過時。當需要精確的 API 行為時，請優先使用官方的 remotion-documentation MCP 伺服器或參考 remotion.dev 文件。
開始使用
- 如果專案尚未存在，請使用
npx create-video@latest建立初始架構，並偏好空白範本。 - 確保所有
remotion和@remotion/*套件使用完全相同的版本，避免使用插入號範圍。 - 標準進入點結構：
src/index.ts呼叫registerRoot()src/Root.tsx透過<Composition>或<Still>註冊所有影片
建置順序
- 首先建立輸入契約模型：
- 頂層 props schema
- 時間軸或事件資料
- 渲染設定檔
- 使用
zod定義共享 props，並將 schema 傳遞給每個<Composition>。 - 使用
calculateMetadata推導出durationInFrames、width、height、轉換後的 props 以及defaultOutName。 - 使用
<Series>建立敘事順序，使用<Sequence>處理重疊、畫面進入、影片視窗與文字標註。 - 在 Remotion v4.x 專案中，為需要在顯示前預載素材的
<Sequence>元素明確設定premountFor。 - 在調整動畫效果之前，先加入範例資料與渲染腳本。
預設值與規則
- 除非簡報另有指定，否則預設使用
fps={30}及1920x1080橫向解析度。 - 使用
AbsoluteFill進行圖層堆疊。 - 使用
staticFile()處理來自public/的檔案。 - 使用
useCurrentFrame()和useVideoConfig()進行基於幀的邏輯。 - 偏好細微的動畫效果：
- 使用高阻尼的
spring() - 使用帶有 clamp 的
interpolate()
- 使用高阻尼的
- 不要使用
Math.random()，請改用remotion中的random(seed)。 - 保持文字動畫簡單且易讀。
- 除非簡報確實需要分離，否則保持橫向與直立輸出的業務邏輯一致。
參數化影片檢查清單
- 一個共享的頂層
z.object()schema - 與元件 prop 結構相符的
defaultProps - 當輸入需要時，由
calculateMetadata回傳動態的持續時間或尺寸 - 用於本地預覽的範例 JSON 或 TypeScript 資料
- 每個目標輸出的渲染腳本
素材策略
當素材為選用時，至少支援以下模式：
noneplaceholderreal
即使沒有真實素材，時間軸與重疊圖層仍應正常渲染。
Millrace 啟動影片
如果請求涉及 Millrace 或啟動影片管道，請在實施前閱讀 references/millrace-launch-video.md。