代码写视频，批量生成百万个？这款 GitHub 5.3万星的开源框架有点东西

代码写视频，批量生成百万个？这款 GitHub 5.3万星的开源框架有点东西

如果你还在用 Premiere 手工剪辑视频，或者用 After Effects 做动效——说实话，你可能错过了过去一年最酷的编程玩法之一。

Remotion 是一个用 React 构建视频的开源框架。对，你没看错：React。

它的工作逻辑很简单：把视频拆成多个「图层」组件，用代码控制每一帧的呈现方式。你可以用 CSS 做动画、用 WebGL 画图、用数据驱动视频生成——最后导出成真正的 MP4 文件。

这个项目在 GitHub 上有 53k+ stars，每月 npm 安装量突破 500 万次，Fireship、GitHub Unwrapped 这些知名项目都在用。这不是小众玩具，是被生产环境验证过的框架。

它解决了什么问题？

传统视频制作的痛点：无法版本控制、无法批量生成、无法和代码流程集成。

Remotion 把这些问题全扫了：

版本控制：视频就是代码，git commit、PR、code review 全支持，改一行参数就能重现历史版本。

数据驱动：写一个视频模板，往里灌不同的 JSON，数据一变，视频自动生成。上传 1000 个用户的年终总结视频？写一次组件，跑一遍循环就完事。

CI/CD 集成：视频渲染直接进流水线，定时任务自动出视频——不用人盯着。

GitHub Unwrapped 每年给全球几亿用户出的个性化年度回顾视频，背后就是这套打法。

怎么跑起来？

npx create-video@latest my-video
cd my-video
npm run start

两分钟跑起来，有个本地预览服务器，修改代码实时刷新效果。

核心逻辑三个 API 搞定：

import { Sequence, useVideoConfig, useCurrentFrame, interpolate } from "remotion";

// 旋转动画：0~30帧转360度
const SpinningLogo = () => {
  const frame = useCurrentFrame();
  const rotation = interpolate(frame, [0, 30], [0, 360]);
  return <div style={{ transform: `rotate(${rotation}deg)` }}>Logo</div>;
};

useVideoConfig() 取帧率和时长，interpolate() 做帧间插值动画。剩下的就是 React 组件组合。

规模化怎么弄？

本地渲染适合开发调试，生产级靠 Remotion Lambda：把渲染任务拆分到 AWS Lambda 分布式跑，一个 10 分钟的视频本地渲染 10 分钟，Lambda 上可能几十秒搞定。

配上 S3 + SQS，就是全自动视频流水线。

适合谁用？

• 数据可视化转视频：Dashboard 截图太无聊，把数据灌进 Remotion 组件，自动出动态图表视频
• 营销视频批量生产：一个人的个性化视频，模板一次，生成一万份
• AI 视频工作流：配合 Cursor/Claude Code，写 prompt 让 AI 直接帮你出视频

不适合谁？

复杂非线性剪辑、实时协作类需求，它不是替代剪辑软件的工具——它是程序员做视频的最高效姿势。

GitHub：https://github.com/remotion-dev/remotion

5.3 万星，实际跑起来比听起来还要离谱。建议先拉官方 Examples 看看这玩意到底能做什么。

GitHub: https://github.com/remotion-dev/remotion