介绍
# Remotion Video Toolkit
编写 React 组件，获得真正的 MP4 视频。此技能将教您的 AI 智能体如何使用 Remotion 进行构建——从第一个动画到生产级渲染流水线。
29 条规则。涵盖 Remotion 的所有主要功能。
---
## 您可以用它构建什么
**大规模个性化视频** 将用户数据作为 JSON props 输入，为每个用户渲染独特的视频。想象一下 Spotify Wrapped、GitHub Unwrapped、入职引导教程——一个模板，成千上万的输出。
**自动化社交媒体片段** 提取实时数据（统计、排行榜、产品指标）并渲染每日或每周的视频帖子，而无需任何人接触时间轴编辑器。
**动态广告和营销视频** 替换客户名称、产品图片、定价。同一个模板，无限变体。通过 API 或 Lambda 在服务器端渲染。
**动画数据可视化** 将仪表板和 KPI 报告转化为带有动画图表和过渡效果的可分享视频片段。
**TikTok 和 Reels 字幕** 转录音频，显示逐字高亮字幕，导出即可上传。
**产品展示视频** 直接从数据库自动生成——图片、规格、定价——导出为 MP4。
**教育和解说内容** 动画课程材料、证书视频、分步演练——全部由代码驱动。
**视频生成即服务** 将渲染作为 HTTP 端点公开。您的应用程序发送 JSON，取回视频文件。
---
## 环境要求
- **Node.js** 18+ - **React** 18+ (Remotion 逐帧渲染 React 组件) - **Remotion** — 使用 `npx create-video@latest` 搭建 - **FFmpeg** — 随 `@remotion/renderer` 一起提供，无需单独安装 - 对于无服务器渲染：**AWS** 账户 (Lambda) 或 **GCP** 账户 (Cloud Run)
---
## 包含内容
### 核心
| 规则 | 描述 | |------|-------------| | [Compositions](rules/compositions.md) | 定义视频、静态图像、文件夹、默认 props、动态元数据 | | [Rendering](rules/rendering.md) | CLI、Node.js API、AWS Lambda、Cloud Run、Express 服务器模式 | | [Calculate metadata](rules/calculate-metadata.md) | 在渲染时动态设置时长、尺寸和 props |
### 动画与计时
| 规则 | 描述 | |------|-------------| | [Animations](rules/animations.md) | 淡入淡出、缩放、旋转、滑动 | | [Timing](rules/timing.md) | 插值曲线、缓动、弹簧物理 | | [Sequencing](rules/sequencing.md) | 延迟、链接和编排场景 | | [Transitions](rules/transitions.md) | 场景间过渡 | | [Trimming](rules/trimming.md) | 剪切任何动画的开头或结尾 |
### 文字与排版
| 规则 | 描述 | |------|-------------| | [Text animations](rules/text-animations.md) | 打字机、单词高亮、揭示效果 | | [Fonts](rules/fonts.md) | Google Fonts 和本地字体加载 | | [Measuring text](rules/measuring-text.md) | 使文字适应容器，检测溢出 |
### 媒体
| 规则 | 描述 | |------|-------------| | [Videos](rules/videos.md) | 嵌入、裁剪、变速、音量、循环、音调调整 | | [Audio](rules/audio.md) | 导入、裁剪、淡入淡出、音量和速度控制 | | [Images](rules/images.md) | Img 组件 | | [GIFs](rules/gifs.md) | 与时间轴同步的 GIF 播放 | | [Assets](rules/assets.md) | 将任何媒体导入组合 | | [Decode check](rules/can-decode.md) | 验证浏览器兼容性 |
### 字幕与 subtitles
| 规则 | 描述 | |------|-------------| | [Transcribe captions](rules/transcribe-captions.md) | 通过 Whisper、Deepgram 或 AssemblyAI 将音频转为字幕 | | [Display captions](rules/display-captions.md) | TikTok 风格的逐字高亮 | | [Import SRT](rules/import-srt-captions.md) | 加载现有的 .srt 文件 |
### 数据可视化
| 规则 | 描述 | |------|-------------| | [Charts](rules/charts.md) | 动态柱状图、折线图、数据驱动的视觉效果 |
### 高级
| 规则 | 描述 | |------|-------------| | [3D content](rules/3d.md) | Three.js 和 React Three Fiber | | [Lottie](rules/lottie.md) | 通过 Lottie 实现 After Effects 动画 | | [TailwindCSS](rules/tailwind.md) | 使用 Tailwind 设置组合样式 | | [DOM measurement](rules/measuring-dom-nodes.md) | 在渲染时测量元素尺寸 |
### 媒体工具
| 规则 | 描述 | |------|-------------| | [Video duration](rules/get-video-duration.md) | 获取以秒为单位的长度 | | [Video dimensions](rules/get-video-dimensions.md) | 获取宽度和高度 | | [Audio duration](rules/get-audio-duration.md) | 获取音频长度 | | [Extract frames](rules/extract-frames.md) | 在特定时间戳提取帧 |
---
## 快速开始
```bash # 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"}' ```
---
## 贡献
**源码：** [github.com/shreefentsar/remotion-video-toolkit](https://github.com/shreefentsar/remotion-video-toolkit)
有什么遗漏？找到了更好的方法？请提交 PR——欢迎新规则、改进的示例和错误修复。
由 [Zone 99](https://99.zone) 构建