不会 AE/PR 也能做视频？用 React 写视频的 Remotion 上手实测

批量给客户出"年度数据报告视频"这类需求，很多人第一反应是两条路：要么找设计同学用 After Effects 套模板，要么自己写脚本调 FFmpeg。前者排期长、改数据靠手改；后者写起来又臭又长、还不好维护。

但这两条路其实都不太对——问题不在于选哪个工具，而在于这件事的本质是 “模板 + 数据 → 批量渲染”，跟自动生成 PPT 报告是一回事，只是输出格式变成了视频。

刷 GitHub 的时候看到有人提了一嘴 Remotion——一个"用 React 写视频"的框架。我半信半疑试了一周，现在把它推荐给同样被视频需求折磨的前端同学。

一句话定性：Remotion 让你用写 React 组件的方式，程序化地生成视频。你平时怎么写网页，就怎么写视频。这个项目目前在 GitHub 上有近 3 万 Star，最新版本到了 v4.x（2026 年初的发布），npm 上周下载量是几十万级别，算是这个方向里最活跃的那个。

它到底解决什么痛点

传统视频工具（比如 After Effects、Premiere）有几个绕不开的麻烦：

• 学习成本高：调关键帧、蒙版、特效，对非设计出身的人不友好。
• 没法版本控制：工程文件是二进制，Git 管不了，改一版就多一个文件。
• 难自动化：想给 1000 个用户各生成一段个性化视频？手工做显然不现实。
• 复用性差：一段好用的片头，换个项目往往得重新搭。

Remotion 的思路很直接：既然视频归根结底是"一帧一帧的画面"，而 React 最擅长描述"界面长什么样"，那干脆把每一帧交给 React 组件去画。画面怎么变，用代码算出来就行。

打个比方：传统做视频像用 Photoshop 一张张修图；Remotion 像用 Excel 公式批量生成报表——你定义规则，它替你把结果算出来。

我上手后的核心体验

一切都是 React 组件

你写的"视频"就是一堆 React 组件。平时会的 Hooks、组件复用、TypeScript，全部原样能用。对新手来说，这意味着几乎没有新东西要学——你会写网页，就会写视频。

用"帧"而不是"秒"来计时

Remotion 里时间的基本单位是帧（frame）：比如 30fps（每秒 30 帧）的视频，第 60 帧就是第 2 秒。

帧（frame）：视频里的一张静态画面，连续播放就成了动画。fps 是每秒播放的帧数。

这样做的好处是精确：动画从第几帧开始、到第几帧结束，写得清清楚楚，不会因为"0.5 秒"这种小数算错。

动画靠函数算出来

最常用的是两个函数：

• interpolate（插值）：把"第几帧"映射成"某个数值"，比如透明度从 0 渐变到 1。
• spring（弹簧）：做出带弹性的动效，类似手机 App 里图标弹一下那种感觉。

import { useCurrentFrame, interpolate, spring, useVideoConfig } from 'remotion';

export const MyComponent: React.FC = () => {
  const frame = useCurrentFrame(); // 当前是第几帧
  const { fps } = useVideoConfig(); // 拿到视频配置（帧率等）

  // 透明度：前 30 帧从 0 渐变到 1
  const opacity = interpolate(frame, [0, 30], [0, 1]);
  // 缩放：带弹簧效果的弹入
  const scale = spring({ frame, fps, config: { damping: 200 } });

  return <div style={{ opacity, transform: `scale(${scale})` }}>Hello</div>;
};

用 Sequence 拼时间轴

一段视频通常是"片头 + 正文 + 片尾"拼起来的。Remotion 用 Sequence 把不同组件按时间摆到时间轴上：

import { Sequence } from 'remotion';

export const MyVideo: React.FC = () => {
  return (
    <>
      <Sequence from={0} durationInFrames={30}><Intro /></Sequence>
      <Sequence from={30} durationInFrames={60}><MainContent /></Sequence>
      <Sequence from={90} durationInFrames={30}><Outro /></Sequence>
    </>
  );
};

from 是"从第几帧开始出现"，durationInFrames 是"持续多少帧"。这就相当于剪辑软件里把素材拖到时间轴不同位置。

跑通你的第一个视频

官方的脚手架一行命令就能起：

# 装好 Node 后直接跑，会帮你初始化项目
npx create-video@latest

# 或者用包管理器
npm create video@latest      # npm
yarn create video            # yarn
pnpm create video           # pnpm

初始化后，定义"成片"只需要一个 Composition：

Composition（合成）：可以理解为视频里一个独立的"成片"，每个成片有自己的尺寸、帧率、总时长。一个项目能定义多个成片。

// src/Root.tsx
import { Composition } from 'remotion';
import { HelloWorld } from './HelloWorld';

export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="HelloWorld"
      component={HelloWorld}
      durationInFrames={150}  // 总帧数：150 帧
      fps={30}                // 帧率：30
      width={1920}            // 宽
      height={1080}           // 高
    />
  );
};

成片里具体画什么，写在组件里：

// src/HelloWorld.tsx
import { useCurrentFrame, interpolate } from 'remotion';

export const HelloWorld: React.FC = () => {
  const frame = useCurrentFrame();
  const opacity = frame >= 20 ? 1 : frame / 20; // 前 20 帧淡入

  return (
    <div style={{ flex: 1, textAlign: 'center', fontSize: '7em', opacity }}>
      Hello World
    </div>
  );
};

本地预览和导出：

npm run dev    # 启动开发服务器，浏览器里实时预览、拖时间轴
npm run build  # 渲染导出成视频文件

我第一次跑通的时候挺惊喜的——改一行代码，画面立刻跟着变，跟写网页一模一样。

它适合干什么

从我这段时间和社区里看到的用法，Remotion 在下面几类场景特别顺手：

GitHub Unwrapped 就是官方用 Remotion 做的：每年给 GitHub 用户生成一段专属年度回顾视频。技术频道 Fireship 也用它快速产出视频。

和 AE / FFmpeg / MoviePy 怎么选

我整理了一张对比表，帮你判断什么时候该用谁：

一句话建议：如果你本来就是前端、要批量/自动化/数据驱动地出视频，Remotion 几乎是最优解；如果你要做复杂特效大片，AE 还是更强。

说点实在的：优点和要注意的坑

我觉得值的地方：

• 对 React 开发者几乎零学习成本，上手当天就能出片。
• 视频工程变成代码，能 Git 管理、能 Review、能跑测试。
• 批量生成是天生的能力，不用额外造轮子。
• CSS、Canvas、SVG、WebGL 全都能用，Web 生态直接搬。

开始之前要想清楚的：

• 商用授权：Remotion 不是完全自由的 MIT。它的许可证规定某些商业用途需要单独买公司许可证（具体看仓库里的 LICENSE.md）。个人学习、开源项目没事，公司拿来做产品得留意一下。
• 渲染依赖：本地渲染靠无头浏览器（Puppeteer/Playwright）逐帧截图，再用 FFmpeg 编码，机器配置差的话渲染挺吃资源。官方也提供云端 / Lambda 渲染来分摊。
• 特效上限：纯代码能做出绝大多数动效，但影视级复杂合成，AE 仍然更专业。

怎么开始

1. 确保装了 Node.js（18+ 比较稳）。
2. 跑 npx create-video@latest 初始化。
3. 改 src/HelloWorld.tsx 里的组件，浏览器里看实时效果。
4. 想深入就翻官方文档和示例仓库，社区 Discord 也挺活跃。

资源链接

• GitHub：https://github.com/remotion-dev/remotion
• 官网：https://remotion.dev
• 文档：https://remotion.dev/docs
• API 参考：https://remotion.dev/api
• 示例项目：仓库里 packages/example 目录
• 云端渲染：https://remotion.pro（不想本地吃资源可以看这个）

如果你也经常被"做个视频"的需求卡住，又恰好会点 React，真心建议花一个下午试一下 Remotion。它不一定取代你的剪辑软件，但能帮你把那些"重复、批量、数据驱动"的视频需求，变成几行代码的事。