name: remotion-video-toolkit
description: 用于通过 Remotion + React 进行程序化视频创作的完整工具包。涵盖动画、时序、渲染（CLI/Node.js/Lambda/Cloud Run）、字幕、3D、图表、文字特效、转场和媒体处理。适用于编写 Remotion 代码、构建视频生成流水线或创建数据驱动的视频模板。
编写 React 组件，生成真实的 MP4 视频。此技能教授你的 AI 代理如何使用 Remotion 进行构建——从第一个动画到生产级渲染流水线。
包含 29 条规则。涵盖 Remotion 所有主要功能。
规模化个性化视频
将用户数据作为 JSON 属性传入，为每个用户渲染独一无二的视频。例如 Spotify Wrapped、GitHub Unwrapped、新手指引——一个模板，成千上万种输出。
自动化社交媒体短片
拉取实时数据（统计数据、排行榜、产品指标），自动生成每日或每周视频帖子，无需任何人操作时间线编辑器。
动态广告与营销视频
替换客户姓名、产品图片、价格。同一个模板，无限种变化。通过 API 或 Lambda 在服务器端渲染。
动态数据可视化
将仪表盘和 KPI 报告转化为带有动画图表和转场的可分享视频短片。
TikTok 和 Reels 字幕
转录音频，逐字高亮显示字幕，导出即可上传。
产品展示视频
从数据库自动生成——图片、规格、价格——直接输出为 MP4。
教育与解说内容
动画课程材料、证书视频、分步指南——全部由代码驱动。
视频生成即服务
将渲染功能暴露为 HTTP 端点。你的应用发送 JSON，即可获取视频文件。
npx create-video@latest 创建项目@remotion/renderer 提供，无需单独安装| 规则 | 描述 |
|---|---|
| 合成 | 定义视频、静态图、文件夹、默认属性、动态元数据 |
| 渲染 | CLI、Node.js API、AWS Lambda、Cloud Run、Express 服务器模式 |
| 计算元数据 | 在渲染时动态设置时长、尺寸和属性 |
| 规则 | 描述 |
|---|---|
| 动画 | 淡入淡出、缩放、旋转、滑动 |
| 时序 | 插值曲线、缓动函数、弹簧物理效果 |
| 序列编排 | 延迟、链接和编排场景 |
| 转场 | 场景间的转场效果 |
| 修剪 | 裁剪任何动画的开头或结尾 |
| 规则 | 描述 |
|---|---|
| 文本动画 | 打字机效果、单词高亮、显示特效 |
| 字体 | Google Fonts 和本地字体加载 |
| 测量文本 | 使文本适应容器、检测溢出 |
| 规则 | 描述 |
|---|---|
| 视频 | 嵌入、修剪、速度、音量、循环、音高变换 |
| 音频 | 导入、修剪、淡入淡出、音量和速度控制 |
| 图片 | Img 组件 |
| GIF | 与时间线同步的 GIF 播放 |
| 资源 | 将任何媒体导入到合成中 |
| 解码检查 | 验证浏览器兼容性 |
| 规则 | 描述 |
|---|---|
| 转录字幕 | 通过 Whisper、Deepgram 或 AssemblyAI 将音频转为字幕 |
| 显示字幕 | TikTok 风格的逐字高亮显示 |
| 导入 SRT | 加载现有的 .srt 文件 |
| 规则 | 描述 |
|---|---|
| 图表 | 动画条形图、折线图、数据驱动的视觉效果 |
| 规则 | 描述 |
|---|---|
| 3D 内容 | Three.js 和 React Three Fiber |
| Lottie | 通过 Lottie 使用 After Effects 动画 |
| TailwindCSS | 使用 Tailwind 为合成内容添加样式 |
| DOM 测量 | 在渲染时测量元素尺寸 |
| 规则 | 描述 |
|---|---|
| 视频时长 | 获取视频长度（秒） |
| 视频尺寸 | 获取视频宽度和高度 |
| 音频时长 | 获取音频长度 |
| 提取帧 | 在特定时间戳提取视频帧 |
# 创建项目
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 构建