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 值得放进工具箱里。它不是传统剪辑软件的替代品，而是把视频生产接入软件工程流程的一种方式。

前端工具 on KnightLi的博客