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#

RuleDescriptionCompositionsDefine videos, stills, folders, default props, dynamic metadataRenderingCLI, Node.js API, AWS Lambda, Cloud Run, Express server patternsCalculate metadataSet duration, dimensions, and props dynamically at render time

Animation and timing#

RuleDescriptionAnimationsFade, scale, rotate, slideTimingInterpolation curves, easing, spring physicsSequencingDelay, chain, and orchestrate scenesTransitionsScene-to-scene transitionsTrimmingCut the start or end of any animation

Text and typography#

RuleDescriptionText animationsTypewriter, word highlight, reveal effectsFontsGoogle Fonts and local font loadingMeasuring textFit text to containers, detect overflow

Media#

RuleDescriptionVideosEmbed, trim, speed, volume, loop, pitch shiftAudioImport, trim, fade, volume and speed controlImagesThe Img componentGIFsTimeline-synced GIF playbackAssetsImporting any media into compositionsDecode checkValidate browser compatibility

Captions and subtitles#

RuleDescriptionTranscribe captionsAudio to captions via Whisper, Deepgram, or AssemblyAIDisplay captionsTikTok-style word-by-word highlightingImport SRTLoad existing .srt files

Data visualization#

RuleDescriptionChartsAnimated bar charts, line graphs, data-driven visuals

Advanced#

RuleDescription3D contentThree.js and React Three FiberLottieAfter Effects animations via LottieTailwindCSSStyle compositions with TailwindDOM measurementMeasure element dimensions at render time

Media utilities#

RuleDescriptionVideo durationGet length in secondsVideo dimensionsGet width and heightAudio durationGet audio lengthExtract framesPull frames at specific timestamps

---

Quick start#

bash

# 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