Remotion模板实操：用React代码5分钟做一支视频

Remotion模板实操：用React代码5分钟做一支视频

【免费下载链接】remotion🎥 Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion

每次运营提"再做一版片头视频"，你是不是又得在剪辑软件里挪素材、导帧、等渲染？Remotion 换了一种做法：把视频写成一个 React 组件，代码跑完，视频就出来了。

Remotion 能干什么，适合谁

一句话：用编程方式做视频。你写的不是关键帧，而是帧序列（就是把视频拆成一张张图，按帧号顺序渲染）的函数。仓库 packages/ 目录里带 22 个模板（template-* 开头），从 TikTok 竖屏、播客波形、3D 场景到批量生成图片都覆盖了。会写 React 的人上手成本极低；没碰过视频工具的开发者，10 分钟也能拿到第一个 mp4。

上面是仓库自带的 template-audiogram 模板渲染效果：换上自己的音频、字幕和封面，直接就能用。

从打开终端到拿到视频的最短路径

打开终端，敲一条命令：

npx create-video@latest

它会让你挑模板。第一次选 helloworld，它带一套完整动画示例，工具自动装好依赖。接下来两条命令就齐活了：npx remotion studio会在浏览器打开本地预览页，左边是当前帧画面，下面有一条可以用鼠标拖动的时间轴；npx remotion render HelloWorld out/video.mp4则直接产出成片。

在预览里你会看到：logo 在第 25 帧后带弹簧手感地弹起，标题第 35 帧淡入，字幕第 75 帧出现。说白了，这套动画的源码就是一个纯函数：

const frame = useCurrentFrame(); const progress = spring({ frame: frame - 25, fps });

核心是 useCurrentFrame()：它告诉组件"现在该画第几帧"，再用 spring() 把帧号映射成 0 到 1 的进度，最后插值成样式。没有计时器、没有真实时间，帧号变了画面才变。

按需求挑模板对照表

图中是社区用 Remotion 做出百万美元年化收入的案例合集，说明"用代码出片"这件事商业上已经跑通了。

三个差异化亮点

动画是纯函数，不是时间轴。场景：需求方改个数字，重渲染一次结果就不一样，排查到崩溃。怎么做：所有视觉属性都由帧号 frame 算出来，同一个帧号永远得到同一帧画面。效果：预览和最终渲染分帧一致，可以放心交给 CI 流水线自动出片。

渲染目标可换，组件代码不动。场景：先在本地试效果，上线后要放到服务器上批量跑。怎么做：本地用npx remotion render命令，上生产换成 packages/lambda 目录的 Lambda 函数，组件一行不用改。效果：笔记本上验证完，直接把同一份代码挂到服务器上放量。

编码代理也能替你写视频。场景：有文案和数据，不想手写分镜。怎么做：仓库提供 MCP 服务器（packages/mcp/）和多套编码代理插件，官方 README 第一条卖点就是"用 agent 做视频"。效果：把需求描述丢给代理，先拿一版能跑的分镜和代码，再人工精修。

我栽过、你大概率也会栽的三个坑

1. 按帧想，别按秒想。10 秒视频在 30fps 下是 300 帧。模板代码里写的"from 75"都是帧号，你按秒去写会差出 30 倍，字幕永远慢半拍或快半拍。
2. 组件里别放真实时间。Date.now()、Math.random()、setTimeout 都不能进组件。帧序列渲染会把每一帧重放一遍，任何不确定的值都会让你每次渲染结果都不同。随机数要么外部算好传进来，要么用固定种子。
3. 第一次渲染先看配置再看代码。remotion.config.ts 里放着编码器、缩放比例、像素格式。首帧偏暗、帧率不对、体积异常，先翻模板目录里这份配置，比盯着组件改半天有效。

接下来做什么

fork helloworld 改成你的第一支视频，或从 22 个模板里挑一个替换文案。延伸阅读：模板总目录 与 helloworld 示例源码。

【免费下载链接】remotion🎥 Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion