Remotion 视频工具集
编写 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 | 定义视频、静态图片、文件夹、默认 props、动态元数据 |
| Rendering | CLI、Node.js API、AWS Lambda、Cloud Run、Express 服务模式 |
| Calculate metadata | 在渲染时动态设置时长、尺寸和 props |
动画和时间控制
| 规则 | 描述 |
|---|---|
| Animations | 淡入淡出、缩放、旋转、滑动 |
| Timing | 插值曲线、缓动、弹簧物理 |
| Sequencing | 延迟、串联和编排场景 |
| Transitions | 场景之间的转场 |
| Trimming | 裁剪任何动画的开始或结束部分 |
文字和排版
| 规则 | 描述 |
|---|---|
| Text animations | 打字机效果、单词高亮、揭示效果 |
| Fonts | Google Fonts 和本地字体加载 |
| Measuring text | 使文本适应容器，检测溢出 |
媒体
| 规则 | 描述 |
|---|---|
| Videos | 嵌入、裁剪、速度、音量、循环、音高移位 |
| Audio | 导入、裁剪、淡入淡出、音量和速度控制 |
| Images | Img 组件 |
| GIFs | 时间线同步的 GIF 播放 |
| Assets | 将任何媒体导入合成中 |
| Decode check | 验证浏览器兼容性 |
字幕和标题
| 规则 | 描述 |
|---|---|
| Transcribe captions | 通过 Whisper、Deepgram 或 AssemblyAI 将音频转为字幕 |
| Display captions | TikTok 风格的逐字高亮 |
| Import SRT | 加载现有的 .srt 文件 |
数据可视化
| 规则 | 描述 |
|---|---|
| Charts | 动画条形图、折线图、数据驱动可视化 |
高级功能
| 规则 | 描述 |
|---|---|
| 3D content | Three.js 和 React Three Fiber |
| Lottie | 通过 Lottie 导入 After Effects 动画 |
| TailwindCSS | 使用 Tailwind 样式化合成 |
| DOM measurement | 在渲染时测量元素尺寸 |
媒体工具
| 规则 | 描述 |
|---|---|
| Video duration | 获取视频时长（秒） |
| Video dimensions | 获取视频宽度和高度 |
| Audio duration | 获取音频时长 |
| Extract frames | 在特定时间戳提取帧 |
快速开始
# 脚手架项目
npx create-video@latest my-video
# 在浏览器中预览
cd my-video && npm start
# 渲染为 MP4
npx remotion render src/index.ts MyComposition out/video.mp4
# 传递动态数据
npx remotion render src/index.ts MyComposition out.mp4 --props '{"title": "Hello"}'
贡献
源码： github.com/shreefentsar/remotion-video-toolkit
缺少某些内容？发现更好的方法？提交一个 PR——欢迎提供新规则、改进示例、修复 bug。
由 Zone 99 构建