Remotion・视频编程框架（React 写视频・代码化动画・AI 生成・批量渲染・OpenClaw 原生）

一、核心定位

Remotion：用 React 代码写 MP4 视频，开源、组件化、帧级精确、Web 全栈能力，程序员的 AE / 剪映。

核心理念：Write code, make videos（代码即视频）
技术底座：React + TypeScript + 无头 Chrome 渲染
优势：帧级精准、组件复用、数据驱动、批量生成、版本控制、CI/CD
适用：数据可视化、产品演示、营销短片、AI 视频、动态海报、批量个性化视频、OpenClaw 插件

二、核心优势（对比传统剪辑）

✅ React 全生态：组件、Hooks、Props、Context、Tailwind、Three.js、Lottie 直接用
✅ 帧级精确控制：useCurrentFrame() 拿到当前帧，毫秒级动画
✅ 数据驱动 / 批量生成：一套模板→千个个性化视频（名字、数据、图片）
✅ Web 技术全支持：CSS 动画、SVG、Canvas、WebGL、音频波形、3D
✅ 实时预览 + 热更新：改代码秒看效果，无需渲染
✅ 云端并行渲染（Lambda）：AWS 分布式，10 分钟渲染 1 小时视频
✅ AI 友好：GPT/Claude 直接生成 Remotion 代码，自然语言→视频Remotion
✅ 开源免费 + 商用授权：MIT 协议，企业可用

三、核心概念（3 个必懂）

Composition（视频总容器）：定义分辨率 (1920×1080)、帧率 (30fps)、时长 (帧)
useCurrentFrame()：获取当前帧数（动画核心）
interpolate()：帧→数值映射（透明度、位移、缩放、旋转）
Sequence：时间轴分段、精准控制片段起止

四、安装 & 快速开始（30 秒）

1. 创建项目

bash

运行

npx create-video@latest --blank my-video
cd my-video
npm install
npm run dev

打开：http://localhost:3000（Remotion Studio 实时预览）Remotion

2. 最小示例（Hello Remotion）

tsx

// src/MyVideo.tsx
import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";

export const MyVideo = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1]); // 0→30帧：透明→不透明
  const scale = interpolate(frame, [0, 30], [0.5, 1]);

  return (
    <AbsoluteFill style={{ backgroundColor: "#111" }}>
      <div style={{
        opacity, transform: `scale(${scale})`,
        fontSize: 120, color: "#fff", textAlign: "center", marginTop: 200
      }}>
        Hello Remotion!
      </div>
    </AbsoluteFill>
  );
};

3. 注册视频（Root.tsx）

tsx

import { Composition } from "remotion";
import { MyVideo } from "./MyVideo";

export const Root = () => (
  <>
    <Composition
      id="HelloVideo"
      component={MyVideo}
      durationInFrames={150} // 5秒 @30fps
      fps={30}
      width={1920}
      height={1080}
    />
  </>
);

4. 渲染 MP4

bash

运行

npx remotion render src/index.ts HelloVideo output.mp4

五、核心功能（企业级）

✅ 动画系统

帧级动画：useCurrentFrame + interpolate
物理弹簧：spring() 自然弹性动画
CSS/GSAP/Lottie：直接集成
音频同步：波形分析、节拍检测、音画精准同步

✅ 媒体组件

<Video>：嵌入视频、裁剪、变速、多轨合成
<Audio>：背景音乐、音效、音量控制
<Img>：图片、序列帧、透明通道
<Still>：导出单帧→封面 / 海报

✅ 数据驱动 & 批量生成

Input Props：JSON/API 数据注入，动态内容
批量渲染：脚本循环生成几十 / 几百个视频
个性化：自动替换文字、图片、数据、颜色

✅ 云端渲染（Lambda）

AWS 并行渲染，极速出片
本地渲染慢→云端分布式

✅ AI 原生集成

GPT/Claude 直接生成 Remotion 代码Remotion
自然语言→完整视频组件Remotion
OpenClaw Agent 直接调用生成视频Remotion

六、OpenClaw 全生态集成

Social Media Scheduler：自动生成短视频→定时发布抖音 / 小红书 / B 站Remotion
Baidu Web Search：实时资讯→自动生成新闻视频Remotion
Stock Monitor：A 股数据→行情可视化视频Remotion
Memory Tiering：视频模板 / 素材→多级内存缓存Remotion
Agent Browser：渲染截图、预览、自动审核Remotion

七、适用场景

📊 数据可视化视频：财报、股票、体育数据、排行榜
🎬 产品演示 / UI 动画：软件界面、流程演示、交互动效
📢 营销短片 / 广告：批量生成带人名 / 头像的推广视频
🧠 AI 生成视频：一句话生成动画、解说、科普
🎓 在线课程 / 教程：代码演示、步骤动画、公式推导
🎮 动态海报 / 片头：透明通道、炫酷开场、LOGO 动画

八、对比：Remotion vs AE vs 剪映

Remotion：代码化、精准、批量、数据驱动、程序员友好、可版本控制
AE：特效强、手动、慢、难批量、专业设计师
剪映：简单、可视化、免费、适合普通用户

九、二开拓展方向

AI 视频生成器：提示词→Remotion 代码→自动渲染
模板市场：数据可视化 / 营销 / 片头模板库
OpenClaw 插件：一键集成到 Agent 工作流Remotion
3D 视频：Three.js 集成，3D 动画视频
直播短视频：实时数据→动态直播画面
字幕自动生成：AI 语音转文字→自动字幕动画

十、完整项目结构

plaintext

my-video/
├── src/
│   ├── index.ts        # 入口
│   ├── Root.tsx        # 视频注册
│   ├── compositions/    # 视频组件
│   ├── assets/          # 图片/音频/视频
│   └── utils/           # 工具函数
├── public/
├── package.json
└── tsconfig.json

十一、性能与限制

渲染速度：本地 1080p≈1 分钟 / 分钟视频；Lambda≈10 倍速
分辨率：最高4K
时长：无限制（长视频建议分段）
限制：无 HDR、纯 Web 渲染、不适合电影级 VFX