Remotion Video Toolkit
Write React components, get real MP4 videos. This skill teaches your AI agent how to build with Remotion — from a first animation to a production rendering pipeline.
29 rules. Every major Remotion feature covered.
What you can build with this
Personalized video at scale
Feed user data as JSON props, render a unique video per user. Think Spotify Wrapped, GitHub Unwrapped, onboarding walkthroughs — one template, thousands of outputs.
Automated social media clips
Pull live data (stats, leaderboards, product metrics) and render daily or weekly video posts without anyone touching a timeline editor.
Dynamic ads and marketing videos
Swap in customer name, product image, pricing. Same template, infinite variations. Render server-side via API or Lambda.
Animated data visualizations
Turn dashboards and KPI reports into shareable video clips with animated charts and transitions.
TikTok and Reels captions
Transcribe audio, display word-by-word highlighted subtitles, export ready for upload.
Product showcase videos
Auto-generate from your database — images, specs, pricing — straight to MP4.
Educational and explainer content
Animated course materials, certificate videos, step-by-step walkthroughs — all driven by code.
Video generation as a service
Expose rendering as an HTTP endpoint. Your app sends JSON, gets back a video file.
Requirements
- - Node.js 18+
- React 18+ (Remotion renders React components frame-by-frame)
- Remotion — scaffold with INLINECODE0
- FFmpeg — ships with
@remotion/renderer, no separate install needed - For serverless rendering: AWS account (Lambda) or GCP account (Cloud Run)
What's inside
Core
CLI, Node.js API, AWS Lambda, Cloud Run, Express server patterns |
|
Calculate metadata | Set duration, dimensions, and props dynamically at render time |
Animation and timing
Interpolation curves, easing, spring physics |
|
Sequencing | Delay, chain, and orchestrate scenes |
|
Transitions | Scene-to-scene transitions |
|
Trimming | Cut the start or end of any animation |
Text and typography
Google Fonts and local font loading |
|
Measuring text | Fit text to containers, detect overflow |
Media
| Rule | Description |
|---|
| Videos | Embed, trim, speed, volume, loop, pitch shift |
| Audio |
Import, trim, fade, volume and speed control |
|
Images | The Img component |
|
GIFs | Timeline-synced GIF playback |
|
Assets | Importing any media into compositions |
|
Decode check | Validate browser compatibility |
Captions and subtitles
TikTok-style word-by-word highlighting |
|
Import SRT | Load existing .srt files |
Data visualization
| Rule | Description |
|---|
| Charts | Animated bar charts, line graphs, data-driven visuals |
Advanced
After Effects animations via Lottie |
|
TailwindCSS | Style compositions with Tailwind |
|
DOM measurement | Measure element dimensions at render time |
Media utilities
Get width and height |
|
Audio duration | Get audio length |
|
Extract frames | Pull frames at specific timestamps |
Quick start
CODEBLOCK0
Contribute
Source: github.com/shreefentsar/remotion-video-toolkit
Missing something? Found a better approach? Open a PR — new rules, improved examples, bug fixes all welcome.
Built by Zone 99
Remotion 视频工具包
编写 React 组件，生成真正的 MP4 视频。本技能教会你的 AI 代理如何使用 Remotion 进行构建——从第一个动画到生产级渲染管线。
共 29 条规则，涵盖 Remotion 所有主要功能。
你可以用它构建什么
大规模个性化视频
将用户数据作为 JSON 属性输入，为每个用户渲染独特的视频。想想 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）
内容概览
核心
| 规则 | 描述 |
|---|
| 合成 | 定义视频、静态图片、文件夹、默认属性、动态元数据 |
| 渲染 |
CLI、Node.js API、AWS Lambda、Cloud Run、Express 服务器模式 |
|
计算元数据 | 在渲染时动态设置时长、尺寸和属性 |
动画与时间控制
插值曲线、缓动函数、弹簧物理 |
|
序列编排 | 延迟、串联和编排场景 |
|
过渡效果 | 场景间过渡 |
|
裁剪 | 裁剪任意动画的开头或结尾 |
文本与排版
Google 字体和本地字体加载 |
|
文本测量 | 使文本适应容器，检测溢出 |
媒体
| 规则 | 描述 |
|---|
| 视频 | 嵌入、裁剪、变速、音量、循环、变调 |
| 音频 |
导入、裁剪、淡入淡出、音量和速度控制 |
|
图片 | Img 组件 |
|
GIF | 与时间线同步的 GIF 播放 |
|
资源 | 将任意媒体导入合成 |
|
解码检查 | 验证浏览器兼容性 |
字幕与说明文字
| 规则 | 描述 |
|---|
| 转录字幕 | 通过 Whisper、Deepgram 或 AssemblyAI 将音频转为字幕 |
| 显示字幕 |
TikTok 风格逐词高亮 |
|
导入 SRT | 加载现有的 .srt 文件 |
数据可视化
高级功能
通过 Lottie 实现 After Effects 动画 |
|
TailwindCSS | 使用 Tailwind 样式化合成 |
|
DOM 测量 | 在渲染时测量元素尺寸 |
媒体工具
获取宽度和高度 |
|
音频时长 | 获取音频长度 |
|
提取帧 | 在特定时间戳提取帧 |
快速开始
bash
搭建项目
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 构建
