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
npx create-video@latest
- FFmpeg — ships with
@remotion/renderer, no separate install needed
- For serverless rendering: AWS account (Lambda) or GCP account (Cloud Run)
What's inside
Core
| Rule |
Description |
| Compositions |
Define videos, stills, folders, default props, dynamic metadata |
| Rendering |
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
| Rule |
Description |
| Animations |
Fade, scale, rotate, slide |
| 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
| Rule |
Description |
| Text animations |
Typewriter, word highlight, reveal effects |
| Fonts |
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
| Rule |
Description |
| Transcribe captions |
Audio to captions via Whisper, Deepgram, or AssemblyAI |
| Display captions |
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
| Rule |
Description |
| 3D content |
Three.js and React Three Fiber |
| Lottie |
After Effects animations via Lottie |
| TailwindCSS |
Style compositions with Tailwind |
| DOM measurement |
Measure element dimensions at render time |
Media utilities
| Rule |
Description |
| Video duration |
Get length in seconds |
| Video dimensions |
Get width and height |
| Audio duration |
Get audio length |
| Extract frames |
Pull frames at specific timestamps |
Quick start
# 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"}'
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
1---2name: remotion-video-toolkit3description: Complete toolkit for programmatic video creation with Remotion + React. Covers animations, timing, rendering (CLI/Node.js/Lambda/Cloud Run), captions, 3D, charts, text effects, transitions, and media handling. Use when writing Remotion code, building video generation pipelines, or creating data-driven video templates.4---5
6# Remotion Video Toolkit
7
8Write 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.
9
1029 rules. Every major Remotion feature covered.
11
12---
13
14## What you can build with this
15
16**Personalized video at scale**
17Feed user data as JSON props, render a unique video per user. Think Spotify Wrapped, GitHub Unwrapped, onboarding walkthroughs — one template, thousands of outputs.
18
19**Automated social media clips**
20Pull live data (stats, leaderboards, product metrics) and render daily or weekly video posts without anyone touching a timeline editor.
21
22**Dynamic ads and marketing videos**
23Swap in customer name, product image, pricing. Same template, infinite variations. Render server-side via API or Lambda.
24
25**Animated data visualizations**
26Turn dashboards and KPI reports into shareable video clips with animated charts and transitions.
27
28**TikTok and Reels captions**
29Transcribe audio, display word-by-word highlighted subtitles, export ready for upload.
30
31**Product showcase videos**
32Auto-generate from your database — images, specs, pricing — straight to MP4.
33
34**Educational and explainer content**
35Animated course materials, certificate videos, step-by-step walkthroughs — all driven by code.
36
37**Video generation as a service**
38Expose rendering as an HTTP endpoint. Your app sends JSON, gets back a video file.
39
40---
41
42## Requirements
43
44- **Node.js** 18+
45- **React** 18+ (Remotion renders React components frame-by-frame)
46- **Remotion** — scaffold with `npx create-video@latest`
47- **FFmpeg** — ships with `@remotion/renderer`, no separate install needed
48- For serverless rendering: **AWS** account (Lambda) or **GCP** account (Cloud Run)
49
50---
51
52## What's inside
53
54### Core
55
56| Rule | Description |
57|------|-------------|
58| [Compositions](rules/compositions.md) | Define videos, stills, folders, default props, dynamic metadata |
59| [Rendering](rules/rendering.md) | CLI, Node.js API, AWS Lambda, Cloud Run, Express server patterns |
60| [Calculate metadata](rules/calculate-metadata.md) | Set duration, dimensions, and props dynamically at render time |
61
62### Animation and timing
63
64| Rule | Description |
65|------|-------------|
66| [Animations](rules/animations.md) | Fade, scale, rotate, slide |
67| [Timing](rules/timing.md) | Interpolation curves, easing, spring physics |
68| [Sequencing](rules/sequencing.md) | Delay, chain, and orchestrate scenes |
69| [Transitions](rules/transitions.md) | Scene-to-scene transitions |
70| [Trimming](rules/trimming.md) | Cut the start or end of any animation |
71
72### Text and typography
73
74| Rule | Description |
75|------|-------------|
76| [Text animations](rules/text-animations.md) | Typewriter, word highlight, reveal effects |
77| [Fonts](rules/fonts.md) | Google Fonts and local font loading |
78| [Measuring text](rules/measuring-text.md) | Fit text to containers, detect overflow |
79
80### Media
81
82| Rule | Description |
83|------|-------------|
84| [Videos](rules/videos.md) | Embed, trim, speed, volume, loop, pitch shift |
85| [Audio](rules/audio.md) | Import, trim, fade, volume and speed control |
86| [Images](rules/images.md) | The Img component |
87| [GIFs](rules/gifs.md) | Timeline-synced GIF playback |
88| [Assets](rules/assets.md) | Importing any media into compositions |
89| [Decode check](rules/can-decode.md) | Validate browser compatibility |
90
91### Captions and subtitles
92
93| Rule | Description |
94|------|-------------|
95| [Transcribe captions](rules/transcribe-captions.md) | Audio to captions via Whisper, Deepgram, or AssemblyAI |
96| [Display captions](rules/display-captions.md) | TikTok-style word-by-word highlighting |
97| [Import SRT](rules/import-srt-captions.md) | Load existing .srt files |
98
99### Data visualization
100
101| Rule | Description |
102|------|-------------|
103| [Charts](rules/charts.md) | Animated bar charts, line graphs, data-driven visuals |
104
105### Advanced
106
107| Rule | Description |
108|------|-------------|
109| [3D content](rules/3d.md) | Three.js and React Three Fiber |
110| [Lottie](rules/lottie.md) | After Effects animations via Lottie |
111| [TailwindCSS](rules/tailwind.md) | Style compositions with Tailwind |
112| [DOM measurement](rules/measuring-dom-nodes.md) | Measure element dimensions at render time |
113
114### Media utilities
115
116| Rule | Description |
117|------|-------------|
118| [Video duration](rules/get-video-duration.md) | Get length in seconds |
119| [Video dimensions](rules/get-video-dimensions.md) | Get width and height |
120| [Audio duration](rules/get-audio-duration.md) | Get audio length |
121| [Extract frames](rules/extract-frames.md) | Pull frames at specific timestamps |
122
123---
124
125## Quick start
126
127```bash
128# Scaffold a project
129npx create-video@latest my-video
130
131# Preview in browser
132cd my-video && npm start
133
134# Render to MP4
135npx remotion render src/index.ts MyComposition out/video.mp4
136
137# Pass dynamic data
138npx remotion render src/index.ts MyComposition out.mp4 --props '{"title": "Hello"}'
139```
140
141---
142
143## Contribute
144
145**Source:** [github.com/shreefentsar/remotion-video-toolkit](https://github.com/shreefentsar/remotion-video-toolkit)
146
147Missing something? Found a better approach? Open a PR — new rules, improved examples, bug fixes all welcome.
148
149Built by [Zone 99](https://99.zone)
modbender