OpenClaw + Remotion：用代码生成程序视频

🔧 Step 0：先确认外部工具配置

⚠️ 本案例依赖外部工具（Telegram/Notion/飞书等），先确认已配置 👉 查看常用工具配置指南 →

这个场景解决什么问题

制作技术讲解视频、数据可视化动画时，传统工具需要大量手动操作。Remotion 可以用 React 代码生成视频，配合 OpenClaw 的代码生成能力，只需用自然语言描述效果，AI 写代码，自动渲染输出。

直接复制这段：创建 Remotion 项目

npx create-video@latest my-video-project
cd my-video-project
npm install
npm run dev
# 浏览器打开 http://localhost:3000 预览

核心步骤

第一步：安装 Remotion 环境

# 创建 Remotion 项目
npx create-video@latest my-video-project
cd my-video-project
npm install

第二步：告诉 OpenClaw 生成视频代码

发消息给 AI：

帮我用 Remotion 写一个视频：
- 时长：30秒
- 内容：展示 OpenClaw 的安装步骤
- 风格：代码终端风格，黑底绿字
- 要有逐步出现的文字动画
- 每个步骤停留 3 秒

AI 会生成类似这样的代码：

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

export const OpenClawDemo = () => {
  const frame = useCurrentFrame();
  const steps = [
    'npm install -g openclaw@latest',
    'openclaw onboard --install-daemon',
    'openclaw gateway --port 18789',
    '// 🎉 OpenClaw is running!'
  ];
  // ...动画逻辑
};

第三步：渲染视频

# 预览
npm run dev

# 渲染输出
npx remotion render src/Root.tsx OpenClawDemo output.mp4

第四步：迭代调整

不满意效果直接告诉 AI：

把动画速度调慢，每个命令出现前加 0.5 秒停顿，
背景色改成深蓝色，字体改成 Fira Code

关键配置

推荐工作区配置（让 AI 了解项目结构）：

在 OpenClaw 工作区的 AGENTS.md 中添加：

## Remotion 项目路径
~/projects/my-video-project/src/

## 视频规格
- 分辨率：1920x1080
- 帧率：30fps
- 编码：H.264

让 AI 能读写项目文件：

{
  "tools": {
    "profile": "full",
    "workingDirectory": "~/projects/my-video-project"
  }
}

预期结果

• 用自然语言描述视频效果
• AI 生成可运行的 Remotion 代码
• 渲染输出高质量 MP4 视频

注意事项

• Remotion 渲染比较吃 CPU，M2 MacBook 渲染 30 秒视频约 2 分钟
• 复杂动画效果建议分段生成，避免单次任务太复杂
• AI 生成的代码需要在本地跑一下确认没有语法错误
• 推荐使用 Claude 3.5 Sonnet 等强力模型提高代码生成质量