视频已不再仅仅是娱乐的载体，它渗透进营销、教育、数据可视化的每一个角落。传统视频制作依赖剪辑软件、难以批量自动化、无法版本管理的痛点愈发突出。

为了解决这一痛点，一种名为“程序化视频创作”的理念应运而生，而 Remotion，正是这一领域的开创性框架。它彻底颠覆了我们对视频制作的认知，将复杂的视频编辑过程转化为开发者熟悉的代码编写体验。

Remotion

什么是 Remotion

Remotion 是一款基于 React 的开源前端框架，核心能力是让开发者使用 JSX、CSS、TypeScript 编写组件，编程式生成 MP4、WebM、GIF 等标准视频文件，底层依托 FFmpeg 完成帧渲染与编码，把视频制作变成前端开发任务。

它由 Jonny Burger 于 2021 年创建，凭借组件化、热预览、参数化、云端规模化渲染四大核心优势，成为开发者驱动视频生产的主流方案，全球月安装量超 140 万，GitHub 星标超 4.68 万。

其核心理念是：如果可以用代码描述一个网页，为什么不能用代码描述一个视频？

简单来说，Remotion 让你像开发一个 React 前端应用一样去“开发”一个视频。你不再需要打开 Premiere 或 After Effects 这类重型软件，而是通过编写组件、定义状态、应用样式来构建视频的每一帧。它将视频的时间轴概念与 React 的声明式 UI 结合，使得创建动态、数据驱动的视频变得前所未有的高效和灵活。

Remotion 的工作原理

Remotion 的工作流程可以概括为“声明、渲染、编码”三个步骤，其背后是对 Web 技术栈的极致利用。

声明式视频结构：在 Remotion 中，一个视频被称为一个“合成”。你使用 React 组件来描述视频的内容，比如一个包含背景、标题、Logo 的 Video 组件。这个组件的属性可以是静态的，也可以是动态的，比如从 API 获取的实时数据。

基于帧的渲染：Remotion 的核心在于 useCurrentFrame() 这个 Hook。它提供了当前正在渲染的帧数。开发者可以利用这个帧数，结合数学函数，来控制组件的样式。例如，让一个元素的 transform: translateY 属性随着帧数的增加而变化，就实现了垂直移动的动画。这种机制将时间（帧）与视觉变化直接关联起来。

浏览器预览与 Node.js 编码：开发阶段，Remotion 提供了一个内置的开发服务器，可以在浏览器中实时预览视频，并提供类似 Chrome DevTools 的调试体验。当你完成编码并准备导出时，Remotion 会在 Node.js 环境中，以极高的速度逐帧渲染这个 React 应用，生成一系列图片帧，最后利用 FFmpeg 将这些图片帧和音频文件编码封装成标准的 MP4、WebM 或 GIF 等视频格式。

代码如何赋予元素生命

在 Remotion 中制作动画，本质上是让 CSS 属性随着时间（帧）变化而变化。这主要依赖于 @remotion/interpolate 和 spring 等辅助函数。

关键帧插值：这是最基础的动画手段。通过 interpolate(frame, [0, 30], [0, 1])，你可以告诉 Remotion：在第 0 帧时，透明度是 0（完全透明）；在第 30 帧时，透明度是 1（完全不透明）。Remotion 会自动计算中间帧的透明度值，从而实现淡入效果。

物理弹簧动画）：为了获得更自然、更具弹性的动画效果，Remotion 提供了 spring 函数。它模拟了物理世界中的弹簧运动，通过配置 damping（阻尼）和 stiffness（刚度）等参数，可以让元素的入场和出场更加生动，而非机械的匀速运动。

时间序列控制：<Sequence> 组件用于控制子元素在时间轴上的位置。你可以设置一个 <Sequence from={60}>，这意味着该组件内的所有内容将在第 60 帧（假设帧率为 30fps，则是 2 秒后）才开始出现。这使得安排多个元素的出场顺序变得非常直观。

Remotion 快速部署流程

在本地电脑上部署和上手 Remotion 非常简单，它本质上就是一个标准的 Node.js + React 前端项目。你只需要按照以下 4 个步骤操作，就能快速搭建好开发环境：

1. 环境准备
在开始之前，请确保你的电脑上已经安装了以下基础环境：

• Node.js：建议安装 18.x 或更高版本。
• 包管理器：npm（随 Node.js 自带）或 yarn。
• 代码编辑器：推荐使用 VS Code。
• 硬件建议：内存建议 8GB 以上（推荐 16GB），因为视频渲染比较消耗 CPU 和内存资源。

2. 快速创建项目
打开终端（命令行工具），使用官方提供的脚手架工具一键创建项目。在终端中输入以下命令：

1
npx create-video@latest

执行后，终端会进入一个交互式向导，你只需要根据提示进行选择：

• 选择模板：初学者建议选择 Hello World 或 Blank 模板，结构最清晰。
• 输入项目名称：例如 my-remotion-video。
• 选择包管理器：选择 npm 即可。
• 是否使用 TypeScript：强烈建议选择 Yes，Remotion 对 TS 的支持非常完善。

等待命令执行完毕，项目就创建好了。

3. 安装依赖并启动预览
进入刚刚创建的项目文件夹，安装项目所需的依赖包，然后启动本地开发服务器：

1
2
3
4
5
6
7
8
# 进入项目目录

cd my-remotion-video



# 安装依赖

npm install



# 启动开发服务器

npm run dev

启动成功后，浏览器会自动打开 http://localhost:3000。你会看到 Remotion Studio 的界面，这里可以实时预览你编写的视频效果，并且支持像浏览器调试工具一样查看时间轴和组件状态。

4. 渲染并导出视频
当你在代码中写好视频动画，并在浏览器中预览满意后，就可以将其渲染导出为真正的 MP4 视频文件了。在终端中执行：

1
npm run build

或者使用渲染命令：

1
npm run render

Remotion 会在后台调用你电脑上的浏览器内核（Headless Chromium）逐帧渲染画面，并最终通过 FFmpeg 打包生成 MP4 文件，默认会保存在项目根目录的 out/ 文件夹下。

在首次运行或渲染时，Remotion 可能会尝试自动下载专用的 chrome-headless-shell。如果你所在的网络环境下载超时或报错，可以通过设置环境变量的方式，让它直接调用你电脑本地已经安装的 Google Chrome 浏览器来完成渲染。

现在，你就可以打开 src/ 目录下的 Root.tsx 或 Composition.tsx 文件，开始用 React 代码创作你的第一个视频了！

从本地项目到云端服务

最直接的方式是将 Remotion 项目部署在一台拥有足够计算资源（尤其是 CPU）的服务器上。当有视频生成请求时，后端服务调用 Remotion 的 Node.js API 进行渲染。这种方式适合内部工具或对数据隐私要求极高的场景。

Remotion 可以打包部署到 AWS Lambda、Vercel、Render 等云平台。这消除了服务器运维的负担，并能根据请求量自动伸缩。不过，需要注意云函数的执行时间限制和磁盘空间限制。

Remotion 官方提供了一套基于 AWS 的云渲染服务。它通过分布式计算，可以将长达数小时的视频渲染任务缩短到几分钟内完成。这对于需要大规模批量生成视频的 SaaS 应用来说，是最佳选择。它还提供了 REST API，方便与其他系统集成。

Remotion 不只是一个独立的库，它正在形成一个完整的生态系统。

• Remotion Player：这是一个 React 组件，允许你在网页中嵌入一个可交互的视频编辑器。用户可以在浏览器中实时修改视频的文本、颜色、图片等参数，并立即看到预览，非常适合定制化的视频生成网站。
• 丰富的插件：社区提供了大量插件来扩展功能，例如 @remotion/google-fonts 用于方便地加载谷歌字体，@remotion/media-utils 用于处理音频波形，@remotion/skia 用于集成 Skia 图形引擎进行更复杂的 2D 绘图。

除了上面介绍的外，使用 Claude 来辅助编写 Remotion 代码，或者是将 Claude 与 Remotion 结合起来也可以搞定自动化工作流。

在现在的 AI 编程热潮中，这种结合非常流行，通常表现为以下两种形式：

AI 辅助写 Remotion 代码：
因为 Remotion 本质上就是 React 代码，很多开发者会直接让 Claude 帮忙生成 Remotion 的视频组件、动画逻辑甚至完整的模板代码。比如，你告诉 Claude：“帮我用 Remotion 写一个文字逐字出现的淡入动画组件”，它就能非常精准地为你生成对应的 React 代码。

AI + Remotion 自动化视频生成链路：
这是一种更高级的玩法。开发者会搭建一个全自动的流水线，把大模型（如 Claude、GPT 或本地部署的大模型）和 Remotion 串联起来。

典型的流程是这样的：

1. 脚本生成：先让 Claude 根据一个主题自动生成视频脚本或文案。
2. 配音与字幕：将 Claude 生成的文案通过 TTS（语音合成）转为音频，甚至生成对应的字幕文件。
3. 视频渲染：最后，Remotion 接收这些由 AI 生成的文案、字幕和音频，自动渲染并合成出最终的成品 MP4 视频。

网上有很多类似的开源项目或教程（比如用 AI 自动生成抖音、小红书的图文视频），它们的核心逻辑就是“大模型出内容 + Remotion 出画面”。

Remotion 的出现，标志着视频创作门槛的一次重大降低。它让开发者无需学习复杂的视频编辑软件，就能利用编程思维高效地生成高质量、高度定制化的视频内容。无论是为电商平台自动生成带货视频，还是为教育平台制作动态课件，Remotion 都提供了一种优雅且强大的解决方案。随着 WebAssembly 和浏览器图形能力的不断增强，基于代码的视频创作无疑将成为未来内容生产的重要方向。