01AGENTIC
让 AI 编程代理直接做视频
Remotion 官方维护 Agent Skills，给 Claude Code、Codex、Cursor 等工具补上构图、时间、字幕、音频和渲染的项目规范。AI 写的是可继续修改的 React 代码，不是一个封闭黑盒结果。
- Skills
- Prompts
- 可审查代码
01 / Plain-language idea
先别把它想成剪辑软件，
把它想成一个会导出视频的网页项目。
写普通 React 页面时，数据决定页面显示什么。写 Remotion 时，除了数据，还多了一个“当前是第几帧”。第 0 帧让标题在下面，第 30 帧让标题回到中间，第 150 帧结束，连续播放这些画面，就成了视频。
它不是“免费的 Premiere”。
Remotion 的强项不是让你拿鼠标逐刀剪片，而是把动画、字幕、数据和品牌样式做成可复用组件。一次写好，可以换数据重复生成一百条、一万条视频。
- INPUT
数据或一句需求
商品、榜单、天气、字幕、接口数据，也可以是给 AI 编程代理的提示词。
- REACT
组件搭出画面
文字、图片、音频、视频、SVG、Canvas 和 3D，都能成为画面的一部分。
- FRAME
每一帧算状态
用当前帧、帧率和插值函数，计算位置、透明度、大小和播放进度。
- PREVIEW
Studio 实时预览
像看网页热更新一样拖动时间轴，检查每一帧是否符合预期。
- OUTPUT
渲染成视频
本地 CLI、Node.js、Lambda 或 Vercel 把画面编码成最终文件。
02 / Frame lab
拖一下时间轴，就能理解 Remotion 的核心
下面这段 5 秒动画共有 150 帧，帧率是 30 FPS。播放或拖动滑块，观察同一个 React 元素如何根据“当前帧”改变位置与透明度。
INTRO · 0–29
HELLO, VIDEO
00:00.00
Text
Scenes
Audio
0s1s2s3s4s5s
<Title />
Intro
Main
Outro
music.wav
03 / What it unlocks
它真正卖的不是“动画”，而是可重复的视频生产能力
官方现在把 Remotion 定位为“AI 代理时代的视频工具”。代码是唯一事实来源，因此你可以在 AI 生成、可视化编辑和手工编程之间切换，而不用丢掉工程结构。
02PROGRAMMATIC
把数据批量变成视频
同一个 Composition 接收不同 props，就能生成不同姓名、价格、图表、语言和画幅的视频。适合日报、商品广告、赛事集锦、房源视频和个性化内容。
- Props
- API 数据
- 批量渲染
03INTERACTIVE
在 Studio 里预览和调参数
Studio 提供时间轴、逐帧预览、参数面板和渲染入口。官方也在推进拖拽与交互编辑，但组件需要按交互规范实现，它并不会自动把任意 React 页面变成成熟剪辑器。
- 时间轴
- 热更新
- 可编辑组件
04APPLICATIONS
把视频能力嵌进自己的产品
Player 能把 Composition 放进 React 应用并在运行时换参数；Renderer、Lambda、Vercel 与 Editor Starter 则帮助团队搭建视频生成服务或自有编辑器。
- Player
- Node.js
- Serverless
Agent era
对不熟动画的人，AI 把“起步门槛”降下来了
你可以先说“做一个从洛杉矶飞到纽约的地图动画”，让编程代理搭第一版，再在代码里精修颜色、节奏和数据。这比从空白时间线开始更容易，但 AI 生成结果仍需要人工预览和校对。
- 创建空白 Remotion 项目并安装官方 Skills。
- 用自然语言描述画面、时长、画幅和节奏。
- 在 Studio 中逐帧检查，再让代理按反馈修改。
04 / Architecture
一条从数据到 MP4 的清晰流水线
Remotion 是一个大型 TypeScript monorepo，但第一次使用不必理解一百多个 package。先记住下面五层，就知道每个工具放在哪里。
01 · INPUT
Props / 数据 / Prompt
同一模板的可变内容，决定文字、素材、颜色与结构。
02 · CORE
React Composition
组件加上宽、高、FPS 和总帧数，组成可渲染视频。
03 · PREVIEW
Studio / Player
Studio 用于开发调试，Player 用于嵌入自己的 React 应用。
04 · RENDER
CLI / Node / Cloud
在本地、服务器、Lambda 或 Vercel 中计算与编码画面。
05 · OUTPUT
视频 / 音频 / 图片
输出 H.264、H.265、AV1、WebM、GIF、音频或静态帧。
Code is the source of truth
真正关键的是：最终决定画面的仍然是代码
useCurrentFrame() 告诉组件“现在播放到第几帧”；<Composition> 定义画幅、帧率和时长；<Sequence> 像时间线片段一样决定某个组件从哪一帧出现。Studio、AI 和拖拽交互，本质上都在帮助你生成或修改这份代码。
05 / Beyond a single video
从一条视频，扩展到播放器、编辑器和渲染集群
Remotion 的上限不只是“导出一个 MP4”。它更像视频产品的底层积木：前台可交互，后台可批量渲染，中间仍然共享 React 组件。
Remotion Studio
开发时逐帧预览、修改 props、查看时间线并触发渲染。它服务于开发工作流，不等同于完整非线性剪辑软件。
自动化与云渲染
Node.js API、AWS Lambda、Vercel Sandbox 等路径，可以把渲染放进后端任务与产品流程。
Editor Starter 与自有视频产品
官方提供 Editor Starter 作为可定制起点。截图展示的是基于 Remotion 构建编辑体验的可能性，不代表核心库安装后自动拥有同等成品界面。
不是只有字幕平移
官方生态覆盖转场、形状、字体、字幕、音效、Lottie、Three.js、噪声、光效和媒体解析。复杂度仍由 React 组件组织。
06 / Quick start
五分钟建立正确的第一条工作流
不要从克隆 Remotion monorepo 开始。普通使用者应该用官方脚手架创建自己的视频项目；仓库源码主要用于参与开发和研究内部实现。
# 创建空白项目，并启用 Tailwind 与 Agent Skills npx create-video@latest --yes --blank my-video cd my-video npm i npx remotion skills add # 启动 Remotion Studio npm run dev
import {AbsoluteFill, interpolate, useCurrentFrame} from 'remotion'; export const HelloVideo = () => { const frame = useCurrentFrame(); const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: 'clamp', }); return ( <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: 'white', fontSize: 120, }}> <h1 style={{opacity}}>你好，Remotion</h1> </AbsoluteFill> ); }; // 在 Root.tsx 中注册成可渲染视频 <Composition id="HelloVideo" component={HelloVideo} durationInFrames={150} fps={30} width={1920} height={1080} />
# 把 HelloVideo 渲染成 H.264 MP4 npx remotion render HelloVideo out/hello.mp4 # 不写 Composition ID 时，CLI 会让你选择 npx remotion render # 传入一份 JSON 数据，批量复用同一模板 npx remotion render HelloVideo out/alice.mp4 --props=alice.json
Node.js ≥ 16当前 v4 核心最低版本；新项目建议使用仍受维护的 LTS。
macOS ≥ 15当前 main 文档标注 Sequoia 或更高版本。
glibc ≥ 2.35Linux 还需额外系统包；部署前核对官方依赖页。
Not supported当前文档明确写明 Alpine Linux 与 NixOS 不受支持。
开始前，记住四条“可重复渲染”规则
Remotion 会并行、甚至乱序计算不同帧。只要画面依赖现实时间或不确定状态，Studio 里看似正常，正式渲染时就可能闪烁或前后不一致。
时间只听当前帧
视频内部不要用 CSS animation、transition、setTimeout 或 setInterval 推进动画；用 useCurrentFrame() 计算状态。
随机也要可复现
不要直接调用 Math.random()。使用 Remotion 带种子的 random()，确保同一帧每次得到相同结果。
时长需要自己定义
框架无法可靠地从任意组件内容推断完整时长。动态视频应通过 metadata 或业务数据明确计算总帧数。
认清运行边界
浏览器端渲染当前仍是 Alpha，也不适合直播广播。大型任务要评估分辨率、并发、编码器、内存和云资源成本。
07 / Fit check
什么项目值得用，什么项目不必硬上
判断标准很简单：内容是否需要“模板化、数据化、自动化或产品化”。如果答案都是不需要，传统剪辑工具往往更直接。
更适合 Remotion
- 批量个性化视频：名字、商品、价格、榜单、语言或画幅需要按数据变化。
- 品牌动效系统：团队想把片头、字幕、图表、转场沉淀成统一组件。
- AI 辅助动态图形：希望让编程代理生成第一版，再持续用代码精修。
- 视频 SaaS 或内部工具：需要网页预览、参数编辑和后端自动渲染。
- 开发者主导的内容：熟悉 React，愿意用测试、版本控制和组件复用管理视频。
先用别的工具更省事
- 一次性的口播粗剪：主要工作是挑片段、删停顿和手动听音频。
- 完全不想碰代码：只接受成熟图形界面，不准备配置组件或开发环境。
- 复杂人工调色与声音后期：专业 NLE、调色与 DAW 工具仍有更完整工作台。
- 想自动得到完美成片：AI 可以搭框架，但审美、素材权利和逐帧质量仍需人负责。
- 商业许可尚未核清：超过免费许可范围的营利组织，应先确认 Company License。
| 工具路线 | 最自然的操作方式 | 最擅长 | 主要代价 |
|---|---|---|---|
| 剪映 / Premiere | 鼠标操作素材与时间线 | 人工剪辑、快速审片、成熟后期流程 | 大量重复版本不易自动化 |
| After Effects | 图层、关键帧、表达式 | 精细动效、合成与视觉设计 | 工程数据化和 Web 产品集成成本较高 |
| Remotion | React 组件、数据和当前帧 | 模板复用、批量生成、AI 编程、产品集成 | 需要前端开发能力，并承担渲染与许可判断 |
≤ 3employees · free tier
源码公开，不代表所有公司都能无条件免费
Remotion 使用自己的双层许可。个人、不超过 3 名员工的营利组织、非营利组织，以及非商业评估可以免费使用；不在免费范围内的营利组织需要购买 Company License。它也禁止把修改后的 Remotion 衍生版本拿去售卖、出租或再次许可。
可以免费商用的典型情况个人创作者、小团队（最多 3 名员工）、非营利组织，前提是用途符合许可原文。
商业团队务必再次核对当前许可文件还提示 Remotion 5.0 将调整条款，决策前以官方最新许可页为准。
一句话结论：
它是“视频领域的 React 工程化”。
如果你只剪一条片，Remotion 未必更快；如果你要把同一套设计稳定地产出成一百条视频，或者把视频生成做进产品，它的价值就会非常清楚。