无忆研习社 | 站长莫潇羽
本文为无忆研习社原创深度技术解析，转载请注明出处。
写在前面
做内容创作这几年，我遇到过太多需要制作演示视频的场景。每次打开 After Effects 或者 Premiere Pro，面对那密密麻麻的参数面板和复杂的时间轴操作，整个人都不好了。调个动画曲线要花半小时，改个字体颜色要翻三层菜单，更别提那些需要批量生成的视频需求了。
直到我发现了 Remotion 这个开源项目，整个创作方式都被颠覆了。
更让我兴奋的是，最近 Remotion 团队推出了 Agent Skills 功能，结合 Claude Code 这个终端 AI 编程助手，现在只需要用自然语言描述你想要的视频效果，AI 就能帮你自动生成代码、渲染视频。不夸张地说，这可能是视频制作领域最具革命性的技术突破之一。
今天这篇文章，我会从原理到实操，从入门到进阶，把 Remotion + Claude Code 这套组合拳讲透。不管你是零基础小白还是有一定编程经验的开发者，相信看完都能有所收获。
第一章：理解 Remotion 的核心理念
1.1 什么是 Remotion？
Remotion 是一个基于 React 的开源视频制作框架，由瑞士开发者 Jonny Burger 创建。它的核心理念非常简单但极具颠覆性：用写网页的方式来制作视频。
传统视频制作工具，比如 Adobe Premiere、After Effects、Final Cut Pro，本质上都是"所见即所得"的可视化编辑器。你需要手动拖拽素材、调整参数、设置关键帧。这种方式直观，但存在几个致命问题：
问题一：重复劳动无法避免
假设你是一家电商公司的运营，需要为 100 个商品各生成一条 15 秒的产品介绍视频。用传统软件，你得重复操作 100 次。就算用模板，每次替换素材、调整文案也是体力活。
问题二：版本管理困难
视频项目文件通常是二进制格式，无法用 Git 等版本控制工具进行管理。团队协作时，"这是最终版"、"这是最终版2"、"这是真的最终版"的命名噩梦几乎不可避免。
问题三：动态内容实现复杂
想让视频中的数据实时更新？比如显示最新的股票价格、天气信息或者用户个人数据？传统软件几乎无能为力，或者需要极其复杂的插件和工作流。
Remotion 的出现，让这些问题迎刃而解。因为代码天生就是可复用、可版本控制、可参数化的。
1.2 Remotion 的技术架构
要真正理解 Remotion 的强大之处，需要深入了解它的技术实现原理。站长莫潇羽这里给大家画一张清晰的架构图：
┌─────────────────────────────────────────────────────────┐
│ 用户编写 React 代码 │
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ React 组件 + CSS/Canvas/SVG/WebGL + 动画逻辑 │ │
│ └─────────────────────────────────────────────────┘ │
│ ↓ │
├─────────────────────────────────────────────────────────┤
│ Remotion 渲染引擎 │
│ │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ Webpack │ → │ 本地服务器 │ │
│ │ 打包组件 │ │ (Localhost) │ │
│ └──────────────┘ └──────────────┘ │
│ ↓ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ Headless Chrome (Puppeteer) │ │
│ │ │ │
│ │ Frame 0 → 截图 → image_0000.png │ │
│ │ Frame 1 → 截图 → image_0001.png │ │
│ │ Frame 2 → 截图 → image_0002.png │ │
│ │ ... │ │
│ │ Frame N → 截图 → image_000N.png │ │
│ │ │ │
│ │ (并行处理，多 Puppeteer 实例同时工作) │ │
│ └──────────────────────────────────────────────────┘ │
│ ↓ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ FFmpeg │ │
│ │ │ │
│ │ 图片序列 + 音频轨道 → 合成最终视频 │ │
│ │ 支持 H.264/H.265/VP8/VP9/ProRes 等编码 │ │
│ └──────────────────────────────────────────────────┘ │
│ ↓ │
├─────────────────────────────────────────────────────────┤
│ 输出结果 │
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ output.mp4 / output.webm / output.mov / GIF │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘整个渲染流程可以分为四个关键步骤：
步骤一：React 组件挂载
Remotion 使用 Webpack 将你的 React 组件打包成一个可运行的 Web 应用，并在本地启动一个服务器。这个应用本质上就是一个普通的网页，只不过内容是你要制作的视频画面。
步骤二：逐帧截图
这是 Remotion 最核心的魔法所在。它使用 Puppeteer（一个控制 Headless Chrome 的 Node.js 库）打开这个网页，然后按照设定的帧率（比如 30fps），逐帧对页面进行截图。
每一帧，Remotion 都会将当前帧号传递给你的 React 组件。你的组件根据帧号计算出当前应该显示什么内容、元素在什么位置、透明度是多少等等。组件渲染完成后，Puppeteer 截取当前视口的截图并保存。
为了提高效率，Remotion 会启动多个 Puppeteer 实例并行工作。比如一个 60 秒、30fps 的视频总共有 1800 帧，如果你的 CPU 有 8 个核心，Remotion 可能会启动 4 个 Puppeteer 实例，每个负责渲染 450 帧，大大缩短总渲染时间。
步骤三：FFmpeg 合成
当所有帧都渲染完成后，Remotion 调用 FFmpeg（一个强大的开源音视频处理工具）将这些图片序列合成为视频文件，同时混入音频轨道、设置编码参数等。
步骤四：输出成品
最终你会得到一个标准的视频文件，可以是 MP4、WebM、MOV 等各种格式，可以直接上传到任何视频平台。
1.3 为什么这种方式如此强大？
理解了原理之后，你就能明白为什么 Remotion 能够实现很多传统软件做不到的事情：
像素级精准控制
因为本质上是在渲染网页，你可以使用所有 Web 技术：CSS 动画、Canvas 绑定、SVG 路径变形、WebGL 3D 效果。每一个像素都在你的掌控之中，没有任何"黑箱"。
组件复用
React 的组件化思想在视频制作中同样适用。你可以把一个动画效果封装成组件，在不同视频中复用。需要修改？改一处代码，所有引用这个组件的视频都会更新。
数据驱动
因为是代码，所以可以轻松接入外部数据源。从数据库读取内容、调用 API 获取实时数据、读取 Excel 批量生成视频，都变得易如反掌。
版本控制
代码可以用 Git 管理。谁改了什么、什么时候改的、为什么改，一目了然。团队协作不再是噩梦。
自动化流程
可以将视频渲染集成到 CI/CD 流程中。比如每次数据更新时自动触发渲染、每周自动生成周报视频等。
第二章：Remotion 核心概念详解
在动手实践之前，有几个核心概念需要先搞清楚。无忆研习社的莫潇羽保证，理解了这些概念，后面的学习会事半功倍。
2.1 Composition（合成）
Composition 是 Remotion 中最基本的单位，可以理解为"一个视频项目"。每个 Composition 定义了视频的基本属性：
import { Composition } from 'remotion';
import { MyVideo } from './MyVideo';
export const RemotionRoot = () => {
return (
<>
<Composition
id="MyFirstVideo"
component={MyVideo}
durationInFrames={150}
fps={30}
width={1920}
height={1080}
/>
</>
);
};让我解释一下各个参数：
id：合成的唯一标识符，渲染时用来指定要渲染哪个视频component：实际渲染视频内容的 React 组件durationInFrames：视频总帧数，这里是 150 帧fps：每秒帧数，30fps 意味着这个 150 帧的视频时长是 5 秒width和height：视频分辨率，1920x1080 就是常说的 1080p
这里有个公式需要记住：视频时长（秒）= 总帧数 / 帧率。所以 150 帧 ÷ 30fps = 5 秒。
2.2 useCurrentFrame() 和 useVideoConfig()
这两个 Hook 是 Remotion 中最常用的，也是实现动画效果的核心。
useCurrentFrame()
返回当前正在渲染的帧号（从 0 开始）。你的组件会根据这个帧号来决定当前应该显示什么。
import { useCurrentFrame } from 'remotion';
export const MyVideo = () => {
const frame = useCurrentFrame();
return (
<div style={{
fontSize: 100,
color: 'white',
backgroundColor: 'black',
width: '100%',
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}>
当前帧：{frame}
</div>
);
};这个简单的组件会在屏幕中央显示当前帧号。当视频播放时，你会看到数字从 0 一直变化到 149（对于 150 帧的视频）。
useVideoConfig()
返回当前 Composition 的配置信息，包括 width、height、fps、durationInFrames 等。当你需要根据视频配置来计算某些值时非常有用。
import { useCurrentFrame, useVideoConfig } from 'remotion';
export const ProgressBar = () => {
const frame = useCurrentFrame();
const { durationInFrames, width } = useVideoConfig();
// 计算进度百分比
const progress = frame / durationInFrames;
return (
<div style={{
position: 'absolute',
bottom: 20,
left: 20,
right: 20,
height: 10,
backgroundColor: '#333',
borderRadius: 5,
}}>
<div style={{
width: `${progress * 100}%`,
height: '100%',
backgroundColor: '#00ff00',
borderRadius: 5,
}} />
</div>
);
};这个组件实现了一个进度条效果，随着视频播放，绿色进度条会从左向右填满。
2.3 interpolate() 插值函数
interpolate() 是 Remotion 中最强大的工具函数之一，用于将一个数值范围映射到另一个数值范围。这是实现平滑动画的关键。
import { useCurrentFrame, interpolate } from 'remotion';
export const FadeInText = () => {
const frame = useCurrentFrame();
// 在 0-30 帧之间，透明度从 0 变化到 1
const opacity = interpolate(
frame,
[0, 30], // 输入范围
[0, 1], // 输出范围
{
extrapolateLeft: 'clamp', // 帧号小于 0 时，输出固定为 0
extrapolateRight: 'clamp', // 帧号大于 30 时，输出固定为 1
}
);
return (
<div style={{ opacity }}>
这段文字会在 1 秒内淡入
</div>
);
};interpolate() 函数接受四个参数：
- 输入值：通常是当前帧号
- 输入范围：一个数组，定义输入值的变化区间
- 输出范围：一个数组，定义对应的输出值变化区间
- 配置选项：控制超出范围时的行为
关于 extrapolate 选项，有三个可选值：
clamp：超出范围时固定在边界值extend：继续按照插值规律延伸identity：直接返回输入值
在实际开发中，clamp 是最常用的选项，因为它能确保值始终在预期范围内。
2.4 spring() 弹簧动画
除了线性插值，Remotion 还提供了 spring() 函数来实现更自然的动画效果，比如带有反弹的运动。
import { useCurrentFrame, spring, useVideoConfig } from 'remotion';
export const BouncingBall = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
// 弹簧动画
const bounce = spring({
frame,
fps,
config: {
damping: 200, // 阻尼系数，越大反弹越小
stiffness: 100, // 刚度，越大运动越快
mass: 1, // 质量，越大惯性越大
},
});
return (
<div style={{
width: 100,
height: 100,
borderRadius: 50,
backgroundColor: 'red',
transform: `translateY(${interpolate(bounce, [0, 1], [0, 300])}px)`,
}} />
);
};spring() 返回一个从 0 到 1 的值，但变化曲线是弹簧式的，而不是线性的。通过调整 damping、stiffness 和 mass 参数，可以模拟出各种不同的物理运动效果。
2.5 Sequence 序列
当你的视频需要依次展示多个场景时，<Sequence> 组件就派上用场了。它允许你将不同的内容安排在时间轴的不同位置。
import { Sequence, useCurrentFrame } from 'remotion';
const Scene1 = () => <div>这是第一个场景</div>;
const Scene2 = () => <div>这是第二个场景</div>;
const Scene3 = () => <div>这是第三个场景</div>;
export const MyVideo = () => {
return (
<>
{/* 从第 0 帧开始，持续 60 帧（2秒） */}
<Sequence from={0} durationInFrames={60}>
<Scene1 />
</Sequence>
{/* 从第 60 帧开始，持续 60 帧 */}
<Sequence from={60} durationInFrames={60}>
<Scene2 />
</Sequence>
{/* 从第 120 帧开始，持续到视频结束 */}
<Sequence from={120}>
<Scene3 />
</Sequence>
</>
);
};重要的是，<Sequence> 内部的组件使用 useCurrentFrame() 时，返回的是相对于序列开始的帧号，而不是整个视频的帧号。这意味着每个场景都可以独立编写动画逻辑，不需要关心自己在整个视频中的位置。
2.6 内置媒体组件
Remotion 提供了几个内置组件用于处理媒体资源：
<Video> 视频组件
import { Video } from 'remotion';
export const MyVideo = () => {
return (
<Video
src="https://example.com/video.mp4"
startFrom={30} // 从源视频的第 30 帧开始播放
endAt={90} // 到第 90 帧结束
volume={0.5} // 音量 50%
/>
);
};<Audio> 音频组件
import { Audio } from 'remotion';
export const MyVideo = () => {
return (
<>
{/* 视频内容 */}
<div>...</div>
{/* 背景音乐 */}
<Audio
src="/music/background.mp3"
volume={0.3}
/>
</>
);
};<Img> 图片组件
虽然标准的 <img> 标签也能用，但 Remotion 的 <Img> 组件会确保图片在渲染前完全加载，避免出现空白帧。
import { Img } from 'remotion';
export const MyVideo = () => {
return (
<Img
src="/images/logo.png"
style={{ width: 200, height: 200 }}
/>
);
};第三章：Claude Code 深度解析
了解了 Remotion 的基础知识后，让我们来认识另一个主角：Claude Code。这是 Anthropic 推出的一款终端 AI 编程助手，它能够直接在你的开发环境中理解代码、执行命令、进行多文件编辑。
3.1 Claude Code 是什么？
Claude Code 与传统的 AI 聊天助手有本质区别。普通的 ChatGPT 或者 Claude 对话界面，你需要手动复制粘贴代码片段，来回切换窗口。而 Claude Code 直接运行在你的终端里，它能够：
- 读取整个代码库：自动分析项目结构、理解文件之间的依赖关系
- 执行 Shell 命令：安装依赖、运行测试、启动服务，不需要你手动复制粘贴
- 多文件编辑：跨多个文件进行协调修改，保持代码一致性
- Git 操作：创建分支、提交代码、推送更改、创建 PR
用一句话概括：Claude Code 就是一个住在你终端里的、懂代码的、会动手干活的 AI 同事。
3.2 Claude Code 安装与配置
系统要求
- macOS、Linux 或 Windows
- Node.js 18 或更高版本
- Git
安装方法
目前有几种安装方式，莫潇羽推荐使用官方推荐的原生安装方式：
macOS（使用 Homebrew）：
brew install claude-codeWindows（使用 WinGet）：
winget install Anthropic.ClaudeCode通用方式（使用 npm）：
npm install -g @anthropic-ai/claude-code安装完成后，在终端运行 claude 命令即可启动。首次使用需要登录你的 Claude 账户（需要 Pro、Max、Team 或 Enterprise 订阅）或者设置 API Key。
初始化项目
进入你的项目目录，运行：
claude init这个命令会分析你的项目，生成一个 claude.md 文件，其中包含了项目的上下文信息。以后每次启动 Claude Code，它都会读取这个文件来了解你的项目。
3.3 Claude Code 基础用法
启动 Claude Code 非常简单：
cd your-project-directory
claude然后你就进入了一个交互式终端界面，可以用自然语言与 Claude 对话。
常用命令示例：
# 了解项目结构
> 分析一下这个项目的架构，主要功能是什么？
# 添加新功能
> 给这个 React 应用添加一个暗色模式切换功能
# 修复 Bug
> 用户反馈登录页面点击按钮后没有响应，帮我排查一下问题
# 代码重构
> 把 UserController 里的业务逻辑抽取到独立的 Service 层
# 编写测试
> 为 OrderService 的下单方法编写单元测试3.4 Claude Code 的思考模式
Claude Code 支持不同的"思考"级别，用于处理不同复杂度的任务：
- 普通模式：适用于简单任务，如小的代码修改、简单问答
- Plan 模式：在执行前会先展示行动计划，让你确认后再执行
- Think 模式：用于复杂问题，Claude 会进行更深入的分析和推理
使用方法：
# 普通模式
> 修复这个拼写错误
# 使用 Plan 模式
> /plan 将这个 JavaScript 项目迁移到 TypeScript
# 深度思考模式
> /think 分析一下这个应用的性能瓶颈在哪里3.5 自定义 Slash 命令
你可以创建自定义命令来简化重复性任务。在项目根目录创建 .claude/commands/ 文件夹，在里面添加 Markdown 文件：
<!-- .claude/commands/review-code.md -->
# 代码审查命令
请对当前变更进行代码审查，关注以下方面：
1. 代码风格是否符合项目规范
2. 是否存在潜在的 Bug
3. 性能是否有优化空间
4. 是否需要添加测试用例
请提供具体的改进建议。保存后，你就可以在 Claude Code 中使用 /review-code 命令了。
第四章：Remotion Agent Skills 实战
现在终于到了最激动人心的部分：将 Remotion 与 Claude Code 结合，实现 AI 驱动的视频创作。无忆研习社的莫潇羽将手把手带你完成整个配置过程。
4.1 什么是 Agent Skills？
Agent Skills 是一种扩展 AI 代理能力的机制。简单来说，就是给 AI 助手"传授"特定领域的专业知识和最佳实践。
每个 Skill 本质上是一个包含指令的文件夹，里面有：
SKILL.md：核心指令文件，告诉 AI 如何处理特定类型的任务scripts/（可选）：可执行脚本，AI 可以调用这些脚本完成具体操作- 参考资料（可选）：API 文档、示例代码等
当你安装了 Remotion 的 Agent Skills 后，Claude Code 就"学会"了如何用 Remotion 创建视频。它知道 Remotion 的 API、最佳实践、常见陷阱，可以根据你的自然语言描述生成正确的代码。
4.2 安装 Remotion Skills
前置条件：
确保你已经安装了 Node.js 18+、Claude Code，并且有一个已初始化的 Remotion 项目。
如果还没有 Remotion 项目，先创建一个：
npx create-video@latest my-video
cd my-video
npm install安装 Skills：
Remotion 官方提供了专门的 Skills 包，安装方式如下：
npx skills add remotion-dev/skills这个命令会：
- 从 GitHub 下载 Remotion 的 Agent Skills
- 将其安装到你的项目或全局配置中
- Claude Code 会自动检测并加载这些 Skills
验证安装：
启动 Claude Code，输入一个简单的请求测试：
> 帮我创建一个简单的文字动画，显示 "Hello World"，带有淡入效果如果 Claude 能够生成正确的 Remotion 代码，说明 Skills 安装成功。
4.3 第一个 AI 生成的视频
让我们来做一个完整的实战案例。假设我们要创建一个产品宣传视频，包含以下元素：
- 品牌 Logo 动画入场
- 产品特点文字依次展示
- 背景颜色渐变
- 最后显示 Call to Action
打开终端，进入 Remotion 项目目录，启动 Claude Code：
cd my-remotion-project
claude然后输入你的需求：
> 帮我创建一个 15 秒的产品宣传视频，要求如下：
> 1. 视频尺寸 1920x1080，30fps
> 2. 前 3 秒：品牌 Logo 从中心缩放弹入，有弹簧效果
> 3. 3-10 秒：三个产品特点文字依次从右侧滑入，每个持续约 2 秒
> - "极速体验"
> - "安全可靠"
> - "简单易用"
> 4. 10-15 秒：显示 "立即体验" 的 Call to Action 按钮，有脉冲效果
> 5. 整体背景使用深蓝色到紫色的渐变
> 6. 配色方案：科技感的蓝紫色系Claude 会分析你的需求，然后生成相应的 React 组件代码。它可能会创建多个文件：
src/ProductVideo.jsx- 主视频组件src/components/Logo.jsx- Logo 动画组件src/components/FeatureText.jsx- 特点文字组件src/components/CTAButton.jsx- Call to Action 组件
生成的代码可能类似这样：
// src/ProductVideo.jsx
import { useCurrentFrame, useVideoConfig, interpolate, spring, Sequence } from 'remotion';
import { Logo } from './components/Logo';
import { FeatureText } from './components/FeatureText';
import { CTAButton } from './components/CTAButton';
export const ProductVideo = () => {
const frame = useCurrentFrame();
const { width, height, durationInFrames } = useVideoConfig();
// 背景渐变
const gradientProgress = interpolate(frame, [0, durationInFrames], [0, 1]);
return (
<div
style={{
width,
height,
background: `linear-gradient(135deg,
hsl(${220 + gradientProgress * 30}, 70%, 20%) 0%,
hsl(${280 + gradientProgress * 20}, 60%, 30%) 100%)`,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
fontFamily: 'Inter, sans-serif',
}}
>
{/* Logo 动画：0-90帧（0-3秒） */}
