Create professional videos from code with Remotion v4 - local CLI, Lambda, Vercel, Cloud Run, GPU rendering. Social media presets, templates, sfx, starburst, captions, Mediabunny. Headless on any Linux server.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
Create professional videos from code with Remotion v4 - local CLI, Lambda, Vercel, Cloud Run, GPU rendering. Social media presets, templates, sfx, starburst, captions, Mediabunny. Headless on any Linux server.
{"openclaw":{"emoji":"🎬","requires":{"bins":["node","npm"]},"tags":["video","remotion","rendering","react","headless","social-media","tiktok","youtube","instagram","templates","thumbnails","batch","mp4","webm","lambda","vercel","gpu","sfx","captions"],"triggers":["render a video","make a video","create a video","generate a video","tiktok video","youtube short","instagram reel","promo video","chat demo video","code walkthrough video","product demo video","generate a thumbnail","batch render","render on lambda","render on vercel","add sound effects","add captions"]}}
Remotion Server
Render videos headlessly on any Linux server using Remotion v4 (latest: v4.0.435). No Mac or GUI required.
Chrome Headless Shell handles all rendering - works on VPS, Raspberry Pi, CI runners, Docker containers, anywhere Node.js runs.
FFmpeg is baked into each Remotion project - no separate FFmpeg install needed.
Setup (one-time)
Install browser dependencies for Chrome Headless Shell:
bash {baseDir}/scripts/setup.sh
This installs system libraries (libnss3, libatk, libgbm, libcups2, etc.) required by Chrome on headless Linux.
Supports Ubuntu 22.04/24.04, Debian, and Amazon Linux.
Verify setup
After setup, confirm Chrome Headless Shell works:
npx @remotion/chrome-headless-shell --help
If this fails, the system dependencies are missing. Re-run setup.sh or install manually:
bash {baseDir}/scripts/create.sh my-video
cd my-video
Render a video
npx remotion render MyComp out/video.mp4
Preview in browser (dev mode)
npx remotion preview
Opens a local dev server where you can scrub through the video timeline, adjust props, and iterate before rendering.
Rendering Options (5 ways to render)
Remotion v4 offers five rendering backends. Choose based on your infrastructure and scale.
1. Local CLI (default)
Render on the machine where Node.js runs. Best for development, CI, and single-server deployments.
npx remotion render MyComp out/video.mp4
2. Remotion Lambda
Distribute rendering across AWS Lambda functions. Renders up to ~80 minutes of Full HD video. Supports webhooks for async notifications and built-in cost estimation.
Use these resolution and aspect ratio presets when creating compositions. Pass --width and --height to npx remotion render to override the composition defaults.
AI agent integration for prompt-to-video workflows. Claude Code can generate Remotion compositions from natural language descriptions.
"Create a 15-second TikTok video with animated text saying 'New Feature'
that fades in with a spring animation, then show three bullet points"
The agent generates the TSX composition, registers it, and renders it - all from a single prompt.
Templates
All templates are created via the create.sh script. Each generates a full Remotion project with TypeScript, TailwindCSS 4.2.0, and the template components.
Chat Demo (Telegram-style phone mockup)
Animated chat bubbles appearing in sequence inside a phone mockup. Good for product demos, bot showcases, customer support highlights.
bash {baseDir}/scripts/create.sh my-chat --template chat
cd my-chat
Edit src/messages.json to customize the conversation:
[{"text":"How do I reset my password?","isUser":true},{"text":"Go to Settings > Account > Reset Password. You'll get an email in ~30 seconds.","isUser":false},{"text":"Got it, thanks!","isUser":true}]
Empty canvas for building custom compositions from scratch.
bash {baseDir}/scripts/create.sh my-project
cd my-project
Shows frame counter. Replace src/Composition.tsx with your own component.
Building Custom Templates
To add a new template (e.g., promo, code walkthrough, stats dashboard, countdown, testimonial), create a React component that uses Remotion primitives:
Extract a single frame as a still image using Remotion's still command:
npx remotion still MyComp out/thumbnail.png
Options
# Specific frame (default is frame 0)
npx remotion still MyComp out/thumb.png --frame=45
# JPEG output
npx remotion still MyComp out/thumb.jpeg --image-format=jpeg
# JPEG quality (0-100)
npx remotion still MyComp out/thumb.jpeg --image-format=jpeg --jpeg-quality=90
# Custom resolution
npx remotion still MyComp out/thumb.png --width=1280 --height=720
# Pass props
npx remotion still MyComp out/thumb.png --props='{"title":"Episode 1"}'
Thumbnail for YouTube
npx remotion still TitleCard out/yt-thumb.png --width=1280 --height=720 \
--props='{"title":"How to Build an AI Agent","subtitle":"Step by step guide"}'
YouTube recommended thumbnail: 1280x720 (16:9), PNG or JPEG.
Thumbnail for Instagram
npx remotion still MyComp out/ig-thumb.png --width=1080 --height=1080
Batch Rendering
Render multiple videos in sequence using a shell loop or xargs.
Remotion Studio includes a visual editing mode with shared contexts. Preview compositions, adjust props visually, and use the timeline scrubber for frame-accurate editing.
npx remotion studio
Features:
Visual prop editing
Shared contexts between compositions
CSS filter support in the web renderer
Real-time preview with hot reload
Styling
TailwindCSS 4.2.0
Templates ship with TailwindCSS 4.2.0 pre-configured. Use Tailwind classes directly in your compositions:
// Google Fonts via CSS import in src/index.css@importurl('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
// Or load a local font file@font-face {
font-family: 'CustomFont';
src: url('./fonts/CustomFont.woff2') format('woff2');
}
Default timeout is 30000ms (30 seconds) per frame.
Display server errors (headless Linux)
Error: Failed to launch the browser process
On headless Linux without a display server, Remotion uses Chrome Headless Shell which does not require X11/Wayland. If you see display errors, ensure you are not accidentally using a full Chrome install. Set the browser explicitly:
bash {baseDir}/scripts/create.sh launch-promo --template title
cd launch-promo
# Edit src/TitleCard.tsx to customize
npx remotion render TitleCard out/promo.mp4 --width=1080 --height=1920
Customer support bot demo (Instagram Reel)
bash {baseDir}/scripts/create.sh support-demo --template chat
cd support-demo
# Edit src/messages.json with support conversation
npx remotion render ChatDemo out/support-reel.mp4 --width=1080 --height=1920
YouTube intro with custom branding
bash {baseDir}/scripts/create.sh yt-intro --template title
cd yt-intro
# Add logo to public/logo.png, edit TitleCard to include <Img>
npx remotion render TitleCard out/intro.mp4 --width=1920 --height=1080
Generate thumbnails for a video series
for i in 1 2 3 4 5; do
npx remotion still TitleCard "out/thumb-ep${i}.png" --width=1280 --height=720 \
--props="{\"title\":\"Episode ${i}\",\"subtitle\":\"The Series\"}"done
Square Instagram post
bash {baseDir}/scripts/create.sh ig-post
cd ig-post
# Build a 1:1 composition
npx remotion render MyComp out/post.mp4 --width=1080 --height=1080
