Skill

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

Install

openclaw skills install @cn-big-cabbage/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 辅助使用流程

初始化项目 — AI 执行 npx create-video@latest 创建项目并安装依赖
编写 React 组件 — AI 根据需求生成视频组件，配置 <AbsoluteFill>、useCurrentFrame 等核心 API
本地预览调试 — AI 启动 npx remotion studio 在浏览器中实时预览视频
配置视频元数据 — AI 设置分辨率、帧率、时长等参数
本地渲染导出 — AI 运行 npx remotion render 输出 MP4/WebM/GIF
云端部署渲染 — 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> 组件混合媒体

快速示例

bash

# 创建新项目（选择模板）
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

typescript

// 基础视频组件
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。

项目链接

GitHub：https://github.com/remotion-dev/remotion
文档：https://remotion.dev/docs
API 参考：https://remotion.dev/api
展示作品：https://remotion.dev/showcase
Discord：https://remotion.dev/discord