用 React 写视频？Remotion 这个库把前端和后期的饭碗一起端了

友情提示这篇文章信息量有点大建议先点个收藏免得手滑关掉之后找不回来。读完之后你能带走什么 搞懂 Remotion 到底是什么为什么前端圈都在讨论它 从零搭一个能用 React 组件生成 MP4 视频的项目 掌握 Composition、帧渲染、参数化视频这几个核心概念 拿到一份可直接复制粘贴跑通的代码前阵子在 GitHub 闲逛看到一个项目标着 Make videos programmatically点进去一看——好家伙React 组件直接渲染成 MP4 视频。当时的表情大概就是写过前端的人都知道 React 能干 UI干交互干 CSR / SSR / SSG / ISG缩写多到快凑够字母表了但直接编译出 .mp4 文件这不就是把前端和后期的饭碗放在同一个锅里煮吗。这个项目叫RemotionGitHub 49k starnpm 300 万次下载不是那种看起来很酷但活不过三个月的玩具项目。用 React 写视频听起来离谱跑起来是真香。Remotion 到底干了件什么事传统的视频制作流程打开 PR / AE / 达芬奇 → 拖素材 → 调时间轴 → 加特效 → 导出 → 甲方说改个字 → 重新来一遍。Remotion 的思路是反过来的视频 纯函数(时间)。你给一个帧号它返回那一帧长什么样把所有帧串起来就是一个视频。import { AbsoluteFill, useCurrentFrame } from remotion; export const MyComposition () { const frame useCurrentFrame(); return ( AbsoluteFill style{{ justifyContent: center, alignItems: center, fontSize: 100, backgroundColor: white, }} 当前是第 {frame} 帧 /AbsoluteFill ); };这段代码每帧执行一次。第 0 帧显示 当前是第 0 帧第 1 帧显示 当前是第 1 帧……连起来就是个计数器动画。任何一个写过 React 的人30 秒就能看懂这段逻辑。Remotion 没有发明新语法它就是 React CSS 时间轴用你现有的前端技能直接生产视频。安装和第一个项目直接上命令行别废话npx create-videolatest它会让你选模板——空白模板Blank、Hello World、Next.js 模板、React Router 模板等等。选Hello World模板就行跑起来之后你会看到一个 Remotion Studio 的界面左侧是 Composition 列表中间是实时预览窗口右侧是属性面板。cd 你的项目名 npm start浏览器会自动打开http://localhost:3000这就是 Remotion Studio——你写视频的 IDE。重点来了你在编辑器里改 React 代码预览窗口实时刷新。和写普通前端项目没有任何区别热更新该有的都有。三个核心概念掰开揉碎讲1. Composition视频的身份证一个 Composition 就是一段视频的元数据 渲染组件// src/Root.tsx import { Composition } from remotion; import { MyVideo } from ./MyVideo; export const RemotionRoot: React.FC () { return ( Composition idMyVideo component{MyVideo} durationInFrames{150} // 总帧数 fps{30} // 帧率 width{1920} // 宽度 height{1080} // 高度 / ); };durationInFrames150fps30算一下150 ÷ 30 5 秒。你可以在Root.tsx里注册多个 CompositionRemotion Studio 的侧边栏会自动列出所有可渲染的视频。想做多个版本每个版本一个 Composition切来切去比 PR 里切序列快十倍。2. useCurrentFrame时间的唯一变量这是 Remotion 最核心的 Hook。它的返回值是一个整数——当前渲染到第几帧。第 0 帧 → 视频开头 第 1 帧 → 1/30 秒后 第 149 帧 → 视频最后一帧所有动画的本质都是把这个帧号映射到某个视觉效果上。比如文字从左边飞到右边transform: translateX(frame * 5)元素从透明到不透明opacity: Math.min(frame / 30, 1)颜色渐变hsl(frame % 360, 80%, 50%)没有关键帧编辑器没有贝塞尔曲线拖拽——就是用你最熟悉的 JavaScript 表达式算出来的。import { useCurrentFrame, interpolate, spring } from remotion; const frame useCurrentFrame(); // 线性插值帧 0~60 映射到透明度 0~1 const opacity interpolate(frame, [0, 60], [0, 1], { extrapolateRight: clamp, }); // 弹簧动画入场带弹跳效果 const scale spring({ frame, fps: 30, config: { damping: 10 } });interpolatespring这两个工具函数基本覆盖了 80% 的动画场景。如果你用过 Framer Motion上手几乎是零成本——同一个团队的作品API 手感非常接近。3. useVideoConfig视频的全局参数任何时候想拿视频的宽高、帧率、总帧数直接调这个 Hookconst { width, height, fps, durationInFrames } useVideoConfig();这玩意儿在写响应式布局的时候特别好用。比如你要做一个底部字幕条不管视频是 1080p 还是 4K直接width * 0.8算宽度完全不用手动调像素。渲染代码怎么变成 MP4写完视频之后点 Remotion Studio 里的Render按钮就能导出 MP4。跟其他视频软件一样你可以选编码格式、码率、分辨率。不一样的是——你还可以用命令行渲染npx remotion render MyVideo output.mp4这意味着什么意味着你可以把渲染写进 CI/CD 流水线里。GitHub Actions 提交代码 → 自动渲染视频 → 上传到 CDN整套流程不需要任何人打开任何 GUI 软件。批量生成 1000 个带不同文案的短视频一个 for 循环的事。Remotion 还提供了SSR API你可以在 Node.js 服务端直接调用渲染函数import { bundle } from remotion/bundler; import { renderMedia, selectComposition } from remotion/renderer; const bundleLocation await bundle(require.resolve(./src/index)); const composition await selectComposition({ serveUrl: bundleLocation, id: MyVideo, }); await renderMedia({ composition, serveUrl: bundleLocation, codec: h264, outputLocation: out/video.mp4, });部署到 AWS LambdaRemotion 官方提供了专门适配的 Lambda 层、Google Cloud Run甚至是自己的服务器上都可以跑。这种代码即视频的模式对需要规模化生产视频内容的团队来说是降维打击——传统后期一个人一天最多做几个视频Remotion 一个脚本跑完出来的视频数量后面能加好几个零。实战做个动态字幕视频光说不练假把式。来一个完整的例子——生成一段带打字机效果的字幕视频// src/SubtitleVideo.tsx import { AbsoluteFill, useCurrentFrame, interpolate, useVideoConfig } from remotion; const TEXT Remotion 让程序员也能做视频了——而且做得比后期还快。; export const SubtitleVideo () { const frame useCurrentFrame(); const { fps } useVideoConfig(); // 每个字出现的帧数1 秒显示完所有字 const charsPerFrame TEXT.length / fps; const visibleChars Math.floor(frame * charsPerFrame); // 字幕从底部滑入 const slideUp interpolate(frame, [0, 20], [100, 0], { extrapolateRight: clamp, }); return ( AbsoluteFill style{{ backgroundColor: #0a0a0a, justifyContent: flex-end, alignItems: center, paddingBottom: 120, }} div style{{ fontSize: 48, fontFamily: sans-serif, fontWeight: bold, color: #fff, textShadow: 0 0 20px rgba(255,255,255,0.3), transform: translateY(${slideUp}px), }} {TEXT.slice(0, visibleChars)} span style{{ opacity: frame % 20 10 ? 1 : 0, color: #ff6b6b, }} ▏ /span /div /AbsoluteFill ); };注册到 Root// src/Root.tsx import { Composition } from remotion; import { SubtitleVideo } from ./SubtitleVideo; export const RemotionRoot: React.FC () { return ( Composition idSubtitleVideo component{SubtitleVideo} durationInFrames{150} fps{30} width{1920} height{1080} / ); };跑起来的效果黑底白字从底部滑上来逐字显示末尾有个闪烁的红色光标——标准的打字机效果。整个视频 5 秒钟导出 MP4 大概几秒钟的事。想换个文案改TEXT常量就行。想换个颜色改backgroundColor和color。想加个背景图往AbsoluteFill里塞个Img组件remotion 内置的图片组件支持本地和远程 URL。这就是 Remotion 最大的爽点视频的每一个像素都可以用代码精确控制不用在 GUI 里跟时间轴搏斗。Remotion 的定价和适用场景老规矩聊完技术聊钱。Remotion 分三档Free License个人或 3 人以下团队功能全开商业可用。团队扩张到 4 人以上才需要升级。起步零门槛。Company License4 人以上公司按用量付费。Enterprise私有 Slack / Discord 支持、月度咨询、自定义账单$500/月起。还有一个Remotion for Automators的计费模式专门给做视频自动化工具的公司用的$0.01 每次渲染$100/月最低消费。如果你只是个写博客做教程的独立开发者Free License 完全够用。这也是 Remotion 社区能撑到 49k star 的原因之一——不设付费墙挡住个人开发者。它不适合什么场景有一说一Remotion 不是什么都能干。不适合需要逐帧精修、复杂遮罩、多层调色的影视级后期。这种活还是老老实实开 AE 吧。Remotion 的定位是程序化视频生成不是替代传统非编软件而是给前端/全栈开发者多了一种用代码造视频的能力。特别适合批量短视频生成、数据可视化视频、产品 Demo 自动生成、AI 视频工作流里的渲染层。它跟 GPT / Claude 这些大模型配合起来效率爆炸——AI 生成文案和脚本结构Remotion 负责把内容渲染成视频。划个重点Remotion React 组件 帧号 → MP4 视频useCurrentFrame是你的时间轴interpolatespring是你的动画引擎渲染可以走 GUIStudio、CLI、SSR API、Lambda 四种方式Free License 功能全开个人开发者零成本上手做批量/自动化视频是它的主场精修大片不是幸得你于纷扰时光里驻足品读由衷致谢Thank you for watching in your busy schedule. Thank you. 时代变了开发者的武器也该换了关注我主页解锁更多 AI 落地实战与前沿技术。带你打破行业内卷快速从普通开发者进阶为新时代 AI 程序工程师✨ 别在旧世界里打转一起去新世界探险。