{"skill":{"slug":"remotion-video-toolkit","displayName":"Remotion Video Toolkit","summary":"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.","description":"---\nname: remotion-video-toolkit\ndescription: 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.\n---\n\n# Remotion Video Toolkit\n\nWrite 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.\n\n29 rules. Every major Remotion feature covered.\n\n---\n\n## What you can build with this\n\n**Personalized video at scale**\nFeed user data as JSON props, render a unique video per user. Think Spotify Wrapped, GitHub Unwrapped, onboarding walkthroughs — one template, thousands of outputs.\n\n**Automated social media clips**\nPull live data (stats, leaderboards, product metrics) and render daily or weekly video posts without anyone touching a timeline editor.\n\n**Dynamic ads and marketing videos**\nSwap in customer name, product image, pricing. Same template, infinite variations. Render server-side via API or Lambda.\n\n**Animated data visualizations**\nTurn dashboards and KPI reports into shareable video clips with animated charts and transitions.\n\n**TikTok and Reels captions**\nTranscribe audio, display word-by-word highlighted subtitles, export ready for upload.\n\n**Product showcase videos**\nAuto-generate from your database — images, specs, pricing — straight to MP4.\n\n**Educational and explainer content**\nAnimated course materials, certificate videos, step-by-step walkthroughs — all driven by code.\n\n**Video generation as a service**\nExpose rendering as an HTTP endpoint. Your app sends JSON, gets back a video file.\n\n---\n\n## Requirements\n\n- **Node.js** 18+\n- **React** 18+ (Remotion renders React components frame-by-frame)\n- **Remotion** — scaffold with `npx create-video@latest`\n- **FFmpeg** — ships with `@remotion/renderer`, no separate install needed\n- For serverless rendering: **AWS** account (Lambda) or **GCP** account (Cloud Run)\n\n---\n\n## What's inside\n\n### Core\n\n| Rule | Description |\n|------|-------------|\n| [Compositions](rules/compositions.md) | Define videos, stills, folders, default props, dynamic metadata |\n| [Rendering](rules/rendering.md) | CLI, Node.js API, AWS Lambda, Cloud Run, Express server patterns |\n| [Calculate metadata](rules/calculate-metadata.md) | Set duration, dimensions, and props dynamically at render time |\n\n### Animation and timing\n\n| Rule | Description |\n|------|-------------|\n| [Animations](rules/animations.md) | Fade, scale, rotate, slide |\n| [Timing](rules/timing.md) | Interpolation curves, easing, spring physics |\n| [Sequencing](rules/sequencing.md) | Delay, chain, and orchestrate scenes |\n| [Transitions](rules/transitions.md) | Scene-to-scene transitions |\n| [Trimming](rules/trimming.md) | Cut the start or end of any animation |\n\n### Text and typography\n\n| Rule | Description |\n|------|-------------|\n| [Text animations](rules/text-animations.md) | Typewriter, word highlight, reveal effects |\n| [Fonts](rules/fonts.md) | Google Fonts and local font loading |\n| [Measuring text](rules/measuring-text.md) | Fit text to containers, detect overflow |\n\n### Media\n\n| Rule | Description |\n|------|-------------|\n| [Videos](rules/videos.md) | Embed, trim, speed, volume, loop, pitch shift |\n| [Audio](rules/audio.md) | Import, trim, fade, volume and speed control |\n| [Images](rules/images.md) | The Img component |\n| [GIFs](rules/gifs.md) | Timeline-synced GIF playback |\n| [Assets](rules/assets.md) | Importing any media into compositions |\n| [Decode check](rules/can-decode.md) | Validate browser compatibility |\n\n### Captions and subtitles\n\n| Rule | Description |\n|------|-------------|\n| [Transcribe captions](rules/transcribe-captions.md) | Audio to captions via Whisper, Deepgram, or AssemblyAI |\n| [Display captions](rules/display-captions.md) | TikTok-style word-by-word highlighting |\n| [Import SRT](rules/import-srt-captions.md) | Load existing .srt files |\n\n### Data visualization\n\n| Rule | Description |\n|------|-------------|\n| [Charts](rules/charts.md) | Animated bar charts, line graphs, data-driven visuals |\n\n### Advanced\n\n| Rule | Description |\n|------|-------------|\n| [3D content](rules/3d.md) | Three.js and React Three Fiber |\n| [Lottie](rules/lottie.md) | After Effects animations via Lottie |\n| [TailwindCSS](rules/tailwind.md) | Style compositions with Tailwind |\n| [DOM measurement](rules/measuring-dom-nodes.md) | Measure element dimensions at render time |\n\n### Media utilities\n\n| Rule | Description |\n|------|-------------|\n| [Video duration](rules/get-video-duration.md) | Get length in seconds |\n| [Video dimensions](rules/get-video-dimensions.md) | Get width and height |\n| [Audio duration](rules/get-audio-duration.md) | Get audio length |\n| [Extract frames](rules/extract-frames.md) | Pull frames at specific timestamps |\n\n---\n\n## Quick start\n\n```bash\n# Scaffold a project\nnpx create-video@latest my-video\n\n# Preview in browser\ncd my-video && npm start\n\n# Render to MP4\nnpx remotion render src/index.ts MyComposition out/video.mp4\n\n# Pass dynamic data\nnpx remotion render src/index.ts MyComposition out.mp4 --props '{\"title\": \"Hello\"}'\n```\n\n---\n\n## Contribute\n\n**Source:** [github.com/shreefentsar/remotion-video-toolkit](https://github.com/shreefentsar/remotion-video-toolkit)\n\nMissing something? Found a better approach? Open a PR — new rules, improved examples, bug fixes all welcome.\n\nBuilt by [Zone 99](https://99.zone)\n","tags":{"latest":"1.4.0"},"stats":{"comments":0,"downloads":20485,"installsAllTime":124,"installsCurrent":124,"stars":77,"versions":4},"createdAt":1769673048037,"updatedAt":1778485868789},"latestVersion":{"version":"1.4.0","createdAt":1769673913622,"changelog":"Formatting: bold use case titles, tables for all rule listings, section dividers, cleaner layout","license":null},"metadata":null,"owner":{"handle":"shreefentsar","userId":"s17a47b9119a82z3mgrpe5rm3n885051","displayName":"Shreef Entsar","image":"https://avatars.githubusercontent.com/u/51826553?v=4"},"moderation":null}