remotion-video-toolkitComplete 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.
Install via ClawdBot CLI:
clawdbot install shreefentsar/remotion-video-toolkitWrite 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.
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.
npx create-video@latest@remotion/renderer, no separate install needed| 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 |
| 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 |
| Rule | Description |
|------|-------------|
| Text animations | Typewriter, word highlight, reveal effects |
| Fonts | Google Fonts and local font loading |
| Measuring text | Fit text to containers, detect overflow |
| 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 |
| 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 |
| Rule | Description |
|------|-------------|
| Charts | Animated bar charts, line graphs, data-driven visuals |
| 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 |
| 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 |
# 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"}'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
Generated Feb 26, 2026
Generate customized video ads by integrating customer data from CRM systems, dynamically inserting names, product images, and offers into templates. This enables scalable, data-driven marketing for e-commerce or SaaS platforms, reducing manual video production time.
Create daily or weekly video clips for platforms like TikTok or Instagram by pulling live data from APIs, such as sports scores or stock metrics. This automates content creation for media companies or influencers, ensuring timely and engaging posts without manual editing.
Develop animated explainer videos or course materials by feeding educational content as JSON props, enabling rapid generation of personalized learning resources. This is ideal for edtech startups or corporate training programs to scale video-based instruction.
Transform business dashboards or KPI reports into animated video summaries with charts and transitions, making complex data accessible for stakeholders. This serves industries like finance or healthcare for automated reporting and presentations.
Offer an API endpoint that accepts JSON input and returns rendered MP4 videos, allowing clients to integrate video creation into their apps. This model supports SaaS businesses in providing on-demand video services for various use cases.
Charge monthly or annual fees for access to video rendering APIs and templates, targeting businesses needing regular video content. Revenue streams include tiered pricing based on usage, such as render counts or advanced features.
Implement a usage-based pricing model where clients pay per video render or API call, ideal for startups or enterprises with variable needs. This reduces upfront costs and scales with customer demand, generating revenue from high-volume users.
Offer bespoke video template development and integration services for clients with specific requirements, such as branded animations or complex data pipelines. Revenue comes from project-based fees or ongoing support contracts.
💬 Integration Tip
Ensure Node.js and FFmpeg are properly configured for server-side rendering, and use environment variables to manage API keys for cloud services like AWS Lambda.
Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.
Best practices for Remotion - Video creation in React
Best practices for Remotion - Video creation in React
Long-form AI video production: the frontier of multi-agent coordination. CellCog orchestrates 6-7 foundation models to produce up to 4-minute videos from a single prompt — scripted, filmed, voiced, lipsync'd, scored, and edited automatically. Create marketing videos, product demos, explainer videos, educational content, spokesperson videos, training materials, UGC content, news reports.
HeyGen AI video creation API. Use when: (1) Using Video Agent for one-shot prompt-to-video generation, (2) Generating AI avatar videos with /v2/video/generat...
Generate video using Google Veo (Veo 3.1 / Veo 3.0).