视频就是 React 组件，Remotion 让 agent 用代码出片

给 agent 配一套视频制作工具，是这个系列的主线。前面写过写 HTML 就能出片的 HyperFrames、动画引擎 anime.js 和开源剪辑器 OpenCut，这一篇补上资历最老、也最像基础设施的一个：Remotion。仓库 2020 年创建，目前 6.8 万星，最新版 v4.0.539 在 10 月 26 日发布，npm 月下载 813 万，440 多位贡献者。README 第一句话就是「Video tools for the agent era」，定位写得直白。

一、视频是「图像随时间的函数」

官方文档给的心智模型只有一句话：A video is a function of images over time。落到代码上，一段视频就是一个 React 组件，每一帧按当前帧号渲染一次画面：

tsx

import { AbsoluteFill, useCurrentFrame, Composition } from "remotion";

const MyComposition = () => {
  const frame = useCurrentFrame();
  return (
    <AbsoluteFill style={{ justifyContent: "center", alignItems: "center", fontSize: 100 }}>
      The current frame is {frame}.
    </AbsoluteFill>
  );
};

export const RemotionRoot = () => (
  <Composition id="MyComposition" component={MyComposition}
    durationInFrames={150} fps={30} width={1920} height={1080} />
);

useCurrentFrame() 告诉组件现在渲染第几帧（从 0 开始），配合 interpolate() 把帧号映射成位移和透明度，或者用 spring() 做弹性动画，画面就这样逐帧确定下来。Composition 负责把组件和视频元数据（宽高、帧率、时长）绑在一起，注册后既能在本地 Studio 里实时预览，也能用 Node.js API 渲染成片：起一个无头浏览器逐帧截图，再交给 FFmpeg 编码，成片和浏览器里看到的表现完全一致。做好的视频还能反过来嵌回网页，官方的 Player 组件就是干这个的。

Remotion 仓库主页：6.8 万星、440 多位贡献者

二、官方把 agent 当一等公民

大多数老项目是「顺便能被 AI 用」，Remotion 是明着往这个方向做。README 列出的第一种用法就是 Make videos agentically：让编码 agent 把想法变成视频，React 代码是唯一事实源，想加交互编辑或程序化批量生成，随时切换。

配套也齐：文档超过 1000 页，另有专门的 Agent Skills 页面和提示词页面，等于官方替你写好了喂给 Claude Code 的说明书。组件库把视频常用件拆成现成积木，Elements、Effects、Shapes、Transitions、Sound Effects、Captions、Fonts 都有独立文档页，agent 拼装时不需要凭空发明。上手仍然是一条命令：npx create-video@latest。

方向相同的还有 HeyGen 的 HyperFrames，走「写 HTML 渲染视频」的路线；Remotion 押注的是 React 生态，换来类型系统、npm 生态和六年沉淀的工程能力。

Remotion 官网：Video tools for the agent era

三、批量出片与两层协议

Remotion 真正的护城河在规模化。README 在自动化一节写的场景是「在自己的基础设施上批量渲染百万级视频」，比如按观众名字定制的营销视频、批量生产的赛事集锦；要托管并行，官方还有跑在 AWS Lambda 上的渲染方案，和 Node.js API 并列在文档的 Rendering 分类下，是主推能力而不是附加品。

Remotion Pro：公司许可的购买入口

要注意它不是 MIT 协议。LICENSE.md 写得很清楚：个人、3 人及以下的营利组织、非营利组织可以免费使用，包括商用；更大的营利公司需要购买 Company License。条款里还预告 5.0 版会微调协议，正式用在产品里之前值得再确认一遍。对个人开发者和 agent 工作流来说，免费层完全够用。