视频即代码,用 React 写
用 Remotion,视频是写出来的:你写 React 组件,每一帧都从代码渲染,所以凡是你能用 React、CSS、SVG、Canvas 或 WebGL 表达的,都能变成视频。回报是自动化:喂进 JSON 或一个 API 响应,就能渲染上百个个性化视频,这是时间轴编辑器做不到的数据驱动产出。截至 2026-06 有 50,261 星、每隔几天发一版,它是 JavaScript 世界里程序化视频的主导工具。
生态很广:用于预览和编辑的 Studio、把视频嵌进你自己应用的 Player,以及在云端规模化渲染的 Lambda。
它做什么
你定义一个 composition(尺寸、时长、帧率)和一些读取当前帧、据此渲染的组件,用 hook 驱动动画。因为它是 React,你复用已有的 web 技能和组件库。招牌用例是参数化视频:一个模板加数据产出许多变体,个性化的年度回顾视频就是这么做的。
安装
npx create-video@latest它会搭好一个项目;npm start 打开 Studio,npm run build 渲染输出,Lambda 那几个包配好后处理云渲染。本地渲染用 headless Chromium,所以预期一个不小的依赖和每次渲染的真实 CPU 时间。
留意许可证
这是会让团队措手不及的细节,所以在用 Remotion 做产品前先把它定了:它不用标准开源许可。个人、非营利组织、小型营利公司可以免费用,但超过一个小员工门槛(三人以上)的营利公司需要购买付费的 Company License。代码在 GitHub 上、可读,但「在 GitHub 上」不等于对每家企业免费。读 LICENSE;你公司过了那个门槛,就先把授权预算留出来再采用。
适合与不适合
想要从代码生成数据驱动或个性化视频、团队已经用 React、或想把渲染好的视频嵌进 web 产品时,Remotion 是对的工具。论程序化视频的规模化,JS 生态里没有别的能匹敌它的成熟度。
它吃力的地方:你只想手动剪片段的话,它替代不了时间轴编辑器;学习曲线默认你 React 熟练;本地渲染因为 Chromium 而重;Lambda 云渲染成本真实、且没有一个简单计算器覆盖。而对过了授权门槛的公司,成本问题是决策的一部分。
remotion 和替代品的对比
| Remotion | Revideo | |
|---|---|---|
| Stars | 50,261 | 3,854 |
| 范式 | React 组件 | Motion Canvas 风格 TypeScript |
| 维护 | 非常活跃,每隔几天发版 | 放缓,最后推送在 2025 年中 |
| 许可 | 个人和小公司免费,大公司付费 | MIT |
| 适合 | React 里的数据驱动视频 | 自托管渲染管线 |
数字为截至 2026 年 6 月的 GitHub 数据。Revideo 走 Motion Canvas 风格、完全 MIT,但小得多、维护也放缓了,所以作为生产底座风险更高。Remotion 的取舍相反:一个成熟、活跃维护的工具,但对较大公司是要花钱的许可。
star 曲线
star 曲线反映的是作为 React 开发者程序化视频首选工具的稳步、持续采用,靠生成个性化视频的爆款展示项目助推。每周多版的快节奏,印证了活跃维护的故事。
issue 区给你的预警
反复出现的主题是性能和打磨这类细节。渲染可能慢、依赖 Chromium,某些 Node 版本在 composition 选择上引入过阻塞行为。复杂版面和转场偶尔重叠或出错。Lambda 渲染成本不自己测就难预测。字体和资源加载需要服务端配置,文档可以讲得更清楚。这些都不削弱核心价值,是从代码渲染视频的运维细节。
相关仓库
要 Motion Canvas 风格的替代,看 Revideo。要 AI 驱动的短视频,看 MoneyPrinterTurbo 和 ShortGPT。想看什么在涨,见 每日榜 和 每周报告。
常见问题
Remotion 商用免费吗? 对个人、非营利、小型营利公司,免费。超过一个小员工门槛(三人以上)的营利公司需购买付费 Company License。采用前读 LICENSE、查你公司规模。
Remotion 还是 Revideo,该用哪个? Remotion 用 React、维护非常活跃、生态成熟,但对较大公司需付费许可。Revideo 完全 MIT、Motion Canvas 风格,但小得多、维护更慢。要生产级 React 工作流选 Remotion;更看重 MIT 许可和自托管管线选 Revideo。
Remotion 能批量生成个性化视频吗? 能,这正是它的核心强项。一个 composition 加数据(JSON 或 API)渲染出许多变体,规模化的个性化和数据驱动视频就是这么做的。
Lambda 渲染要多少钱? 随分辨率、帧率、编码器、AWS 区域而变,没有简单的官方计算器。按你的设置自己测,再定预算;每个视频的渲染成本是真实的。
Remotion 需要 Chromium 吗? 本地渲染需要,它用 headless Chromium,加一个不小的依赖和每次渲染的 CPU 时间。Lambda 渲染在云里跑 Chromium,所以本地不用装。