ClawHub

Skill

Other

用 React 代码程序化生成视频的框架，支持 CSS/Canvas/SVG/WebGL，可部署到 Lambda/Cloud Run 大规模渲染，适合创意视频生成、数据可视化视频和个性化视频批量生产

Install

openclaw skills install cn-remotion

Remotion — 用 React 写视频

Remotion 让开发者用 React 组件和 TypeScript 代码程序化创建视频，把视频创作变成软件工程问题。整个 Web 技术栈都可以用于视频：CSS 动画、Canvas 绘图、SVG、WebGL 特效，乃至调用外部 API 生成个性化内容。从本地预览到云端大规模渲染（AWS Lambda / Google Cloud Run），一套代码覆盖全流程。

核心使用场景

  • 程序化视频生成：用数据驱动视频内容，批量生成个性化视频（如 GitHub Unwrapped 年报）
  • 数据可视化视频：将图表、指标、实时数据渲染成动态视频
  • 营销/社交媒体视频：用 React 组件快速生成品牌一致的视频素材
  • 字幕与标注视频：用 @remotion/captions 自动生成带字幕的视频
  • 云端大规模渲染：用 @remotion/lambda 在 AWS Lambda 上并行渲染，缩短渲染时间

AI 辅助使用流程

  1. 初始化项目 — AI 执行 npx create-video@latest 创建项目并安装依赖
  2. 编写 React 组件 — AI 根据需求生成视频组件，配置 <AbsoluteFill>、useCurrentFrame 等核心 API
  3. 本地预览调试 — AI 启动 npx remotion studio 在浏览器中实时预览视频
  4. 配置视频元数据 — AI 设置分辨率、帧率、时长等参数
  5. 本地渲染导出 — AI 运行 npx remotion render 输出 MP4/WebM/GIF
  6. 云端部署渲染 — AI 配置 Lambda 或 Cloud Run 进行大规模批量渲染

关键章节导航

  • 安装指南 — 项目初始化、模板选择、环境配置
  • 快速开始 — React 组件编写、核心 API、本地渲染
  • 高级用法 — Lambda 渲染、批量生成、字幕、动态数据
  • 故障排查 — 渲染错误、性能问题、云端部署问题

AI 助手能力

使用本技能时，AI 可以：

  • ✅ 创建 Remotion 项目（npx create-video@latest）并选择合适模板
  • ✅ 编写 React 视频组件，使用 useCurrentFrame、interpolate、spring 等动画 API
  • ✅ 配置 <Composition> 的分辨率、帧率和时长
  • ✅ 启动 Remotion Studio 进行本地预览（npx remotion studio）
  • ✅ 执行本地渲染导出视频（npx remotion render）
  • ✅ 配置 @remotion/lambda 在 AWS Lambda 上部署渲染服务
  • ✅ 使用 @remotion/captions 生成带字幕的视频
  • ✅ 实现数据驱动的个性化视频批量生成

核心功能

  • ✅ React 视频组件 — 用 JSX 和 CSS 编写视频帧，完整 Web 技术栈支持
  • ✅ 动画 API — interpolate、spring、useCurrentFrame 精确控制每一帧
  • ✅ Remotion Studio — 浏览器内实时预览和时间轴编辑器
  • ✅ 多格式输出 — MP4（H.264/H.265）、WebM、GIF、图片序列
  • ✅ Lambda 渲染 — AWS Lambda 并行渲染，大幅缩短长视频渲染时间
  • ✅ Cloud Run 渲染 — Google Cloud Run 渲染方案
  • ✅ 字幕组件 — @remotion/captions 自动生成 SRT/VTT 格式字幕
  • ✅ 动态数据 — 通过 props 注入外部数据，生成个性化内容
  • ✅ GIF 支持 — @remotion/gif 在视频中嵌入 GIF 动画
  • ✅ 字体支持 — @remotion/google-fonts 使用 Google Fonts
  • ✅ Lottie 动画 — @remotion/lottie 嵌入 Lottie 动画文件
  • ✅ 音频/视频合成 — <Audio> 和 <Video> 组件混合媒体

快速示例

# 创建新项目（选择模板）
npx create-video@latest

# 启动 Studio 预览
cd my-video
npx remotion studio

# 渲染视频
npx remotion render src/index.ts MyComposition out/video.mp4

# 渲染 GIF
npx remotion render src/index.ts MyComposition --output out/video.gif

// 基础视频组件
import { AbsoluteFill, useCurrentFrame, interpolate } from 'remotion'

export const MyVideo: React.FC = () => {
  const frame = useCurrentFrame()
  const opacity = interpolate(frame, [0, 30], [0, 1])
  
  return (
    <AbsoluteFill style={{ backgroundColor: 'white', opacity }}>
      <h1>Hello, Remotion!</h1>
    </AbsoluteFill>
  )
}

安装要求

依赖版本要求
Node.js>= 18.0
npm / pnpm / yarn任意版本
FFmpeg可选（本地渲染使用内置版本）

许可证注意： Remotion 对个人/学生免费，公司使用需要购买许可证。详见 remotion.dev/license。

项目链接