remotion-video-toolkit

name	remotion-video-toolkit
version	1.0.0
description	Programmatic video creation with Remotion and React. Build animations, data visualizations, text effects, and full video compositions in code. Use this skill when creating videos programmatically, building React-based animations, generating data visualization videos, or the user wants to "create a video with code", "animate data", or "build video from React components."
author	G-HunterAi
license	MIT
tags	["video","remotion","react","animation","rendering"]
platforms	["all"]
category	media
metadata	{"clawdbot":{"emoji":"🎥","requires":{"bins":["node","npm","ffmpeg"]}}}

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 rule files. Every major Remotion feature covered.

Built on Remotion by Jonny Burger. Rule files contributed by shreefentsar / Zone 99.

What You Can Build

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 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.

When to Use

• Creating videos programmatically from code (not manually editing timelines)
• Building React-based animations and interactive compositions
• Generating data visualization videos from live data or APIs
• Rendering personalized videos at scale (variations from a template)
• Creating TikTok/Reels content with captions and effects
• Building video generation microservices

When NOT to Use

• Editing existing videos — Use ffmpeg-video-editor skill for cuts, transitions, and post-processing
• Simple video cuts or trimming — Use ffmpeg skill for frame extraction and basic operations
• AI-generated video — Use AI video generation tools like Runway or Synthesia
• Timeline-based editing — Use traditional video editors (Premiere Pro, Final Cut, DaVinci Resolve)
• Live streaming — Use streaming-specific tools like OBS or Streamyard

Prerequisites

• Node.js 18+ (JavaScript runtime)
• npm or yarn (package manager)
• 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)
• Basic React knowledge (Remotion is React-based)

Quick Start

# 1. Scaffold a new Remotion project
npx create-video@latest my-video
cd my-video

# 2. Start the preview server (see composition in browser)
npm start

# 3. Render to MP4
npx remotion render src/index.ts MyComposition out/video.mp4

# 4. Pass dynamic data via props
npx remotion render src/index.ts MyComposition out.mp4 \
  --props '{"title": "Hello World", "duration": 5}'

Rule Files & Reference

This toolkit includes 29 comprehensive rule files covering every major Remotion feature:

Core Concepts

Rule	File	Description
Compositions	rules/compositions.md	Define videos, stills, folders, default props, dynamic metadata
Rendering	rules/rendering.md	CLI, Node.js API, AWS Lambda, Cloud Run, Express server patterns
Calculate metadata	rules/calculate-metadata.md	Set duration, dimensions, and props dynamically at render time

Animation & Timing

Rule	File	Description
Animations	rules/animations.md	Fade, scale, rotate, slide, transform effects
Timing	rules/timing.md	Interpolation curves, easing, spring physics
Sequencing	rules/sequencing.md	Delay, chain, and orchestrate scenes
Transitions	rules/transitions.md	Scene-to-scene transitions and effects
Trimming	rules/trimming.md	Cut the start or end of any animation

Text & Typography

Rule	File	Description
Text animations	rules/text-animations.md	Typewriter, word highlight, reveal effects
Fonts	rules/fonts.md	Google Fonts and local font loading
Measuring text	rules/measuring-text.md	Fit text to containers, detect overflow

Media (Video, Audio, Images)

Rule	File	Description
Videos	rules/videos.md	Embed, trim, speed, volume, loop, pitch shift
Audio	rules/audio.md	Import, trim, fade, volume and speed control
Images	rules/images.md	The Img component and image handling
GIFs	rules/gifs.md	Timeline-synced GIF playback
Assets	rules/assets.md	Importing any media into compositions
Decode check	rules/can-decode.md	Validate browser compatibility

Captions & Subtitles

Rule	File	Description
Transcribe captions	rules/transcribe-captions.md	Audio to captions via Whisper, Deepgram, or AssemblyAI
Display captions	rules/display-captions.md	TikTok-style word-by-word highlighting
Import SRT	rules/import-srt-captions.md	Load existing .srt files

Data Visualization

Rule	File	Description
Charts	rules/charts.md	Animated bar charts, line graphs, data-driven visuals

Advanced Features

Rule	File	Description
3D content	rules/3d.md	Three.js and React Three Fiber integration
Lottie	rules/lottie.md	After Effects animations via Lottie JSON
TailwindCSS	rules/tailwind.md	Style compositions with Tailwind utilities
DOM measurement	rules/measuring-dom-nodes.md	Measure element dimensions at render time

Media Utilities

Rule	File	Description
Video duration	rules/get-video-duration.md	Get length in seconds
Video dimensions	rules/get-video-dimensions.md	Get width and height
Audio duration	rules/get-audio-duration.md	Get audio length
Extract frames	rules/extract-frames.md	Pull frames at specific timestamps

Complete rules index: See references/rules-index.md for details on all 29 rules.

Common Patterns

Rendering from Node.js with Custom Props

import { render } from "@remotion/renderer";

const composition = "MyComposition";

await render({
  composition,
  serveUrl: "http://localhost:3000",
  outputLocation: "out/video.mp4",
  inputProps: {
    title: "Hello World",
    duration: 5,
  },
});

Rendering on AWS Lambda

import { renderOnLambda } from "@remotion/lambda";

const { outputUrl } = await renderOnLambda({
  functionName: "remotion-render",
  composition: "MyComposition",
  inputProps: { title: "Hello" },
  region: "us-east-1",
});

Rendering on Google Cloud Run

import { renderOnCloudRun } from "@remotion/google-cloud-run";

const { outputUrl } = await renderOnCloudRun({
  serviceName: "remotion-renderer",
  composition: "MyComposition",
  inputProps: { title: "Hello" },
  region: "us-central1",
});

Express Server for Video Generation API

import express from "express";
import { render } from "@remotion/renderer";

const app = express();
app.post("/render", async (req, res) => {
  const { composition, props } = req.body;

  const outputLocation = `/tmp/video-${Date.now()}.mp4`;

  await render({
    composition,
    serveUrl: "http://localhost:3000",
    outputLocation,
    inputProps: props,
  });

  res.download(outputLocation);
});

app.listen(3001);

Error Handling

Error	Cause	Solution
RenderError: Rendering timed out	Video took too long to render	Increase --timeout-in-seconds or simplify composition
Out of memory: JavaScript heap out of memory	Too many frames or complex effects	Reduce resolution, split into segments, or upgrade instance
Error: Cannot find module '@remotion/xyz'	Missing dependency	Run npm install @remotion/xyz
Codec error: H.264 not available	FFmpeg codec missing	Reinstall FFmpeg or use different --codec
Props validation failed	Incorrect prop types	Check composition defaultProps and pass matching types
Port 3000 already in use	Another process running on preview port	Stop other process or use --port 3001

Works Well With

• ffmpeg-video-editor — Post-process Remotion outputs (add filters, effects, trim)
• image-gen — Generate images programmatically to use as Remotion assets
• youtube-factory-pro — Build complete content pipelines: generate → edit → upload
• upload-post — Automatically upload rendered videos to YouTube, TikTok, or other platforms
• slack-discord — Integrate video rendering into chatbots for on-demand creation

Testing Your Compositions

# Start preview server
npm start

# In another terminal, run tests
npm test

# Render a test video
npx remotion render src/index.ts MyComposition out/test.mp4 \
  --props '{"duration": 1, "fps": 10}'  # Short duration for quick feedback

Scaling to Production

• Use serverless rendering for APIs that accept JSON and return video URLs
• Cache results to avoid re-rendering the same composition + props combo
• Optimize props to keep payloads small and render times fast
• Monitor Lambda/Cloud Run memory and timeout for your compositions
• Use CDN to serve rendered videos with low latency

Directory Structure

remotion-video-toolkit/
├── rules/                          # 29 rule files
│   ├── compositions.md
│   ├── rendering.md
│   ├── animations.md
│   ├── text-animations.md
│   ├── captions.md
│   ├── charts.md
│   ├── ... (24 more rules)
│   └── (complete index in references/rules-index.md)
├── references/
│   └── rules-index.md              # Complete rules index and quick reference
├── examples/                        # Example compositions (optional)
│   ├── hello-world.tsx
│   ├── data-viz.tsx
│   └── personalized-video.tsx
├── SKILL.md                        # This file
├── README.md                       # Extended documentation
├── LICENSE                         # MIT license
├── CHANGELOG.md                    # Version history
└── package.json                    # Dependencies (if bundled)

Key Enhancements in This Version

1. Comprehensive rule coverage — 29 rules spanning all major Remotion features
2. Serverless patterns — Lambda, Cloud Run, and Express examples included
3. Production rendering — Caching, optimization, and scaling guidance
4. Error handling — Common issues and solutions documented
5. Data visualization — Animated charts and live data integration
6. Captions & subtitles — Audio-to-text via Whisper, Deepgram, or AssemblyAI

Next Steps

• Explore the rule files in references/rules-index.md
• Start with the Quick Start section above
• Build a simple composition locally with npm start
• Render to MP4 and test the output
• Integrate serverless rendering for API usage
• Check the examples/ directory for reference compositions

Contributing

Found a bug or have an improvement? Issues and PRs welcome on the project repository.

New rules, improved examples, bug fixes all gratefully accepted.

---

License: MIT (see LICENSE file) Built on: Remotion by Jonny Burger Author: G-HunterAi Rule contributions: shreefentsar / Zone 99