引言“如果视频制作也能像写代码一样用组件、函数和逻辑来构建那该多好”这是一天一个开源项目系列的第2篇文章。今天带你了解的项目是RemotionGitHub。想象一下你不再需要打开 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、JSXTypeScript 基础可选但推荐CSS 和动画基础Node.js 和 npm/yarn/pnpm 使用经验可选视频制作基础知识项目背景项目简介Remotion是一个用于使用 React 程序化创建视频的框架。它允许开发者使用熟悉的 React 语法、Web 技术栈CSS、Canvas、SVG、WebGL和编程逻辑来创建高质量的视频内容。项目解决的核心问题传统视频制作工具如 After Effects学习曲线陡峭非设计师难以使用视频制作过程难以版本控制和自动化需要创建大量相似视频时传统工具效率低下视频制作无法像代码一样复用、组合和测试面向的用户群体前端开发者希望用代码创建视频内容需要批量生成个性化视频的应用如年度总结、数据可视化希望将视频制作集成到开发工作流中的团队需要程序化生成视频的 SaaS 产品作者/团队介绍团队remotion-dev背景专注于用代码创建视频的工具开发成就Remotion 被多个知名项目使用包括GitHub UnwrappedGitHub 的年度个性化总结视频Fireship知名技术教育频道使用 Remotion 创建视频数千个生产环境应用理念让视频制作像写代码一样简单、可复用、可自动化项目创建时间2020年从 GitHub 提交历史可以看出项目已经发展多年项目数据⭐GitHub Stars: 29.8k持续快速增长Forks: 1.8k版本: v4.0.409最新版本2026年1月22日发布License: 特殊许可证某些商业用途需要公司许可证详见 LICENSE.md官网: remotion.dev文档: remotion.dev/docsAPI 参考: 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-videolatest# 或者使用 npmnpmcreate videolatest# 或使用 yarnyarncreate video# 或使用 pnpmpnpmcreate video最简单的视频示例创建你的第一个 Remotion 视频// src/Root.tsx import { Composition } from remotion; import { HelloWorld } from ./HelloWorld; export const RemotionRoot: React.FC () { return ( Composition idHelloWorld 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 和 WebGLSVG 动画自定义动画函数视频合成多轨道视频合成音频支持视频片段组合转场效果数据驱动从 API 获取数据动态内容生成批量视频生成模板系统开发工具实时预览时间轴编辑器性能分析热重载渲染选项本地渲染云端渲染Remotion CloudLambda 函数渲染自定义渲染器丰富的生态系统官方插件和模板社区贡献的组件示例项目详细文档项目优势与其他视频制作工具相比Remotion 的优势对比项RemotionAfter EffectsFFmpegMoviePy学习曲线⭐⭐⭐⭐⭐ 熟悉 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 idMyVideo // 唯一标识 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 divFrame: {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 支持丰富的插件# 安装插件npminstallremotion/lottienpminstallremotion/threenpminstallremotion/player官方插件remotion/lottieLottie 动画支持remotion/threeThree.js 3D 支持remotion/player视频播放器组件remotion/lambdaAWS 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/docsAPI 参考: https://remotion.dev/apiShowcase: https://remotion.dev/showcaseDiscord: Discord 社区Issues: GitHub IssuesNPM: remotion/core相关资源GitHub Unwrapped: https://www.githubunwrapped.com使用 Remotion 创建Fireship Remotion 教程: YouTube 视频Remotion Cloud: https://remotion.pro云端渲染服务示例项目: GitHub Examples欢迎来我中的个人主页找到更多有用的知识和有趣的产品