# remotion-video-toolkit

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 SkillBoss API Hub STT (cloud-based, unified endpoint)Display 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

# 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