一天一个开源项目（第2篇）：Remotion - 用 React 程序化创建视频

引言

"如果视频制作也能像写代码一样，用组件、函数和逻辑来构建，那该多好？"

这是"一天一个开源项目"系列的第2篇文章。今天带你了解的项目是 Remotion （GitHub）。

想象一下，你不再需要打开 After Effects 或 Premiere Pro，不再需要手动调整每一帧，而是像写 React 组件一样，用代码来创建视频。这就是 Remotion 带来的革命性体验。

为什么选择这个项目？

• 🎬 革命性理念：用 React 和 Web 技术创建视频，打破传统视频制作的壁垒
• 🚀 开发者友好：熟悉的 React 语法，完整的 TypeScript 支持
• 🎨 强大功能：支持 CSS、Canvas、SVG、WebGL 等所有 Web 技术
• 🌟 社区认可：29.8k+ Stars，被 GitHub Unwrapped、Fireship 等知名项目使用
• 📦 完整生态：丰富的文档、示例和社区支持

你将学到什么

• Remotion 的核心概念和工作原理
• 如何使用 React 组件创建视频内容
• Remotion 的架构设计和关键技术实现
• 实际应用场景和最佳实践
• 与其他视频制作工具的对比分析
• 如何开始使用 Remotion 创建你的第一个视频

前置知识

• React 基础（组件、Hooks、JSX）
• TypeScript 基础（可选但推荐）
• CSS 和动画基础
• Node.js 和 npm/yarn/pnpm 使用经验
• （可选）视频制作基础知识

---

项目背景

项目简介

Remotion 是一个用于使用 React 程序化创建视频的框架。它允许开发者使用熟悉的 React 语法、Web 技术栈（CSS、Canvas、SVG、WebGL）和编程逻辑来创建高质量的视频内容。

项目解决的核心问题：

• 传统视频制作工具（如 After Effects）学习曲线陡峭，非设计师难以使用
• 视频制作过程难以版本控制和自动化
• 需要创建大量相似视频时，传统工具效率低下
• 视频制作无法像代码一样复用、组合和测试

面向的用户群体：

• 前端开发者，希望用代码创建视频内容
• 需要批量生成个性化视频的应用（如年度总结、数据可视化）
• 希望将视频制作集成到开发工作流中的团队
• 需要程序化生成视频的 SaaS 产品

作者/团队介绍

团队：remotion-dev

• 背景：专注于用代码创建视频的工具开发
• 成就 ：Remotion 被多个知名项目使用，包括：
  • GitHub Unwrapped：GitHub 的年度个性化总结视频
  • Fireship：知名技术教育频道使用 Remotion 创建视频
  • 数千个生产环境应用
• 理念：让视频制作像写代码一样简单、可复用、可自动化

项目创建时间：2020年（从 GitHub 提交历史可以看出项目已经发展多年）

项目数据

• ⭐ GitHub Stars: 29.8k+（持续快速增长）
• 🍴 Forks: 1.8k+
• 📦 版本: v4.0.409（最新版本，2026年1月22日发布）
• 📄 License: 特殊许可证（某些商业用途需要公司许可证，详见 LICENSE.md）
• 🌐 官网 : remotion.dev
• 📚 文档 : remotion.dev/docs
• 📖 API 参考 : remotion.dev/api
• 💬 社区: Discord 社区活跃
• 📦 NPM: 每周数十万次下载

项目发展历程：

• 2020年：项目启动，初步版本发布
• 2021-2022年：快速发展，添加核心功能，社区增长
• 2023年：v3.0 发布，重大架构改进
• 2024年：v4.0 发布，性能优化和新特性
• 2025-2026年：持续迭代，添加更多功能和优化

知名使用案例：

• GitHub Unwrapped：每年为 GitHub 用户生成个性化年度总结视频
• Fireship：技术教育视频的快速制作
• 数千个生产环境应用在使用 Remotion

---

主要功能

核心作用

Remotion 的核心作用是让开发者使用 React 和 Web 技术来程序化创建视频，实现：

1. 代码驱动视频制作：用 React 组件、函数和逻辑来构建视频
2. Web 技术栈：充分利用 CSS、Canvas、SVG、WebGL 等 Web 技术
3. 可复用和组合：像 React 组件一样，视频片段可以复用和组合
4. 版本控制：视频制作过程可以像代码一样进行版本控制
5. 自动化生成：可以批量生成个性化视频，集成到 CI/CD 流程

使用场景

1. 个性化视频生成

   • 年度总结视频（如 GitHub Unwrapped）
   • 用户数据可视化视频
   • 个性化营销视频
   • 动态报告视频

2. 数据可视化视频

   • 图表动画视频
   • 数据驱动的动画
   • 实时数据可视化
   • 统计报告视频

3. 产品演示和教程

   • 产品功能介绍视频
   • 技术教程视频
   • 代码演示动画
   • 交互式演示视频

4. 社交媒体内容

   • 批量生成社交媒体视频
   • 动态 Logo 动画
   • 品牌宣传视频
   • 节日祝福视频

5. 自动化视频生产

   • 集成到 CI/CD 流程
   • 自动化测试视频
   • 批量处理视频
   • 动态内容更新

快速开始

安装和初始化

# 如果已安装 Node.js，直接运行
npx create-video@latest

# 或者使用 npm
npm create video@latest

# 或使用 yarn
yarn create video

# 或使用 pnpm
pnpm create video

最简单的视频示例

创建你的第一个 Remotion 视频：

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

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

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

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

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

预览和渲染

# 启动开发服务器（预览）
npm run dev

# 渲染视频
npm run build

核心特性

1. React 组件系统

   • 使用熟悉的 React 语法
   • 支持所有 React Hooks
   • 组件可以复用和组合
   • 完整的 TypeScript 支持

2. 时间轴控制

   • useCurrentFrame()：获取当前帧数
   • useVideoConfig()：获取视频配置
   • interpolate()：帧间插值函数
   • spring()：弹簧动画函数

3. 丰富的动画能力

   • CSS 动画和过渡
   • Canvas 2D 和 WebGL
   • SVG 动画
   • 自定义动画函数

4. 视频合成

   • 多轨道视频合成
   • 音频支持
   • 视频片段组合
   • 转场效果

5. 数据驱动

   • 从 API 获取数据
   • 动态内容生成
   • 批量视频生成
   • 模板系统

6. 开发工具

   • 实时预览
   • 时间轴编辑器
   • 性能分析
   • 热重载

7. 渲染选项

   • 本地渲染
   • 云端渲染（Remotion Cloud）
   • Lambda 函数渲染
   • 自定义渲染器

8. 丰富的生态系统

   • 官方插件和模板
   • 社区贡献的组件
   • 示例项目
   • 详细文档

项目优势

与其他视频制作工具相比，Remotion 的优势：

对比项	Remotion	After Effects	FFmpeg	MoviePy
学习曲线	⭐⭐⭐⭐⭐ 熟悉 React 即可	⭐⭐ 需要学习专业软件	⭐⭐ 命令行工具	⭐⭐⭐ Python 库
版本控制	⭐⭐⭐⭐⭐ 代码可版本控制	⭐⭐ 二进制文件	⭐⭐⭐ 脚本可版本控制	⭐⭐⭐ 脚本可版本控制
自动化	⭐⭐⭐⭐⭐ 完全可编程	⭐⭐ 需要脚本	⭐⭐⭐⭐ 命令行自动化	⭐⭐⭐⭐ Python 自动化
复用性	⭐⭐⭐⭐⭐ React 组件复用	⭐⭐⭐ 模板系统	⭐⭐ 脚本复用	⭐⭐⭐ 函数复用
Web 技术	⭐⭐⭐⭐⭐ 完全支持	⭐ 不支持	⭐ 不支持	⭐ 不支持
批量生成	⭐⭐⭐⭐⭐ 天然支持	⭐⭐ 需要脚本	⭐⭐⭐⭐ 脚本支持	⭐⭐⭐⭐ 脚本支持
成本	⭐⭐⭐⭐ 开源（商业需许可）	⭐⭐ 订阅制	⭐⭐⭐⭐⭐ 完全免费	⭐⭐⭐⭐⭐ 完全免费
社区	⭐⭐⭐⭐ 活跃社区	⭐⭐⭐⭐⭐ 庞大社区	⭐⭐⭐⭐⭐ 庞大社区	⭐⭐⭐ 较小社区

为什么选择 Remotion？

• ✅ 开发者友好：如果你熟悉 React，几乎零学习成本
• ✅ 代码驱动：视频制作过程可以版本控制、测试、自动化
• ✅ Web 技术栈：可以使用所有熟悉的 Web 技术
• ✅ 批量生成：天然支持批量生成个性化视频
• ✅ 可集成：可以集成到现有的开发工作流中
• ✅ 活跃社区：丰富的文档、示例和社区支持

---

项目详细剖析

架构设计

Remotion 采用分层式架构，核心是将 React 组件渲染为视频帧：

┌─────────────────────────────────────┐
│   React Components (开发者编写)      │
│   - 使用 useCurrentFrame()           │
│   - 使用 interpolate() 等 Hooks      │
└──────────────┬──────────────────────┘
               │
┌──────────────▼──────────────────────┐
│   Remotion Core                      │
│   - 帧渲染引擎                        │
│   - 时间轴管理                        │
│   - 组件生命周期                      │
└──────────────┬──────────────────────┘
               │
┌──────────────▼──────────────────────┐
│   Rendering Layer                   │
│   - Puppeteer/Playwright            │
│   - 帧捕获                           │
│   - 视频编码                         │
└─────────────────────────────────────┘

核心概念详解

1. Composition（合成）

Composition 是 Remotion 的核心概念，定义了视频的基本属性：

<Composition
  id="MyVideo"              // 唯一标识
  component={MyComponent}   // React 组件
  durationInFrames={150}     // 总帧数
  fps={30}                   // 帧率
  width={1920}               // 宽度
  height={1080}              // 高度
/>

设计特点：

• 每个 Composition 对应一个视频
• 可以定义多个 Composition
• 支持不同的分辨率和帧率

2. 时间轴和帧

Remotion 使用帧作为时间单位，而不是秒：

import { useCurrentFrame, useVideoConfig } from 'remotion';

export const MyComponent: React.FC = () => {
  const frame = useCurrentFrame();  // 当前帧数（0, 1, 2, ...）
  const { fps, durationInFrames } = useVideoConfig();
  
  // 将帧转换为秒
  const seconds = frame / fps;
  
  // 计算进度（0 到 1）
  const progress = frame / durationInFrames;
  
  return <div>Frame: {frame}</div>;
};

设计理念：

• 帧是离散的，便于精确控制
• 帧数 = 秒数 × 帧率
• 所有动画都基于帧计算

3. 动画函数

Remotion 提供了强大的动画函数：

interpolate（插值）：

import { interpolate } from 'remotion';

const opacity = interpolate(
  frame,
  [0, 30],      // 输入范围（帧）
  [0, 1],       // 输出范围（值）
  {
    extrapolateLeft: 'clamp',  // 左侧超出范围的处理
    extrapolateRight: 'clamp', // 右侧超出范围的处理
  }
);

spring（弹簧动画）：

import { spring } from 'remotion';

const scale = spring({
  frame,
  fps: 30,
  config: {
    damping: 200,
    stiffness: 200,
    mass: 0.5,
  },
});

设计特点：

• 提供多种动画函数
• 支持自定义动画曲线
• 性能优化，避免不必要的计算

4. 视频合成

Remotion 支持复杂的视频合成：

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>
    </>
  );
};

设计特点：

• Sequence 用于时间轴上的片段
• 支持多轨道合成
• 支持音频轨道

关键技术实现

1. 帧渲染机制

工作原理：

1. Remotion 使用 Puppeteer 或 Playwright 启动无头浏览器
2. 渲染 React 组件到 Canvas
3. 逐帧捕获画面
4. 使用 FFmpeg 将帧序列编码为视频

优化策略：

• 帧缓存机制
• 并行渲染
• 增量渲染（只渲染变化的部分）

2. 时间轴同步

挑战：确保所有组件在同一帧显示正确状态

解决方案：

• 全局帧状态管理
• 组件按帧同步更新
• 避免异步操作影响时间轴

3. 性能优化

优化技术：

• 帧缓存：缓存已渲染的帧
• 增量渲染：只重新渲染变化的部分
• 并行处理：多进程/多线程渲染
• 内存管理：及时释放不需要的资源

扩展机制

1. 插件系统

Remotion 支持丰富的插件：

# 安装插件
npm install @remotion/lottie
npm install @remotion/three
npm install @remotion/player

官方插件：

• @remotion/lottie：Lottie 动画支持
• @remotion/three：Three.js 3D 支持
• @remotion/player：视频播放器组件
• @remotion/lambda：AWS Lambda 渲染支持

2. 自定义 Hooks

可以创建自定义 Hooks 来复用逻辑：

function useFadeIn(durationInFrames: number) {
  const frame = useCurrentFrame();
  return interpolate(frame, [0, durationInFrames], [0, 1]);
}

export const MyComponent: React.FC = () => {
  const opacity = useFadeIn(30);
  return <div style={{ opacity }}>Fade In</div>;
};

3. 模板和示例

Remotion 提供丰富的模板和示例：

• GitHub Unwrapped 模板
• 数据可视化模板
• 产品演示模板
• 社交媒体模板

---

项目地址与资源

官方资源

• 🌟 GitHub : https://github.com/remotion-dev/remotion
• 🌐 官网 : https://remotion.dev
• 📚 文档 : https://remotion.dev/docs
• 📖 API 参考 : https://remotion.dev/api
• 🎨 Showcase : https://remotion.dev/showcase
• 💬 Discord : Discord 社区
• 🐛 Issues : GitHub Issues
• 📦 NPM : @remotion/core

相关资源

• GitHub Unwrapped : https://www.githubunwrapped.com（使用 Remotion 创建）
• Fireship Remotion 教程 : YouTube 视频
• Remotion Cloud : https://remotion.pro（云端渲染服务）
• 示例项目 : GitHub Examples

---

欢迎来我中的个人主页找到更多有用的知识和有趣的产品