Remotion：用 React 写视频，让代码成为剪辑师

什么是 Remotion

Remotion 是一个用 React 创建视频的开源框架。它的核心理念只有一句话：

https://github.com/lfl171/fanfa_donghua.git

https://github.com/lfl171/fanfa_donghua2.git

https://github.com/lfl171/ls.git

https://github.com/lfl171/ls1.git

视频就是一帧一帧的图片，而每一帧都可以是一个 React 组件。

你不再需要打开 Premiere 或 After Effects 拖时间轴，而是用写代码的方式"编程式"地生成视频：

tsx 复制代码

import { AbsoluteFill, interpolate, useCurrentFrame } from "remotion";

export const MyVideo: React.FC = () => {
  const frame = useCurrentFrame();

  // 第 0-90 帧：透明度从 0 渐变到 1
  const opacity = interpolate(frame, [0, 90], [0, 1], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });

  return (
    <AbsoluteFill style={{ backgroundColor: "white" }}>
      <h1 style={{ opacity }}>Hello, Video!</h1>
    </AbsoluteFill>
  );
};

渲染出来的视频，标题会平滑淡入。就这么简单------动画的本质是 f(帧号) → 视觉属性 的纯函数。

为什么值得学

1. 前端技能直接复用

会 React 就会 Remotion。JSX、组件、props、hooks 全部通用，样式还是熟悉的 CSS。学习成本几乎只在于理解"时间轴"这一个新概念。

2. 一切皆可参数化，可编程生成

传统剪辑软件里做 100 个个性化视频是噩梦；在 Remotion 里只是一个循环：

tsx 复制代码

users.map((user) => (
  <Composition id={`Card-${user.id}`} component={WelcomeCard} props={{ user }} />
));

Spotify 的 Wrapped 年度总结、GitHub 的年度报告，背后都是这类技术。

3. JSON 驱动 = AI 生成视频的天然接口

这是我认为最有想象力的部分：把创意写成数据，把渲染交给代码。

json 复制代码

{
  "scene": "act2-darkness-spreads",
  "duration": 35,
  "camera": ["slow zoom", "right pan"],
  "layers": [
    {
      "type": "component",
      "component": "AnimatedChart",
      "delayFrames": 700,
      "params": {
        "mode": "line",
        "data": "1939,3; 1940,8; 1941,15; 1942,24; 1943,34; 1944,50; 1945,70",
        "counterTo": 70000000
      }
    }
  ]
}

一份 JSON 描述一幕场景：时长、运镜、图层、数据。大语言模型生成 JSON，Remotion 自动渲染成片------这就是一条完整的 AI 纪录片生成流水线，人只需要审脚本，不需要碰剪辑软件。

4. 工程化的视频开发体验

能力	传统剪辑软件	Remotion
版本管理	工程文件二进制，无法 diff	Git 管理，逐行 diff
复用	复制粘贴模板	npm 包、组件抽象
协作	传工程文件	Code Review
修改一个错别字	重开软件找时间轴	改一行，热更新预览
批量生成	手动导出 N 次	CI 里跑 N 次渲染

核心概念速览

Composition：视频入口

tsx 复制代码

<Composition
  id="HumanMemory"
  component={HumanMemory}
  durationInFrames={5400}  // 180 秒 × 30fps
  fps={30}
  width={1920}
  height={1080}
/>

Sequence：时间轴上的"片段"

把组件安排在指定帧区间内播放，等价于剪辑软件里把素材拖到时间轴上：

tsx 复制代码

<Sequence from={750} durationInFrames={1050}>
  <Act2DarknessSpreads />
</Sequence>

interpolate 与 spring：两种动画手感

tsx 复制代码

// 线性映射：适合淡入淡出、位移
const scale = interpolate(frame, [0, 150], [1, 1.15]);

// 弹簧物理：适合弹入、生长，有自然的回弹
const enter = spring({ frame, fps, config: { damping: 12, stiffness: 100 } });

一个实用细节：interpolate 默认会外推，务必加 extrapolateLeft/Right: "clamp"，否则动画结束后数值会继续跑飞。

确定性是第一原则

Remotion 渲染时会以任意顺序、多浏览器并行渲染同一帧，每一帧都必须只由帧号决定：

tsx 复制代码

// ❌ 错误：Math.random() 每帧不同，视频会闪烁
const x = Math.random() * 100;

// ✅ 正确：用帧号做种子的伪随机（如 mulberry32）
const rand = useMemo(() => mulberry32(42), []);

粒子数量、位置、颜色......一切"随机"都必须是可复现的随机。

开发工作流

bash 复制代码

# 创建项目
npx create-video@latest

# 可视化预览（热更新，改代码秒级见效）
npm run dev

# 抽一帧静态图，快速验证某一帧的构图
npx remotion still HumanMemory out/check.png --frame=1520

# 全量渲染
npx remotion render HumanMemory out/final.mp4

实际项目中我最依赖的是 抽帧验证：不用等整段渲染，直接看第 N 帧长什么样，调动画曲线效率极高。

实战：一个 JSON 驱动的纪录片动画项目

用 Remotion 做一部 180 秒、五幕结构的历史动画短片，架构是这样的：

复制代码

scene.json          ← 五幕配置（时长/运镜/图层/文案/节拍）
    ↓
parser.ts           ← 校验 + 组件注册表（字符串名 → React 组件）
    ↓
Composition.tsx     ← 按配置自动编排 <Sequence>
    ↓
SceneRenderer.tsx   ← 通用图层渲染器（text/image/map/particles/component）
    ↓
14 个动画组件        ← Ken Burns 照片活化、墨水扩散地图、
                        SVG 折线/柱状数据图表、粒子尘埃、
                        黑白照片扫光复彩、无面人形、数学公式浮现......

几个有意思的技术点：

Ken Burns 效果 ：scale 1 → 1.15 配合缓慢平移，静态老照片立刻有了电影感
墨水扩散地图 ：SVG <mask> 里让一组圆半径随帧号增长 + 高斯模糊，黑暗"浸染"地图
数据可视化 ：pathLength={1} + strokeDashoffset 从 1 减到 0，折线自己"画"出来；右上角大数字用 interpolate 同步滚动到 70,000,000
音频节拍 ：beatMarkers 数组标记关键帧，驱动光效脉冲，为后期配乐留好对齐点

最终一条命令渲染出 5400 帧 / 1920×1080 / 30fps 的成片。

局限与注意事项

诚实地说，Remotion 不适合所有场景：

渲染速度：本质是浏览器逐帧截图 + FFmpeg 合成，长视频渲染耗时远超剪辑软件导出。适合程序化生成，不适合当"快速出片工具"
商业授权：核心 MIT，但公司使用需要购买 Company License（个人和开源免费），使用前看清授权条款
复杂转场/调色：精细的色彩分级、实拍剪辑节奏感，仍是专业剪辑软件的强项
音频处理弱：混音、音效设计不是它的领域，一般渲染无声视频 + 旁白/音乐后期合成

适合谁

前端工程师：想给简历加一个"会用 React 生成视频"的差异化技能
数据可视化爱好者：把图表变成动画叙事，比静态 dashboard 震撼十倍
AI 应用开发者：LLM 生成 JSON 脚本 → Remotion 渲染，是当下最有想象力的 AIGC 视频管线之一
内容创作者：批量做模板化视频（课程片头、产品发布、年度总结）

结语

视频行业过去三十年一直在把"时间轴"图形化，让人去适应工具；Remotion 反其道而行------把时间轴还原成代码，让工具适应工程师的思维。

当视频变成纯函数 f(frame) → pixels，它就获得了代码的一切美德：可版本控制、可复用、可参数化、可由 AI 生成。

这可能是视频创作离"软件工程"最近的一次。

bash 复制代码

npx create-video@latest

------ 用你的第一行代码，渲染第一段视频。