Remotion：用 React 以程式化方式生成影片

Wed, 27 May 2026 14:39:22 +0800

remotion-dev/remotion 是一個用 React 以程式化方式建立影片的框架。它把影片製作從傳統時間軸工具裡抽離出來，變成可以用元件、狀態、資料、API、CSS、Canvas、SVG、WebGL 和演算法控制的前端工程問題。

專案地址：remotion-dev/remotion

這類工具很適合今天的 AI 編程工作流程：如果一個 agent 能生成網頁、圖表和資料視圖，它也可以繼續生成影片腳本、動畫元件和可渲染的短片。

Remotion 解決的是什麼問題

傳統影片工具擅長人工剪輯，但不擅長規模化、參數化和自動化。

例如這些任務：

為每個使用者生成一支個人化年度回顧影片
根據資料庫自動生成產品示範影片
把圖表、程式碼片段和講解字幕組合成技術短片
批次生成行銷素材、社群媒體短影片或課程片段
用 CI/CD 或後端服務按需渲染影片

如果使用傳統剪輯軟體，這些任務很難完全自動化。Remotion 的做法是把影片當成 React 應用來寫：每一幀都是元件和資料在某個時間點的結果。

為什麼是 React

Remotion README 裡給出的理由很清楚：React 可以複用 Web 技術和元件化能力。

它讓你可以使用：

CSS 做版面配置和動畫
SVG 做向量圖形
Canvas 和 WebGL 做複雜繪製
JavaScript / TypeScript 做變數、函式、API 呼叫、數學和演算法
React 元件做複用、組合和快速迭代

這意味著前端開發者不需要重新學習一套完全陌生的影片 DSL。許多既有的 UI、圖表、設計系統和資料邏輯，都可以遷移到影片生成場景裡。

快速開始

如果已經安裝 Node.js，README 給出的入口命令是：

`1`	`npx create-video@latest`

建立專案後，你通常會撰寫 React 元件來描述畫面，再讓 Remotion 逐幀渲染輸出影片。

更完整的文件可以看：

文件：remotion.dev/docs
API Reference：remotion.dev/api

它適合哪些場景

Remotion 最適合「影片內容由資料或程式碼驅動」的場景。

個人化影片

例如年度回顧、使用者成就、訂單總結、學習報告。每個使用者的資料不同，但視覺結構相同。用 React 元件加資料驅動，會比手工剪輯更自然。

技術示範影片

如果影片裡包含程式碼、圖表、產品介面、步驟動畫和說明文字，Remotion 很適合把這些元素組織成可重複渲染的模板。

資料影片和圖表動畫

資料視覺化本來就是前端強項。Remotion 讓圖表不僅可以出現在網頁裡，也可以沿著時間軸進入影片。

AI 生成影片工作流程

AI agent 可以先生成腳本和素材結構，再生成 Remotion 元件，最後渲染影片。這比讓模型直接生成最終影片更可控，因為中間產物是程式碼，可以檢查、修改、版本管理和複用。

對 AI 編程工具的意義

Remotion 對 Codex、Claude Code、Cursor、Gemini CLI 這類 AI 編程工具特別有意思。

原因是影片生成被拆成了開發任務：

生成 React 元件。
調整樣式和版面。
接入資料。
預覽畫面。
根據回饋修改。
渲染輸出。

這套流程非常適合 agent：每一步都有檔案、有程式碼、有預覽、有明確回饋。相較於「直接生成一個影片檔」，程式碼化影片更容易被審閱和迭代。

如果再結合瀏覽器側邊欄、截圖檢查、自動化渲染和評論回饋，Remotion 可以成為 AI 工作流程裡的影片產物層。

使用前要注意授權

Remotion README 特別提醒：Remotion 有特殊授權，在某些公司使用場景下需要取得 company license。

所以不要只把它當成普通 MIT 小工具來用。個人專案、開源專案、商業專案、企業內部工具，授權要求可能不同。正式用於公司生產前，應該先閱讀它的 LICENSE 頁面和官方授權說明。

這點很重要，尤其是把 Remotion 接進自動化內容生成、行銷素材生成或企業內部影片流水線時。

我的判斷

Remotion 的價值不只是「用 React 做影片」，而是把影片變成可程式化、可複用、可自動化的產物。

對普通前端團隊來說，它適合做資料驅動的影片模板。對 AI 工具來說，它更像一個穩定的輸出目標：模型不需要一次性生成黑盒影片，而是生成可讀、可改、可渲染的 React 程式碼。

如果你的內容需要批次生成、個人化生成、根據資料更新，或者需要讓 agent 反覆調整視覺細節，Remotion 值得放進工具箱裡。它不是傳統剪輯軟體的替代品，而是把影片生產接入軟體工程流程的一種方式。

Remotion on KnightLi的博客