Remotion 与 Claude Code 协作实现「代码即视频」的 AI 原生创作体验
TL;DR
Remotion 与 Claude Code 协作实现「代码即视频」的 AI 原生创作体验 | 触发：在探索 AI 时代视频创作工作流时，发现 Remotion 作为代码驱动视频框架，与 Claude
触发场景
在探索 AI 时代视频创作工作流时，发现 Remotion 作为代码驱动视频框架，与 Claude Code 的自然语言理解能力结合，可以实现「说话就能生成视频」的体验。传统视频软件需要手动在时间轴上拖动调整，而 Remotion 将视频变成了一段 React 代码——这本质上是思维范式的根本转变：从「剪辑师」变成「视频工程师」。
行动步骤
- Remotion 的所有动画和交互都基于
useCurrentFrame()驱动
- 所有动画的本质都是数学函数：给定帧号 → 返回一个值
- CSS
transition和animation在 Remotion 中无效，Tailwind 动画 class 也会被忽略
- 所有动效必须通过帧号计算，如
interpolate(frame, [0, 30], [0, 1])
- 不写「先淡入，再停留，再淡出」的过程代码
- 直接声明每个属性在特定帧号的最终值
interpolate()是这套声明式数学的核心工具
- 视频 = Root 组件 → 多个 Sequence（序列）→ 各自嵌套的子组件
- 与 React 组件树完全一致，视频就是一个 React 应用，只是渲染的是像素而非 DOM
- 用 Zod Schema 定义参数，让视频可以被外部数据驱动
- 有了 Schema，Claude Code 可以通过修改 props 实时控制视频内容
- 这是 AI 生成视频的基础
- 推荐使用弹簧物理模型，而非手动写缓动曲线
- 常用配置：
- 平滑淡入（无弹跳）：
damping: 200
- 干脆利落（UI元素）：
damping: 20, stiffness: 200
- 活泼弹跳：
damping: 8
- 沉重缓慢（大物体）：
damping: 15, stiffness: 80, mass: 2
Sequence：在时间轴上放置片段，可设置起始帧和持续帧数
Series：多个片段顺序播放，自动处理时间轴布局
TransitionSeries：带过渡效果的场景序列
- 图片：
staticFile("x.png")放在public/文件夹，用<Img src={...} />
- 视频片段：
<Video src={staticFile("clip.mp4")} />
- 音频：
<Audio src={staticFile("bgm.mp3")} />
- 关键规则：不要用相对路径或 import，必须用
staticFile()包裹
- 让视频内容由外部数据决定
- 同一个视频模板，可根据传入的
videoId拉取不同数据，渲染出完全不同的成品
证据
核心思维原则
原则 1：一切都是帧（Frame）
- Remotion 的所有动画和交互都基于
useCurrentFrame()驱动 - 所有动画的本质都是数学函数：给定帧号 → 返回一个值
- CSS
transition和animation在 Remotion 中无效，Tailwind 动画 class 也会被忽略 - 所有动效必须通过帧号计算，如
interpolate(frame, [0, 30], [0, 1])
原则 2：声明式，而非过程式
- 不写「先淡入，再停留，再淡出」的过程代码
- 直接声明每个属性在特定帧号的最终值
interpolate()是这套声明式数学的核心工具
原则 3：组件化思维
- 视频 = Root 组件 → 多个 Sequence（序列）→ 各自嵌套的子组件
- 与 React 组件树完全一致，视频就是一个 React 应用，只是渲染的是像素而非 DOM
原则 4：参数化（Parametric）设计
- 用 Zod Schema 定义参数，让视频可以被外部数据驱动
- 有了 Schema，Claude Code 可以通过修改 props 实时控制视频内容
- 这是 AI 生成视频的基础
四大核心模块
1. 动画系统：spring() + interpolate()
- 推荐使用弹簧物理模型，而非手动写缓动曲线
- 常用配置：
- 平滑淡入（无弹跳）：damping: 200
- 干脆利落（UI元素）：damping: 20, stiffness: 200
- 活泼弹跳：damping: 8
- 沉重缓慢（大物体）：damping: 15, stiffness: 80, mass: 2
2. 时间轴编排：Sequence + Series + TransitionSeries
Sequence：在时间轴上放置片段，可设置起始帧和持续帧数Series：多个片段顺序播放，自动处理时间轴布局TransitionSeries：带过渡效果的场景序列
3. 素材系统
- 图片：
staticFile("x.png")放在public/文件夹，用<Img src={...} /> - 视频片段：
<Video src={staticFile("clip.mp4")} /> - 音频：
<Audio src={staticFile("bgm.mp3")} /> - 关键规则：不要用相对路径或 import，必须用
staticFile()包裹
4. 元数据驱动：calculateMetadata
- 让视频内容由外部数据决定
- 同一个视频模板，可根据传入的
videoId拉取不同数据，渲染出完全不同的成品
Claude Code × Remotion 工作流
用户 → Claude Code（理解需求→拆解场景→设计Schema→生成动画代码） → Remotion Studio 预览渲染
Claude Code 负责：理解需求、拆解场景、设计 Composition 结构、生成 Zod Schema、编写动画逻辑、编排 Sequence 时间轴、插入音频字幕图表 Logo 等。
AI 创作的正确打开方式
Remotion 的最大价值不在于「替代 After Effects」，而在于它让视频创作可以被编程。
| 传统方式 | Remotion + Claude Code |
|----------|----------------------|
| 手动调整每个关键帧 | 描述动画意图，Claude Code 生成帧计算代码 |
| 一个个导出视频 | 一次编写模板 + 数据集，批量渲染 |
| 手动更新每周数据 | calculateMetadata 自动拉取，模板不变 |
| 写配音稿再手动对字幕 | 写好配音稿，Claude Code 生成时间轴对齐代码 |
核心心法：把你的视频创作当作「写一个会渲染视频的 React 应用」，而不是「用代码操作时间轴」。
快速参考
帧 → 秒转换： seconds = frame / fps
淡入动画： spring({ frame, fps, delay: N })
滑入动画： interpolate(frame, [0,30], [-300,0])
弹性效果： spring({ config: { damping: 8 } })
平滑效果： spring({ config: { damping: 200 } })
打字机效果： text.slice(0, Math.floor(frame / fps * charsPerSecond))
素材引用： staticFile("filename.png") // 必须放 public/
音频播放： <Audio src={staticFile("bgm.mp3")} />
参数化 Schema： z.object({ title: z.string(), color: zColor() })
失败边界
暂无已知失败边界
易混淆场景
暂无已知混淆场景
原理
Remotion 成功的核心原理在于编程语言对视频媒介的全面接管：
- 传统视频软件是操作界面（用时间轴操作像素）
- Remotion 是编程语言（用函数描述像素随时间的变化）
- 这类似于从手动编织毛衣 → 针织机编程的转变
当与 Claude Code 结合时，Claude Code 的自然语言理解充当了「翻译层」——将人的意图翻译成帧数学函数。这种方式的本质是参数化设计（Parametric Design）在视频领域的应用，与 CAD 参数化建模同构。
关联与延伸
- 相关笔记：[[INDEX-ai]]
- 延伸阅读：- 相关工具：Remotion Studio（云端预览）、Lambda（云端分布式渲染）
- 关联技能：[[Claude Code 协作工作流]]、[[AI 视频生成技术]]
- 应用场景：批量生成模板视频、数据驱动内容视频、动态字幕与动画
- 参考文档：[[Remotion 官方文档 (remotion.dev)]]、[[Remotion Best Practices Skill]]
使用记录
| 日期 | 项目/场景 | 结果 | 备注 |
|------|----------|------|------|