企业官网建设流程全解析

友情提示：这篇文章信息量有点大，建议先点个收藏，免得手滑关掉之后找不回来。

读完之后你能带走什么？

📌 搞懂 Remotion 到底是什么，为什么前端圈都在讨论它

📌 从零搭一个能用 React 组件生成 MP4 视频的项目

📌 掌握 Composition、帧渲染、参数化视频这几个核心概念

📌 拿到一份可直接复制粘贴跑通的代码

前阵子在 GitHub 闲逛，看到一个项目标着 "Make videos programmatically"，点进去一看——好家伙，React 组件直接渲染成 MP4 视频。当时的表情大概就是：😳

写过前端的人都知道 React 能干 UI，干交互，干 CSR / SSR / SSG / ISG（缩写多到快凑够字母表了），但直接编译出 .mp4 文件？这不就是把前端和后期的饭碗放在同一个锅里煮吗。

这个项目叫Remotion，GitHub 49k star，npm 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-video@latest

它会让你选模板——空白模板（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 id="MyVideo" component={MyVideo} durationInFrames={150} // 总帧数 fps={30} // 帧率 width={1920} // 宽度 height={1080} // 高度 /> ); };

durationInFrames=150，fps=30，算一下：150 ÷ 30 = 5 秒。

你可以在Root.tsx里注册多个 Composition，Remotion 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 } });

interpolate+spring这两个工具函数基本覆盖了 80% 的动画场景。如果你用过 Framer Motion，上手几乎是零成本——同一个团队的作品，API 手感非常接近。

3. useVideoConfig：视频的全局参数

任何时候想拿视频的宽高、帧率、总帧数，直接调这个 Hook：

const { 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 Lambda（Remotion 官方提供了专门适配的 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 id="SubtitleVideo" 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 License：4 人以上公司，按用量付费。
• 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是你的时间轴，interpolate+spring是你的动画引擎
• 渲染可以走 GUI（Studio）、CLI、SSR API、Lambda 四种方式
• Free License 功能全开，个人开发者零成本上手
• 做批量/自动化视频是它的主场，精修大片不是

幸得你于纷扰时光里驻足品读，由衷致谢

Thank you for watching in your busy schedule. Thank you.

🚀 时代变了，开发者的武器也该换了
关注我，主页解锁更多 AI 落地实战与前沿技术。
带你打破行业内卷，快速从普通开发者进阶为新时代 AI 程序工程师！
✨ 别在旧世界里打转，一起去新世界探险。