Remotion 视频工具包

编写 React 组件，生成真实的 MP4 视频。本技能将教您的 AI 代理如何使用 Remotion 进行开发——从第一个动画到生产级渲染流水线。

29 条规则。涵盖 Remotion 所有主要功能。

您可以用它来构建什么

规模化个性化视频将用户数据作为 JSON 属性传入，为每个用户渲染独特的视频。想象一下 Spotify Wrapped、GitHub Unwrapped、入门引导——一个模板，成千上万的输出。

自动化社交媒体剪辑拉取实时数据（统计数据、排行榜、产品指标），并渲染每日或每周的视频帖子，无需任何人操作时间线编辑器。

动态广告与营销视频替换客户姓名、产品图片、定价。同一模板，无限变化。通过 API 或 Lambda 在服务器端渲染。

动态数据可视化将仪表盘和 KPI 报告转化为带有动画图表和过渡效果的可分享视频片段。

TikTok 和 Reels 字幕转录音频，显示逐字高亮的字幕，导出即可上传。

产品展示视频从您的数据库自动生成——图片、规格、定价——直接输出为 MP4。

教育与解说内容动画课程材料、证书视频、分步引导——全部由代码驱动。

视频生成即服务将渲染功能暴露为 HTTP 端点。您的应用发送 JSON，即可获得视频文件。

要求

• Node.js18+
• React18+ (Remotion 逐帧渲染 React 组件)
• Remotion— 使用以下命令搭建项目npx create-video@latest
• FFmpeg— 已随@remotion/renderer附带，无需单独安装
• 对于无服务器渲染：AWS账户（Lambda）或GCP账户（Cloud Run）

包含内容

核心

动画与定时

文本与排版

媒体

字幕与说明文字

数据可视化

高级功能

媒体工具

快速开始

# 创建项目脚手架
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——新规则、改进示例、错误修复均可。

由以下团队构建Zone 99