12c - 端到端工作流

┌─────────────────────────────────────────────────────────────────────────┐
│                    Remotion + AI Agent 端到端工作流                       │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  ┌───────────┐    ┌───────────────┐    ┌──────────────┐                │
│  │ 阶段 1    │    │ 阶段 2        │    │ 阶段 3       │                │
│  │ Prompt    │───→│ AI 代码生成   │───→│ 预览与迭代   │                │
│  │ 需求描述  │    │ Claude Code   │    │ Studio       │                │
│  └───────────┘    └───────────────┘    └──────┬───────┘                │
│                                               │                         │
│                                               ↓                         │
│                   ┌───────────────┐    ┌──────────────┐                │
│                   │ 阶段 5        │    │ 阶段 4       │                │
│                   │ 分发与集成    │←───│ 渲染输出     │                │
│                   │ CDN/邮件/API  │    │ CLI/Lambda   │                │
│                   └───────────────┘    └──────────────┘                │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

自然语言 prompt
    │
    ▼
┌──────────────────────────────────┐
│  Claude Code + Remotion Skills   │
│  ┌────────────────────────────┐  │
│  │ 1. 解析需求（场景、时长、  │  │
│  │    分辨率、动画风格）      │  │
│  │ 2. 加载 Skills 知识        │  │
│  │    （API 模式、最佳实践）  │  │
│  │ 3. 生成 React 组件代码     │  │
│  │ 4. 注册 Composition        │  │
│  └────────────────────────────┘  │
└──────────────┬───────────────────┘
               │
               ▼
        React/TypeScript 源码
        （.tsx 组件文件）
               │
               ▼
┌──────────────────────────────────┐
│  Remotion 渲染引擎               │
│  ┌────────────────────────────┐  │
│  │ 对每一帧（frame 0..N）：   │  │
│  │ 1. 调用 React 组件         │  │
│  │ 2. 传入当前帧号            │  │
│  │ 3. 渲染为 HTML/CSS         │  │
│  │ 4. Chrome Headless 截图    │  │
│  │ 5. 编码为视频帧            │  │
│  └────────────────────────────┘  │
└──────────────┬───────────────────┘
               │
               ▼
         MP4 / WebM 视频文件

请帮我创建一个 Remotion 视频组件：

【基本参数】
- 分辨率：1080x1920（竖屏，适合抖音/YouTube Shorts）
- 时长：15 秒
- 帧率：30fps

【内容结构】
- 场景 1（0-3 秒）：标题 "[标题文字]" 从底部弹入，带 spring 动画
- 场景 2（3-10 秒）：依次展示 5 个要点，每个要点淡入停留后淡出
- 场景 3（10-15 秒）：结尾 CTA 文字 + Logo

【视觉风格】
- 背景：深色渐变（#0a0a0a → #1a1a2e）
- 主色调：#6366f1（靛蓝色）
- 字体：大标题 72px 粗体，正文 36px 常规
- 动画风格：流畅弹性（使用 spring 而非线性 interpolate）

【数据驱动】
- 要点内容从 props 传入，方便批量生成不同版本
- 导出 Props 类型接口

【输出要求】
- 创建组件文件并注册到 Root.tsx
- 使用 Sequence 组织时间线
- 使用 AbsoluteFill 做全屏布局

你是一个 Remotion 视频开发专家。我需要创建一个 [类型] 视频。

【视频概述】
[用 2-3 句话描述视频的整体内容和目的]

【基本参数】
- 分辨率：[宽]x[高]
- 时长：[秒数] 秒
- 帧率：[30/60] fps

【场景分解】
- 场景 1（[起始秒]-[结束秒] 秒）：[描述内容和动画]
- 场景 2（[起始秒]-[结束秒] 秒）：[描述内容和动画]
- ...

【视觉规范】
- 背景：[颜色/渐变]
- 主色调：[色值]
- 字体大小：[标题/正文]
- 动画风格：[弹性/线性/缓动]

【参数化需求】
- [列出需要从 props 动态传入的内容]

请生成完整的组件代码并注册到 Root.tsx。

cd my-video-project
claude

src/
├── Root.tsx                    # 更新：注册新的 Composition
├── MyVideo/
│   ├── index.tsx               # 主视频组件（组合所有场景）
│   ├── TitleScene.tsx          # 场景 1：标题动画
│   ├── ContentScene.tsx        # 场景 2：内容展示
│   ├── OutroScene.tsx          # 场景 3：结尾 CTA
│   └── types.ts                # Props 类型定义

// src/MyVideo/index.tsx
import { AbsoluteFill, Sequence } from "remotion";
import { TitleScene } from "./TitleScene";
import { ContentScene } from "./ContentScene";
import { OutroScene } from "./OutroScene";
import { MyVideoProps } from "./types";
 
export const MyVideo: React.FC<MyVideoProps> = (props) => {
  return (
    <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
      {/* 场景 1：标题（第 0-90 帧，即 0-3 秒 @30fps） */}
      <Sequence from={0} durationInFrames={90}>
        <TitleScene title={props.title} />
      </Sequence>
 
      {/* 场景 2：内容（第 90-300 帧，即 3-10 秒） */}
      <Sequence from={90} durationInFrames={210}>
        <ContentScene items={props.items} />
      </Sequence>
 
      {/* 场景 3：结尾（第 300-450 帧，即 10-15 秒） */}
      <Sequence from={300} durationInFrames={150}>
        <OutroScene cta={props.cta} />
      </Sequence>
    </AbsoluteFill>
  );
};

我在 Remotion Studio 中预览时发现以下问题：
[描述具体问题，如"第二个场景的文字没有动画效果"]

请检查代码并修复。注意：
- 必须使用 useCurrentFrame() 驱动动画，不能用 CSS transition
- 所有 interpolate() 必须设置 extrapolateRight: "clamp"
- 确保帧数计算正确（当前 fps 是 30）

# 在项目根目录启动
npm run dev
# 或
npx remotion studio

┌─────────────────────────────────────────────────────────────┐
│  Remotion Studio 界面                                        │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  ┌─────────────────────────────────┐  ┌──────────────────┐  │
│  │                                 │  │ Composition 列表  │  │
│  │        预览画布                  │  │ ├─ MyVideo       │  │
│  │   （当前帧的渲染结果）           │  │ ├─ TitleScene    │  │
│  │                                 │  │ └─ ContentScene  │  │
│  │                                 │  │                  │  │
│  │                                 │  │ Props 编辑器     │  │
│  │                                 │  │ title: [____]    │  │
│  │                                 │  │ items: [____]    │  │
│  └─────────────────────────────────┘  └──────────────────┘  │
│                                                              │
│  ◀◀  ◀  ▶  ▶▶  ⏹   帧: 045 / 450   时间: 01.5s / 15.0s   │
│  ├────────────●──────────────────────────────────────────┤  │
│                    时间线拖动条                              │
│                                                              │
│  快捷键：J(快退) K(暂停) L(快进) ←→(逐帧)                  │
│                                                              │
└─────────────────────────────────────────────────────────────┘

迭代循环：

    ┌──────────────┐
    │ Studio 预览  │
    │ 发现问题     │
    └──────┬───────┘
           │
           ▼
    ┌──────────────┐
    │ 自然语言描述  │  "把标题动画改成从左侧滑入，
    │ 修改需求     │   而不是从底部弹入"
    └──────┬───────┘
           │
           ▼
    ┌──────────────┐
    │ Claude Code  │
    │ 修改代码     │
    └──────┬───────┘
           │
           ▼
    ┌──────────────┐
    │ Studio 热更新│  ← 代码保存后 Studio 自动刷新
    │ 查看效果     │
    └──────┬───────┘
           │
           ▼
      满意？──否──→ 回到"自然语言描述"
           │
          是
           │
           ▼
      进入渲染阶段

我在 Remotion Studio 中预览了视频，整体效果不错，但需要以下调整：

1. [具体修改 1，如"标题动画太快，延长到 2 秒"]
2. [具体修改 2，如"背景添加微妙的粒子效果"]
3. [具体修改 3，如"结尾场景添加渐隐效果"]

请修改代码。修改后我会在 Studio 中重新预览。

# 基本渲染命令
npx remotion render <CompositionId> <输出路径>
 
# 示例：渲染 MyVideo 组合为 MP4
npx remotion render MyVideo out/my-video.mp4
 
# 指定编码器和质量
npx remotion render MyVideo out/my-video.mp4 --codec=h264 --crf=18
 
# 渲染为 WebM 格式
npx remotion render MyVideo out/my-video.webm --codec=vp8
 
# 渲染为 GIF
npx remotion render MyVideo out/my-video.gif --codec=gif --every-nth-frame=2
 
# 传入自定义 Props（JSON 格式）
npx remotion render MyVideo out/my-video.mp4 \
  --props='{"title":"自定义标题","items":["A","B","C"]}'

渲染过程详解：

npx remotion render MyVideo out/video.mp4
         │
         ▼
┌─────────────────────────────────┐
│ 1. 打包 React 代码（Webpack）    │  ← 约 5-15 秒
└────────────┬────────────────────┘
             ▼
┌─────────────────────────────────┐
│ 2. 启动 Chrome Headless Shell   │  ← 首次需下载，约 100MB
└────────────┬────────────────────┘
             ▼
┌─────────────────────────────────┐
│ 3. 逐帧渲染                     │
│    帧 0: React 渲染 → 截图 → 编码│
│    帧 1: React 渲染 → 截图 → 编码│  ← 主要耗时
│    ...                           │
│    帧 N: React 渲染 → 截图 → 编码│
└────────────┬────────────────────┘
             ▼
┌─────────────────────────────────┐
│ 4. FFmpeg 合成最终视频           │  ← 约 2-5 秒
└────────────┬────────────────────┘
             ▼
        out/video.mp4 ✓

# 方法 1：Shell 脚本循环
for i in 1 2 3 4 5; do
  npx remotion render MyVideo "out/video-$i.mp4" \
    --props="$(cat data/video-$i.json)"
done
 
# 方法 2：使用 Node.js 脚本（推荐）
# render-batch.mjs
import { bundle } from "@remotion/bundler";
import { renderMedia, selectComposition } from "@remotion/renderer";
import { readFileSync } from "fs";
 
const bundleLocation = await bundle("./src/index.ts");
 
const videos = JSON.parse(readFileSync("./data/videos.json", "utf-8"));
 
for (const video of videos) {
  const composition = await selectComposition({
    serveUrl: bundleLocation,
    id: "MyVideo",
    inputProps: video.props,
  });
 
  await renderMedia({
    composition,
    serveUrl: bundleLocation,
    codec: "h264",
    outputLocation: `out/${video.id}.mp4`,
    inputProps: video.props,
  });
 
  console.log(`✓ 渲染完成: ${video.id}`);
}

我的视频预览效果已经满意，现在需要渲染输出。请帮我：

1. 生成渲染命令（MP4 格式，h264 编码，高质量）
2. 如果需要批量渲染 [数量] 个不同版本，请生成批量渲染脚本
3. 数据源格式：[描述数据格式，如 JSON 文件/API 接口]

额外要求：
- [如：需要同时输出横屏和竖屏版本]
- [如：需要生成缩略图（静态帧）]

完整自动化管线：

┌──────────┐    ┌──────────────┐    ┌──────────────┐
│ 数据源    │    │ 渲染服务      │    │ 分发服务      │
│ (API/DB) │───→│ (Lambda)     │───→│ (CDN/邮件)   │
└──────────┘    └──────────────┘    └──────────────┘

具体流程：
1. 定时任务触发（cron / webhook）
2. 从数据库/API 拉取最新数据
3. 为每条数据生成 Props JSON
4. 调用 Remotion Lambda 渲染
5. 渲染完成后上传到 S3/CDN
6. 通过邮件/消息推送视频链接给用户

import { Player } from "@remotion/player";
import { MyVideo } from "./MyVideo";
 
export const VideoPreview: React.FC = () => {
  return (
    <Player
      component={MyVideo}
      durationInFrames={450}
      fps={30}
      compositionWidth={1920}
      compositionHeight={1080}
      style={{ width: "100%" }}
      controls
      inputProps={{
        title: "实时预览",
        items: ["功能 A", "功能 B", "功能 C"],
      }}
    />
  );
};

时间线（约 25 分钟）：

00:00 ─── 阶段 1：编写 Prompt ───────────────────────
  │  确定参数：竖屏 1080x1920，15 秒，30fps
  │  编写结构化 prompt：标题→5 个排名项→结尾
  │
05:00 ─── 阶段 2：AI 生成代码 ───────────────────────
  │  在 Claude Code 中输入 prompt
  │  AI 生成 4 个文件：主组件 + 3 个场景组件
  │  AI 自动注册 Composition 到 Root.tsx
  │
08:00 ─── 阶段 3：预览与迭代 ───────────────────────
  │  npm run dev → 打开 Studio
  │  第 1 轮迭代："动画太生硬，改用 spring"
  │  第 2 轮迭代："添加 emoji 图标"
  │  第 3 轮迭代："背景加渐变和粒子效果"
  │  第 4 轮迭代："把数据改成从 props 传入"
  │
20:00 ─── 阶段 4：渲染输出 ─────────────────────────
  │  npx remotion render TopFive out/top5.mp4
  │  等待渲染完成（约 30 秒）
  │  open out/top5.mp4 → 确认效果
  │
23:00 ─── 阶段 5：分发 ─────────────────────────────
  │  上传到 YouTube Shorts / 抖音
  │  修改 JSON 数据 → 渲染第 2 个版本
  │
25:00 ─── 完成 ✓

请帮我创建一个 "Top 5 编程语言 2026" 的 YouTube Shorts 视频：

【基本参数】
- 分辨率：1080x1920（竖屏）
- 时长：15 秒
- 帧率：30fps

【内容结构】
- 场景 1（0-3 秒）：标题 "Top 5 编程语言 2026" 从底部弹入，带 spring 动画
- 场景 2（3-12 秒）：依次展示 5 个编程语言，每个 1.8 秒
  - 每项包含：排名数字、语言名、emoji、一句话描述
  - 每项从右侧滑入，带 spring 弹性效果
  - 底部有进度条显示当前进度
- 场景 3（12-15 秒）：结尾文字 "关注获取更多" + 渐隐

【视觉风格】
- 背景：深色渐变（#0f0f23 → #1a1a3e），带微妙粒子效果
- 主色调：#a78bfa（紫色）
- 排名数字：大号粗体，带发光效果
- 动画：全部使用 spring 弹性动画

【数据驱动】
- 所有内容从 props 传入（标题、5 个项目的数据）
- 导出 Props 类型接口
- 创建示例数据文件 data.json

第 1 轮迭代：
用户："动画看起来有点僵硬，能不能让每个排名项出现时有更明显的弹跳效果？"
AI：修改 spring 参数（增大 mass，减小 damping），添加 overshoot

第 2 轮迭代：
用户："进度条太粗了，改成 3px 高度，颜色跟主色调一致"
AI：修改进度条样式

第 3 轮迭代：
用户："背景的粒子效果太密了，减少到 20 个粒子，移动速度放慢"
AI：调整粒子数量和速度参数

第 4 轮迭代：
用户："很好！现在帮我生成渲染命令，同时生成一个批量渲染脚本，
       我想用不同的数据生成 10 个不同主题的视频"
AI：生成 CLI 渲染命令 + Node.js 批量渲染脚本

┌─────────────────────────────────────────────────────────┐
│  用户浏览器                                               │
│  ┌───────────────────────────────────────────────────┐  │
│  │  聊天界面                    实时预览               │  │
│  │  ┌─────────────────┐       ┌─────────────────┐   │  │
│  │  │ 用户输入 prompt  │       │ Remotion Player │   │  │
│  │  │ "做一个旋转的    │       │ （浏览器内实时   │   │  │
│  │  │  Logo 动画"      │       │  渲染预览）      │   │  │
│  │  └────────┬────────┘       └────────▲────────┘   │  │
│  │           │                         │             │  │
│  └───────────┼─────────────────────────┼─────────────┘  │
│              │                         │                 │
└──────────────┼─────────────────────────┼─────────────────┘
               │                         │
               ▼                         │
┌──────────────────────────────┐         │
│  Next.js 后端                 │         │
│  ┌────────────────────────┐  │         │
│  │ LLM API（OpenAI/Claude）│  │         │
│  │ 生成 React 代码         │──┼─────────┘
│  │ JIT 编译 → 浏览器执行   │  │   （流式返回代码，
│  └────────────────────────┘  │    浏览器即时编译预览）
│  ┌────────────────────────┐  │
│  │ Remotion Lambda        │  │
│  │ 最终渲染 → MP4 下载    │  │
│  └────────────────────────┘  │
└──────────────────────────────┘

# 使用官方模板创建项目
npx create-video@latest --template prompt-to-motion-graphics
 
# 配置环境变量
# .env
OPENAI_API_KEY=sk-...
 
# （可选）配置 Lambda 渲染
REMOTION_AWS_ACCESS_KEY_ID=...
REMOTION_AWS_SECRET_ACCESS_KEY=...
 
# 启动开发服务器
npm run dev

┌──────────┐    ┌──────────────┐    ┌──────────────┐    ┌──────────┐
│ 触发器    │    │ 数据处理      │    │ 视频渲染      │    │ 分发      │
│          │    │              │    │              │    │          │
│ • Cron   │───→│ • 拉取数据   │───→│ • Lambda     │───→│ • S3/CDN │
│ • Webhook│    │ • 生成 Props │    │ • 并行渲染   │    │ • 邮件   │
│ • API    │    │ • 验证数据   │    │ • 输出 MP4   │    │ • Slack  │
└──────────┘    └──────────────┘    └──────────────┘    └──────────┘

请创建一个"每日科技新闻"YouTube Shorts 模板：
- 竖屏 1080x1920，20 秒，30fps
- 开头 3 秒：日期 + "今日科技快讯" 标题弹入
- 中间 12 秒：3 条新闻依次展示，每条 4 秒
  - 新闻编号（01/02/03）+ 标题 + 来源
  - 从右侧滑入，带 spring 动画
- 结尾 5 秒："关注获取每日更新" + 频道 Logo
- 深色科技风背景，主色调 #00d4ff（青色）
- 所有内容从 props 传入（日期、3 条新闻数据）

npx remotion render DailyNews out/daily-news-2026-07-15.mp4 \
  --props='{"date":"2026-07-15","news":[{"title":"Apple 发布 M5 芯片","source":"TechCrunch"},{"title":"OpenAI 推出 GPT-5","source":"The Verge"},{"title":"Rust 2.0 正式发布","source":"GitHub Blog"}]}'