Remotion：用代码制作视频

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

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

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

1、Remotion到底是什么

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

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

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

缺点是某些代码模式会破坏视频。如果你使用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做创意决策

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

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

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

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

Claude会：

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

在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、今天就开始制作视频

这是你的行动计划：

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

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

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

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

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

原文链接: Making Videos with Code: The Complete Guide to Remotion and Claude Code

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