Remotion 视频工具包：使用 React 编程创建视频 - Openclaw Skills

什么是 Remotion 视频工具包？

Remotion 视频工具包允许开发者和 AI 智能体像处理软件工程一样处理视频生产。通过将视频帧定义为 React 组件，用户可以创建动态的、数据驱动的内容，无需人工编辑即可无限扩展。对于任何希望构建自动化视频流水线、个性化营销内容或复杂数据可视化的人来说，这项技能是 Openclaw Skills 的重要组成部分。

该工具包的核心是在浏览器的渲染能力与高质量 MP4 输出之间架起了一座桥梁。它包含 29 条专业规则，涵盖了从基础过渡和弹簧物理效果到 AWS Lambda 或 Google Cloud Run 上的高级无服务器渲染的所有内容。无论您是构建生成社交媒体片段的 SaaS，还是构建用于自动报告的内部工具，该库都提供了成功所需的必要原语。

下载入口:https://github.com/openclaw/skills/tree/main/skills/shreefentsar/remotion-video-toolkit

安装与下载

1. ClawHub CLI

从源直接安装技能的最快方式。

npx clawhub@latest install remotion-video-toolkit

2. 手动安装

将技能文件夹复制到以下位置之一

全局模式 ~/.openclaw/skills/ 工作区 <project>/skills/

优先级：工作区 > 本地 > 内置

3. 提示词安装

将此提示词复制到 OpenClaw 即可自动安装。

请帮我使用 Clawhub 安装 remotion-video-toolkit。如果尚未安装 Clawhub，请先安装（npm i -g clawhub）。

Remotion 视频工具包 应用场景

• 大规模创建个性化视频，例如年度回顾总结或用户引导演示。
• 通过将实时统计数据拉入视频模板，自动化社交媒体内容的生成。
• 构建动态广告，通过 API 切换产品图片和价格。
• 为商业智能生成动画数据可视化和 KPI 仪表板。
• 使用 AI 转录服务为 TikTok 和 Reels 开发自动字幕工具。

Remotion 视频工具包 工作原理

1. 使用 Remotion CLI 构建新项目，以建立基于 React 的视频环境。
2. 定义 Composition，作为视频的容器，设置特定的尺寸、帧率和时长。
3. 使用标准 React 组件构建视频场景，利用工具包的动画和计时规则实现流畅运动。
4. 将外部资产（如音频、图像和预录制的视频片段）集成到时间轴中。
5. 使用渲染引擎通过 CLI 或程序化 Node.js API 将 React 代码处理成最终的 MP4 文件。

Remotion 视频工具包 配置指南

要开始使用来自 Openclaw Skills 的此资源，请确保已安装 Node.js 18+。按照以下步骤初始化您的项目：

# 初始化一个新的 Remotion 项目
npx create-video@latest my-video

# 进入目录并启动预览播放器
cd my-video && npm start

# 将您的第一个合成渲染为 MP4 文件
npx remotion render src/index.ts MyComposition out/video.mp4

Remotion 视频工具包 数据架构与分类体系

该工具包通过严格类型的模式组织其视频结构和元数据：

组件	功能
Composition	定义尺寸（宽/高）、FPS 和帧时长的根实体。
Input Props	在渲染时传递给视频组件用于自定义的 JSON 序列化数据。
Metadata	动态计算的属性，如总时长或特定帧数据。
Assets	外部媒体导入的分类，包括 .mp4、.mp3、.png 和 .gif 文件。
Render Config	输出参数，如编解码器、crf 和像素格式。

name: remotion-video-toolkit
description: Complete toolkit for programmatic video creation with Remotion + React. Covers animations, timing, rendering (CLI/Node.js/Lambda/Cloud Run), captions, 3D, charts, text effects, transitions, and media handling. Use when writing Remotion code, building video generation pipelines, or creating data-driven video templates.

Remotion Video Toolkit

Write React components, get real MP4 videos. This skill teaches your AI agent how to build with Remotion — from a first animation to a production rendering pipeline.

29 rules. Every major Remotion feature covered.

---

What you can build with this

Personalized video at scale Feed user data as JSON props, render a unique video per user. Think Spotify Wrapped, GitHub Unwrapped, onboarding walkthroughs — one template, thousands of outputs.

Automated social media clips Pull live data (stats, leaderboards, product metrics) and render daily or weekly video posts without anyone touching a timeline editor.

Dynamic ads and marketing videos Swap in customer name, product image, pricing. Same template, infinite variations. Render server-side via API or Lambda.

Animated data visualizations Turn dashboards and KPI reports into shareable video clips with animated charts and transitions.

TikTok and Reels captions Transcribe audio, display word-by-word highlighted subtitles, export ready for upload.

Product showcase videos Auto-generate from your database — images, specs, pricing — straight to MP4.

Educational and explainer content Animated course materials, certificate videos, step-by-step walkthroughs — all driven by code.

Video generation as a service Expose rendering as an HTTP endpoint. Your app sends JSON, gets back a video file.

---

Requirements

• Node.js 18+
• React 18+ (Remotion renders React components frame-by-frame)
• Remotion — scaffold with npx create-video@latest
• FFmpeg — ships with @remotion/renderer, no separate install needed
• For serverless rendering: AWS account (Lambda) or GCP account (Cloud Run)

---

What's inside

Core

Animation and timing

Text and typography

Media

Captions and subtitles

Data visualization

Advanced

Media utilities

---

Quick start

# Scaffold a project
npx create-video@latest my-video

# Preview in browser
cd my-video && npm start

# Render to MP4
npx remotion render src/index.ts MyComposition out/video.mp4

# Pass dynamic data
npx remotion render src/index.ts MyComposition out.mp4 --props '{"title": "Hello"}'

---

Contribute

Source: github.com/shreefentsar/remotion-video-toolkit

Missing something? Found a better approach? Open a PR — new rules, improved examples, bug fixes all welcome.

Built by Zone 99