remotion-video-toolkit

Remotion 视频工具包

编写 React 组件，生成真正的 MP4 视频。本技能将教会你的 AI Agent 如何使用 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 内容	Three.js 和 React Three Fiber
Lottie	通过 Lottie 实现 After Effects 动画
TailwindCSS	使用 Tailwind 进行样式组合
DOM 测量	在渲染时测量元素尺寸

媒体工具

规则	描述
视频时长	获取以秒为单位的长度
视频尺寸	获取宽度和高度
音频时长	获取音频长度
提取帧	在特定时间戳提取帧

---

快速开始

# 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

缺少某些内容？找到了更好的方法？欢迎提交 PR —— 新增规则、改进示例、修复 bug 都欢迎。

由 Zone 99 构建