一天一个开源项目（第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 技术来程序化创建视频，实现：

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

使用场景

个性化视频生成
- 年度总结视频（如 GitHub Unwrapped）
- 用户数据可视化视频
- 个性化营销视频
- 动态报告视频
数据可视化视频
- 图表动画视频
- 数据驱动的动画
- 实时数据可视化
- 统计报告视频
产品演示和教程
- 产品功能介绍视频
- 技术教程视频
- 代码演示动画
- 交互式演示视频
社交媒体内容
- 批量生成社交媒体视频
- 动态 Logo 动画
- 品牌宣传视频
- 节日祝福视频
自动化视频生产
- 集成到 CI/CD 流程
- 自动化测试视频
- 批量处理视频
- 动态内容更新

快速开始

安装和初始化

# 如果已安装 Node.js，直接运行npx create-video@latest# 或者使用 npmnpmcreate video@latest# 或使用 yarnyarncreate video# 或使用 pnpmpnpmcreate 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> ); };

预览和渲染

# 启动开发服务器（预览）npmrun dev# 渲染视频npmrun build

核心特性

React 组件系统
- 使用熟悉的 React 语法
- 支持所有 React Hooks
- 组件可以复用和组合
- 完整的 TypeScript 支持
时间轴控制
- useCurrentFrame()：获取当前帧数
- useVideoConfig()：获取视频配置
- interpolate()：帧间插值函数
- spring()：弹簧动画函数
丰富的动画能力
- CSS 动画和过渡
- Canvas 2D 和 WebGL
- SVG 动画
- 自定义动画函数
视频合成
- 多轨道视频合成
- 音频支持
- 视频片段组合
- 转场效果
数据驱动
- 从 API 获取数据
- 动态内容生成
- 批量视频生成
- 模板系统
开发工具
- 实时预览
- 时间轴编辑器
- 性能分析
- 热重载
渲染选项
- 本地渲染
- 云端渲染（Remotion Cloud）
- Lambda 函数渲染
- 自定义渲染器
丰富的生态系统
- 官方插件和模板
- 社区贡献的组件
- 示例项目
- 详细文档

项目优势

与其他视频制作工具相比，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. 帧渲染机制

工作原理：

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

优化策略：

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

2. 时间轴同步

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

解决方案：

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

3. 性能优化

优化技术：

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

扩展机制

1. 插件系统

Remotion 支持丰富的插件：

# 安装插件npminstall@remotion/lottienpminstall@remotion/threenpminstall@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>; };