阿超 > remotion

remotion

2026-01-24

前端

不要老叹息过去，它是不再回来的；要明智地改善现在。要以不忧不惧的坚决意志投入扑朔迷离的未来。——朗费罗

Remotion：用 React“写”视频的开发者框架

你可能已经习惯用 React 搭页面、用三方库做动画，但有没有想过——用 React 直接“写”视频？Remotion 的答案是肯定的。它把我们熟悉的 Web 技术栈转换成视频生成的能力：用 JSX 描述画面、用 CSS/Canvas/SVG/WebGL 进行布局与渲染、用编程逻辑与算法叠加效果，然后“程序化地”输出成视频。

为什么用 React 来“写”视频

Remotion 的 README 讲得很清楚：

  • Leverage Web Technologies
    直接调用 CSS、Canvas、SVG、WebGL 等 Web 技术来构建画面与效果，这意味着你可以把前端的成熟生态“搬进视频制作”。

  • Leverage Programming
    用变量、函数、API、数学与算法去构造新颖的视效。像你写一个交互组件那样，写一个可编排的视频组件。

  • Leverage React
    复用组件、强大的组合能力、开发时的 Fast Refresh、以及包生态。这是把“工程化生产力”带入视频领域。

一句话：你不必换一套工具学习视频脚本语言，你可以继续使用 React 的思维方式来构思、组织、和产出视频。

用 Remotion 做出的作品

README 里列出了知名示例：

更多示例可在官方 Showcase 浏览：remotion.dev/showcase

这些案例的共同点是：用程序生成画面、用数据驱动内容变化、用 Web 技术栈完成复杂的动画与视觉呈现。

快速上手

如果你已有 Node.js，直接执行：

1
npx create-video@latest

接下来请查阅官方安装文档：remotion.dev/docs

这一步会帮你把工程脚手架搭好，后续你就可以在项目里像平时写 React 一样去“写视频”。

工作流的样子

  • 组件化画面
    像搭页面一样，用一个个组件去构建视频画面：标题卡、图表、插图、字幕、转场动画等。

  • 数据驱动内容
    把视频里出现的文案、数值、图形基于数据来源动态填充；同样的模板可以用于不同数据，自动生成不同的视频成品。

  • 程序化动画
    用算法或函数定义运动曲线、颜色变化、粒子效果等，把可重复的动画逻辑封装为可复用组件。

  • 统一工程化
    版本控制���依赖管理、代码审查、持续集成、包生态——这些在前端工程里常见的“生产力工具”，一样套用在视频生产线。

代码片段：一个最简单的“画面组件”示例

下面的示例展示了一个“标题卡”组件，它用 React 渲染出一个带背景、标题、副标题的画面。它不依赖任何特定视频 API，完全是“前端组件”的写法，因此易于迁移与扩展。你可以在 Remotion 的工程里把它作为一个画面片段使用，并在不同的时间点或不同的数据输入下渲染不同版本。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// TitleCard.tsx
import React from "react";

type TitleCardProps = {
  title: string;
  subtitle?: string;
  bg?: string;
  color?: string;
};

export const TitleCard: React.FC<TitleCardProps> = ({
  title,
  subtitle,
  bg = "#0e0e10",
  color = "#ffffff",
}) => {
  return (
    <div
      style={{
        width: "100%",
        height: "100%",
        background: bg,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif",
      }}
    >
      <div style={{ textAlign: "center", maxWidth: 1000, padding: 24 }}>
        <h1 style={{ margin: 0, fontSize: 96, fontWeight: 800, color }}>
          {title}
        </h1>
        {subtitle ? (
          <p
            style={{
              marginTop: 24,
              fontSize: 36,
              lineHeight: 1.4,
              color: "rgba(255,255,255,0.8)",
            }}
          >
            {subtitle}
          </p>
        ) : null}
      </div>
    </div>
  );
};

这个组件看起来像是一个普通的页面组件，但它具备视频画面片段的一切要素：场景背景、文案、布局、风格。你可以加上图形、SVG、Canvas 或任何你喜欢的前端技术来增强画面，再把它作为视频的一帧或一段使用。

再来一个“数据驱动的小片段”

例如，我们做一个简易的柱状图组件，用来渲染某个指标的对比。数据由外部传入，这就为视频的“批量生成”提供了基础。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// BarChart.tsx
import React from "react";

type Datum = { label: string; value: number; color?: string };
type BarChartProps = {
  data: Datum[];
  bg?: string;
};

export const BarChart: React.FC<BarChartProps> = ({ data, bg = "#ffffff" }) => {
  const max = Math.max(...data.map((d) => d.value), 1);
  const barWidth = 80;
  const gap = 24;

  return (
    <div
      style={{
        width: "100%",
        height: "100%",
        background: bg,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif",
      }}
    >
      <div style={{ display: "flex", alignItems: "flex-end", gap }}>
        {data.map((d) => {
          const heightRatio = d.value / max;
          return (
            <div key={d.label} style={{ textAlign: "center" }}>
              <div
                style={{
                  width: barWidth,
                  height: Math.round(400 * heightRatio),
                  background: d.color ?? "#4c82fb",
                  borderRadius: 12,
                  transition: "height 300ms",
                }}
                title={`${d.label}: ${d.value}`}
              />
              <div style={{ marginTop: 12, fontWeight: 600 }}>{d.label}</div>
              <div style={{ color: "#666" }}>{d.value}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

你可以把这类组件与标题卡等组合起来，形成“场景拼接的画面”。在视频生产时，传入不同数据就能批量生成不同内容的视频。

Web 技术栈的优势

  • CSS 布局与动画
    用 Flex/Grid 组织复杂画面，用 keyframes 或过渡构造动效。

  • SVG/Canvas/WebGL
    高质量矢量渲���、像素级绘制、GPU 加速的三维/粒子/着色器效果。

  • 包生态
    图表库、字体与图标、富文本渲染、国际化工具、动画库、颜色与可视化辅助工具，都可以直接复用。

适用场景

  • 数据驱动的视频模板
    把“年度报告、数据榜单、赛事战报、活动回顾”变成模板，按数据批量生成成片。

  • 个性化营销内容
    基于不同用户画像生成不同的视频文案与画面。

  • 程序化视觉与实验
    用算法做生成式艺术、可视化实验，导出视频用于传播与展示。

  • 教学与开发演示
    把代码、UI、流程“演绎成视频”，并用组件化方式管理内容片段。

许可提示

Remotion 的许���证有特殊规则，某些场景需要企业许可。使用前请阅读仓库内的 LICENSE.md 以确保合规。

社区与贡献

小结

Remotion 的核心价值，是把“视频生成”纳入我们熟悉的前端工程世界：组件化、数据驱动、算法能力、生态复用。你会发现，视频不再是只能“手工剪”的素材，而可以像页面一样“编排与生产”。
如果你希望用代码去定义画面、用数据去驱动内容、用工程化方式去迭代视频产品，Remotion 值得你马上试一试：

  • 初始化脚手架：npx create-video@latest
  • 阅读文档：remotion.dev/docs
  • 了解许可：LICENSE.md

让我们把“程序化视频”变成日常工作的一部分。