> ## Content Index
> Fetch the complete content index at: https://www.hubwiz.com/blog/llms.txt
> Use this file to discover other available public pages before exploring further.

# Remotion：用代码制作视频
- URL: https://www.hubwiz.com/blog/remotion-making-videos-with-code/
- Published: 2026-04-23T14:46:09.000Z
- Updated: 2026-04-23T14:46:09.000Z
- Description: Remotion就是视频版的React。你用TypeScript编写组件来描述每一帧应该出现什么，系统将这些组件渲染成MP4文件。
- Author: admin
- Tags: TOOL, REMOTION, #Import 2026-10-14 14:41

这个周四，我让Claude Code为我制作了一段产品发布视频。我用简单的英语描述了我想要的效果，就像在跟一个视频编辑器说话一样。十分钟后，我得到了一段30秒的剪辑，包含动画文字、同步音乐和产品截图，随时可以发布。没有时间轴拖拽，没有关键帧查找，没有数小时的渲染。

这不是AI从文本提示生成随机视频。那种技术确实存在，但产生的结果不一致且无法编辑。这是不同的。Claude编写渲染视频的代码。你可以获得精确性、可编辑性，以及从单个模板生成数千个变体的能力。

以下是你开始以这种方式制作视频所需知道的一切。

## 1、Remotion到底是什么

Remotion就是视频版的React。你用TypeScript编写组件来描述每一帧应该出现什么，系统将这些组件渲染成MP4文件。一个淡入的按钮？那是一个插值函数。一个有弹簧物理效果弹跳的logo？那是一个带有可配置质量和刚度的spring()辅助函数。

与传统视频编辑的关键区别：Remotion不录制你的屏幕，也不依赖GUI中的时间轴操作。它通过截取无头浏览器的屏幕截图来逐帧渲染，然后用FFmpeg将它们拼接在一起。当你在第100帧时，系统将帧计数器设置为100，让React更新DOM，等待所有内容加载，截取屏幕截图，然后移动到第101帧。

![None](https://www.hubwiz.com/blog/content/images/2026/04/1-v6ivPBUEqQh9447R0G_XSg.png)

这种架构意味着视频变成了代码。你可以对其进行版本控制、自动化、从数据生成以及无限扩展。一个模板可以产生数千个个性化视频。更改一个变量，重新渲染，你就能获得一个完全不同的视频，零手动编辑。

缺点是某些代码模式会破坏视频。如果你使用Math.random()来定位元素，每一帧都由不同的进程渲染，你的"随机"位置在渲染之间会发生变化。你的五彩纸屑动画变成了一个故障混乱。你需要理解完美帧渲染的约束。

这就是Claude Code技能系统发挥作用的地方。

## 2、用Remotion技能设置Claude Code

Remotion技能教会Claude使视频渲染正常工作的特定规则。没有它，Claude像Web开发者一样编写代码。这些代码在浏览器预览中运行完美，但会产生抖动的、不一致的视频渲染。加载技能后，Claude像理解确定性的视频工程师一样编写代码。

以下是完整的设置过程。大约需要两分钟。

**步骤1：安装Node.js** 如果你没有安装Node.js，从nodejs.org获取。你需要18或更高版本。

**步骤2：创建Remotion项目** 打开终端并运行：

```
npx create-video@latest my-first-video --template=blank
cd my-first-video

```

空白模板给你一个干净的起点。避免使用"hello-world"或复杂模板，因为它们会在项目中填充可能混淆Claude上下文的示例代码。

**步骤3：安装Remotion技能** 在项目目录内运行：

```
npx skills add remotion-dev/skills

```

这会下载一组Claude可以读取的markdown文件。这些文件包含正确编写Remotion代码的规则。当你提到视频相关任务时，Claude会自动加载相关规则。

**步骤4：启动预览服务器** 运行：

```
npx remotion studio

```

浏览器窗口打开，显示你的视频合成。这是你的实时预览。保持打开。当Claude构建你的视频时，你会立即看到变化。

就是这样。你已经准备好制作视频了。

## 3、如何与Claude对话：两种方法

你可以用两种不同的方式提示Claude，取决于你想要精确控制还是更倾向于描述创意意图。两种都有效。根据你正在构建的内容混合使用它们。

### 3.1 精确方法：当你确切知道自己想要什么

如果你有清晰的技术愿景，给Claude具体的指令。

**示例提示：** "创建一个名为'TitleCard'的合成，分辨率1920x1080，30fps，共120帧。添加居中文字，内容为'LAUNCH DAY'，粗体Inter字体，80px。在第0-30帧之间动画透明度从0到1。在相同范围内动画缩放从0.5到1.0。两个动画都使用easeOutCubic。黑色背景，白色文字。"

Claude生成具有精确时间的代码。在第15帧，你会看到恰好50%的动画完成。当你在同步音频或匹配指定精确时长的品牌指南时，这种精度很重要。

在以下情况使用此方法：

- 你需要用于音频同步的帧精确时间
- 你在匹配特定的品牌要求
- 你知道自己想要的确切结构
- 你在调试或排查特定问题

### 3.2 创意方法：当你在描述一种感觉

如果你更关心感觉而不是技术实现，就像在跟创意总监说话一样描述它。

**示例提示：** "制作一个标题，内容是'LAUNCH DAY'，粗体白色文字。它应该感觉有分量，像有真实的重量。让它从小开始，带着令人满意的弹跳生长到位，像沉重但有弹性的东西落地。不是快速弹跳，更像是有意的沉淀。让它感觉高端和自信。黑色背景。"

Claude将"重量"和"有分量"解读为使用更高质量弹簧物理的理由。"令人满意的弹跳"告诉它调整阻尼以实现单次干净弹跳。"高端"影响字体选择和间距。"自信"影响时间曲线，使其是有意的而非匆忙的。

在以下情况使用此方法：

- 你在探索想法并想快速迭代
- 你更关心情感质量而不是精确规格
- 你不确定技术实现
- 你想让Claude做创意决策

两种提示产生相似的结果，但第一个给你精确控制，而第二个给你创意灵活性。你甚至可以混合它们："让它感觉沉重和高端，但淡入应该正好在一秒内完成。"

![None](https://www.hubwiz.com/blog/content/images/2026/04/1-7BVHqUl5OeHXnReTb1xrJQ.png)

## 4、你的第一个视频：简单测试

从基本的东西开始，验证你的设置是否有效。大约需要30秒。

**提示：** "创建一个简单的测试合成。只是让白色文字说'Hello World'从头开始平滑淡入。黑色背景。让它感觉干净简洁。"

Claude会：

1. 创建具有合理默认值的合成（1920x1080，30fps）
2. 添加文字组件
3. 应用淡入动画
4. 设置黑色背景

在Remotion Studio预览中，你会看到文字淡入。通过拖动播放头擦除时间轴。淡入应该平滑且一致。如果有效，你的环境就准备好了。

如果你看到错误，将它们粘贴回Claude。技能使Claude在调试自己的代码方面出奇地出色。它知道常见的陷阱，可以解释哪里出了问题。

## 5、构建真实项目：实用模式

一旦你的简单测试成功，你就可以处理真实项目。以下是你将反复使用的核心模式。

### 5.1 在时间轴上分层元素

真实视频有多个在不同时间出现的元素。Remotion使用Sequence来控制事物何时出现。

**提示：** "创建一个视频，包含三个依次出现的文字元素：

- 第一个：'INTRODUCING'在开始时淡入
- 第二个：'THE FUTURE'在第一个完成后出现，带有弹跳入口
- 第三个：'OF DESIGN'在第二个之后从左侧滑入

让每个过渡感觉自然，不急促。"

Claude创建三个Sequence组件，每个在前一个完成后开始。动画在每个序列内独立运行。这就是你构建复杂视频而不产生时间冲突的方式。

### 5.2 添加图片和素材

图片需要特殊处理以防止空白帧。

**提示：** "我要在public/文件夹中放置一个名为logo.png的文件。将它添加到视频中，居中在顶部。让它平滑淡入，带有微妙的缩放效果，像轻轻出现一样。使用Remotion Img组件，这样它会等待图片加载完成再渲染。"

最后部分至关重要。Claude知道使用Remotion的 `<Img />` 而不是标准的 `<img>`。这个组件向渲染器发出信号，等待图片完全加载。没有它，你会得到空白帧。

在Claude生成代码后，实际在项目文件夹的 `public/logo.png` 放一张图片。任何图片都可以用于测试。

### 5.3 集成音频

音频让视频感觉完整。Remotion自动处理音频同步。

**提示：** "从public/music.mp3添加背景音乐。同时在屏幕底部创建一个简单的音频可视化。制作随节拍脉动的条形。它们应该感觉有活力，对低音响应强烈。"

Claude将使用 `<Audio />` 组件进行播放，使用 `visualizeAudio()` 进行可视化。条形将实际响应音频文件的频率数据。"有活力"和"对低音响应强烈"指导Claude的可视化风格实现。

在 `public/music.mp3` 放置一个音频文件，同步会自动发生。

### 5.4 制作数据驱动的视频

这是Remotion变得强大的地方。你不需要为每个客户手动编辑文本，而是注入数据。

**提示：** "修改合成以接受具有以下字段的输入数据：customerName和purchaseAmount。显示'Thanks \[customerName\]!'作为标题，以及'Your purchase of $\[purchaseAmount\] is confirmed'作为副标题。让两者以友好、温馨的感觉淡入。"

Claude为props添加TypeScript接口并修改组件以使用注入的值。现在你可以渲染多个版本：

```
npx remotion render src/index.ts ThankYou sarah.mp4 --props='{"customerName":"Sarah","purchaseAmount":"299"}'
npx remotion render src/index.ts ThankYou mike.mp4 --props='{"customerName":"Mike","purchaseAmount":"499"}'

```

一个模板，无限的个性化视频。这以一种传统编辑无法匹配的方式扩展了视频生产。

## 6、值得探索的高级技巧

一旦你构建了几个可工作的视频，这些技术将解锁新的创意可能性。

### 6.1 弹簧物理实现自然运动

线性插值让东西动起来，但弹簧物理让它们带有个性地运动。

**提示：** "用弹簧物理替换标题淡入。让它感觉文字有重量，落地时会轻微弹跳。不要太弹，刚好感觉有活力和生机。"

产生的动画会略微过冲再稳定。它感觉有机，因为它模仿真实物理。你可以优化它："让弹跳更微妙"或"让它更快地到位，减少过冲"，Claude会调整弹簧参数。

### 6.2 3D对象和摄像机运动

Remotion可以使用Three.js渲染完整的3D场景。

**提示：** "创建一个3D场景，一个铬球体漂浮在空间中。让它缓慢且有催眠感地旋转。添加彩色灯光，让球体反射彩虹条纹。摄像机应该慢慢围绕它运行。深色背景，让它感觉高端和未来感。"

你无需接触任何3D软件就能在视频中获得WebGL 3D图形。将"球体"改为"立方体"或"环面"，Claude会调整几何体。这适用于产品渲染、抽象背景或动态雕塑。

### 6.3 感觉经过设计的文字效果

动态排版将业余视频与专业视频区分开来。

**提示：** "制作逐字打出的文字，但要感觉人性化，不是机器人。时间上有轻微的不规则，偶尔在单词之间停顿。添加一个闪烁的光标。文字内容应该是'Ideas emerge from experimentation.'。让它感觉沉思。"

你会得到带有拟人化时间变化的打字机动画。"沉思"放慢整体节奏并影响字体选择。这适用于代码展示、诗意文本或戏剧性陈述。

### 6.4 动态视频长度

Remotion合成可以根据内容计算自己的时长。

**提示：** "创建一个显示项目列表的视频。视频长度应该根据我给它的项目数量自动调整。每个项目应该显示几秒钟，之间有平滑过渡。添加一个无论项目数量如何都保持一致的片头和片尾。"

给它三个项目，你得到九秒的视频。给它十个项目，你得到三十秒的视频。模板会自适应。这就是你为体育集锦、产品展示或新闻摘要构建可扩展视频系统的方式。

## 7、出问题时：调试方法

你的前几个视频会有问题。以下是系统化的修复方法。

**如果预览看起来不对：** 将错误粘贴给Claude或描述哪里不对。技能使其在调试方面非常出色。它知道闪烁通常意味着非确定性代码，空白帧通常意味着素材加载问题，时间问题通常意味着序列错误。

**如果渲染失败：** 添加 `--log=verbose` 查看详细输出：

```
npx remotion render src/index.ts MyComp output.mp4 --log=verbose

```

将日志展示给Claude。它可以识别瓶颈或编码问题。

**如果在预览中正常但渲染时出错：** 使用 `--concurrency=1` 运行：

```
npx remotion render src/index.ts MyComp output.mp4 --concurrency=1

```

这强制单线程渲染。如果它修复了问题，说明你有不是帧独立的代码。Claude可以帮助重构。

## 8、迭代优势

传统视频编辑是线性的。你做更改、导出、审查、重复。每个周期需要几分钟。使用Remotion和Claude Code，迭代是即时的。

我构建了一个带有动画UI模型截图的演示视频。客户想要将蓝色强调色改为绿色。在After Effects中，我需要手动更新每个元素。在Remotion中，我告诉Claude"将主色改为#00FF00"，它更新了一个变量。一个命令，整个视频在30秒内重新渲染。

这种速度改变了你的工作方式。你实验更多，因为成本可以忽略不计。尝试不同的时间。测试不同的物理配置。探索替代合成。视频改进是因为迭代成本几乎为零。

## 9、当Remotion不是正确选择时

要诚实地面对局限性。

**对于传统素材编辑：** 如果你是在剪辑摄像机拍摄的片段，使用DaVinci Resolve或Final Cut。Remotion处理预制素材，而不是数小时的原始素材。基于时间轴的NLE更适合那种工作流。

**对于手绘动画：** 如果你需要迪士尼级别的带有挤压和拉伸的角色动画，使用Adobe Animate或Blender。Remotion擅长动态图形和程序化动画，而不是逐帧角色作品。

**对于非常短的片段：** 为3秒的logo揭示设置Remotion项目是杀鸡用牛刀。使用After Effects或Canva。Remotion的强大之处在于大规模生成变体或构建较长内容时才显现。

## 10、今天就开始制作视频

这是你的行动计划：

1. 运行设置命令（2分钟）
2. 用简单淡入测试（30秒）
3. 添加图片练习素材处理（2分钟）
4. 集成音频并尝试可视化（5分钟）
5. 构建你真正需要的东西（30分钟）

你会遇到错误。这是预期的。将它们粘贴到Claude并询问哪里出了问题。技能系统意味着它知道常见的陷阱，可以清晰地解释解决方案。

不要试图立即构建复杂的模板。从简单开始。掌握文字动画。然后添加图片。然后尝试弹簧。然后实验3D。逐步构建复杂性。

编程视频的障碍刚刚崩塌。你不需要成为视频编辑器或程序员。你需要清楚地描述你想要什么，Claude处理从创意意图到工作代码的转换。你在用与向另一个人解释视频相同的方式指导视频。

区别在于这个人知道如何编写Remotion代码。而事实证明这就是你所需要的一切。

---

原文链接: [Making Videos with Code: The Complete Guide to Remotion and Claude Code](https://freedium-mirror.cfd/https://medium.com/@creativeaininja/making-videos-with-code-the-complete-guide-to-remotion-and-claude-code-82892e21d022?ref=hubwiz.com)

汇智网翻译整理，转载请标明出处