Skill: cn-big-cabbage/cn-remotion (version 0.1.0)

--- name: remotion description: 用 React 代码程序化生成视频的框架，支持 CSS/Canvas/SVG/WebGL，可部署到 Lambda/Cloud Run 大规模渲染，适合创意视频生成、数据可视化视频和个性化视频批量生产 version: 0.1.0 metadata: openclaw_requires: ">=1.0.0" emoji: 🎥 homepage: https://remotion.dev --- # 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 进行大规模批量渲染 ## 关键章节导航 - [安装指南](guides/01-installation.md) — 项目初始化、模板选择、环境配置 - [快速开始](guides/02-quickstart.md) — React 组件编写、核心 API、本地渲染 - [高级用法](guides/03-advanced-usage.md) — Lambda 渲染、批量生成、字幕、动态数据 - [故障排查](troubleshooting.md) — 渲染错误、性能问题、云端部署问题 ## 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](https://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


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: suspicious (MEDIUM)