用Remotion + Claude Code从零做一个AI视频

黑粉科技 — 让普通人也能驾驭 AI。掌握 AI 的人，将成为各个领域的王者。

官网：https://hyphentech.top

为什么是Remotion，而不是其他AI视频工具？

第一部分：环境搭建

1.1 前置条件

1.2 初始化Remotion项目

# 方法一：用npm
bun create video
# 或
npm init video

cd my-video
npm start
# 浏览器打开 localhost:3000 即可RemotionStudio预览

my-video/
├── src/
│   ├── Root.tsx          # 注册所有Composition
│   ├── Composition.tsx   # 主视频组件
│   └── index.ts          # 入口文件
├── public/               # 静态资源（图片、音频、字体）
├── package.json
└── remotion.config.ts

1.3 安装Agent Skills（核心步骤）

npx skills add remotion-dev/skills

.claude/skills/remotion-best-practices/
├── SKILL.md              # 主入口文件
└── rules/
    ├── animations.md     # 动画最佳实践
    ├── audio.md          # 音频处理规则
    ├── compositions.md   # Composition结构规范
    ├── fonts.md          # 字体加载
    ├── subtitles.md      # 字幕处理
    └── 3d.md             # Three.js集成

第二部分：Remotion核心概念速览

2.1 Composition——视频的「画布」

<Composition
  id="MyVideo"
  component={MyVideoComponent}
  width={1920}
  height={1080}
  fps={30}
  durationInFrames={300}  // 300帧 ÷ 30fps = 10秒
/>

2.2 useCurrentFrame()——时间的唯一真相

import { useCurrentFrame } from 'remotion';

const frame = useCurrentFrame();  // 第0帧返回0，第30帧返回30...
const opacity = Math.min(1, frame / 30);  // 前1秒淡入

2.3 interpolate()——万能映射函数

import { interpolate, useCurrentFrame } from 'remotion';

const frame = useCurrentFrame();

// 前20帧：透明度0→1，之后保持为1
const opacity = interpolate(
  frame,
  [0, 20],           // 输入范围（帧号）
  [0, 1],            // 输出范围（透明度）
  { extrapolateRight: 'clamp' }  // 超出范围后锁定为1
);

// 多段插值：淡入 → 保持 → 淡出
const opacity2 = interpolate(
  frame,
  [0, 20, 80, 100],  // 四个关键帧
  [0, 1,  1,  0]     // 对应透明度
);

2.4 spring()——物理动画引擎

import { spring, useCurrentFrame, useVideoConfig } from 'remotion';

const frame = useCurrentFrame();
const { fps } = useVideoConfig();

const scale = spring({
  frame,
  fps,
  config: {
    mass: 1,        // 质量，越小越快
    damping: 10,    // 阻尼，越大越不弹
    stiffness: 100, // 刚度，越大越「脏」
  },
});

// 用spring值驱动位移
const x = interpolate(scale, [0, 1], [0, 200]);

2.5 Sequence——场景编排

import { Sequence } from 'remotion';

// 场景1：第0-90帧（3秒）
<Sequence from={0} durationInFrames={90}>
  <Scene1 />
</Sequence>

// 场景2：第90-180帧（接上3秒）
<Sequence from={90} durationInFrames={90}>
  <Scene2 />
</Sequence>

第三部分：提示词框架——如何跟Claude Code对话

3.1 基础提示词结构

创建一个[X秒]的视频。

场景描述：[...详细描述每个场景的内容]
动画风格：[干净/进攻/柔和/赛博朋克...]
色调：[主色+辅色+背景色]
分辨率：[1920x1080 / 1080x1920竖屏]
帧率：[30fps]

3.2 第一层：快速原型提示词

3.3 第二层：多场景结构化提示词

3.4 第三层：带技术约束的专业提示词

第四部分：完整工作流实战

4.1 提示词 → 预览 → 迭代循环

4.2 资源管理

import { Img, Audio, staticFile } from 'remotion';

// 加载图片
<Img src={staticFile('logo.png')} />

// 加载音频
<Audio src={staticFile('bgm.mp3')} />

// 加载视频素材
<OffthreadVideo src={staticFile('background.mp4')} />

public/
├── images/       # logo、截图、背景图
├── audio/        # BGM、音效
├── videos/       # 视频素材
└── fonts/        # 自定义字体

4.3 音频集成详解

import { Audio, Sequence, staticFile, interpolate, useCurrentFrame } from 'remotion';

// 基础音频
<Audio src={staticFile('audio/bgm.mp3')} />

// 带淡出的BGM
const AudioWithFade = () => {
  const frame = useCurrentFrame();
  const volume = interpolate(
    frame,
    [0, 30, 270, 300],  // 第0-1秒淡入，第9-10秒淡出
    [0, 0.8, 0.8, 0]
  );
  return <Audio src={staticFile('audio/bgm.mp3')} volume={volume} />;
};

第五部分：主题注入系统——让视频风格可复用

// src/themes/darkCinema.ts
export const darkCinema = {
  bg: '#0F1923',
  surface: '#141E2B',
  card: '#1A2736',
  cyan: '#13C2C2',
  amber: '#FFB300',
  text: '#E8EDF2',
  textDim: '#7B8FA3',
  fontFamily: 'Noto Sans SC, sans-serif',
  fontMono: 'JetBrains Mono, monospace',
};

第六部分：渲染与导出

6.1 本地渲染

# 渲染为MP4
npx remotion render src/index.ts MyVideo out/video.mp4

# 指定编码器和质量
npx remotion render src/index.ts MyVideo out/video.mp4 --codec h264 --crf 18

# 渲染为WebM（适合Web嵌入）
npx remotion render src/index.ts MyVideo out/video.webm --codec vp8

# 只渲染静态帧（用作封面图）
npx remotion still src/index.ts MyVideo out/thumbnail.png --frame=45

6.2 渲染速度优化

6.3 通过提示词触发渲染

第七部分：可直接套用的提示词模板库

🎬 YouTube频道片头

创建一个3秒的YouTube频道片头，1920x1080，30fps。

场景：深色背景上，网格线条缓慢流动，发光的频道名logo从粒子
中凝聚成型（用spring动画，damping:10）。最终logo稳定后，底部
出现频道口号（淡入）。
色调：深蓝#0F1923底，cyan#13C2C2主色。
logo图片：public/images/logo.png

📱 竖屏短视频模板

创建5秒竖屏视频，1080x1920，30fps。展示一个概念。

场景1(0-2秒)：大标题“你还在手动剪视频？”从下方spring弹入。
场景2(2-4秒)：标题换成“让AI帮你做”，配辅动态图标。
场景3(4-5秒)：二维码+“关注黑粉科技”。
风格：干净极简，白底黑字，cyan强调色。

📊 数据可视化视频

创建8秒的数据统计动画视频，1920x1080，30fps。

内容：展示三个数字指标，每个用spring动画从0滚到目标值。
指标数据：
- 用户数：128,000
- 视频播放量：2,450,000
- 平均观看时长：4.2分钟

用stagger动画，每个指标比前一个晚15帧出现。
数字滚动用Math.floor(interpolate(spring, [0,1], [0, targetValue]))实现。
每个指标带一个微妙的底部进度条动画。
风格：深色背景，cyan强调色。

💻 终端打字机动画

创建6秒的终端风格代码打字动画，1920x1080，30fps。

模拟终端界面：深色背景，绿色等宽字体。
逐字符显示以下内容：
$ npx create-video my-project
✓ Created project successfully
$ cd my-project && npm start
✓ Studio running at localhost:3000

每个字符间隔3帧，行间间隔15帧。
光标用一个闪烁的方块表示，每15帧切换显示/隐藏。
打字完成后光标继续闪烁1.5秒。

第八部分：进阶技巧

8.1 提示词链——增量迭代而非一次性生成

8.2 组件复用

8.3 参数化视频——批量生产

# 传入不同props渲染不同版本
npx remotion render src/index.ts MyVideo out/ep01.mp4 \
  --props='{"title":"第1期","topic":"AI视频生成"}'

npx remotion render src/index.ts MyVideo out/ep02.mp4 \
  --props='{"title":"第2期","topic":"Remotion实战"}'

8.4 Stills——用视频代码生成封面图

import { Still } from 'remotion';

// 在Root.tsx中注册
<Still
  id="Thumbnail"
  component={ThumbnailComponent}
  width={1280}
  height={720}
/>

npx remotion still src/index.ts Thumbnail out/thumbnail.png

第九部分：常见问题与避坑指南

总结：这套管线的价值

黑粉科技 — 用 AI 变强

让普通人也能驾驭 AI。掌握 AI 的人，将成为各个领域的王者。

官网：hyphentech.top