菜单
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.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/mvanhorn/clawdbot-skill-remotion-server --skill remotion-server命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | remotion-server |
| version | 3.0.0 |
| description | 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. |
| author | mvanhorn |
| license | MIT |
| repository | https://github.com/mvanhorn/clawdbot-skill-remotion-server |
| homepage | https://remotion.dev |
| metadata | {"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"]}} |
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.
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.
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:
# Ubuntu/Debian
sudo apt install -y libnss3 libatk1.0-0 libatk-bridge2.0-0 libcups2 libgbm1 \
libpango-1.0-0 libcairo2 libxcomposite1 libxdamage1 libxfixes3 libxrandr2
# Amazon Linux
sudo yum install -y mesa-libgbm libX11 libXrandr libdrm libXdamage libXfixes \
libxkbcommon dbus-libs libXcomposite alsa-lib nss pango cups-libs at-spi2-core atk
bash {baseDir}/scripts/create.sh my-video
cd my-video
npx remotion render MyComp out/video.mp4
npx remotion preview
Opens a local dev server where you can scrub through the video timeline, adjust props, and iterate before rendering.
Remotion v4 offers five rendering backends. Choose based on your infrastructure and scale.
Render on the machine where Node.js runs. Best for development, CI, and single-server deployments.
npx remotion render MyComp out/video.mp4
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.
npm install @remotion/lambda
npx remotion lambda deploy
npx remotion lambda render MyComp
npx remotion lambda still --estimate-price MyComp
Key features:
Render inside Vercel Sandboxes. Simplest setup - no AWS account needed.
npm install @remotion/vercel
Deploy your Remotion project to Vercel and trigger renders via API. Best for teams already on Vercel who want zero-config rendering.
Render on Google Cloud Run. Lower compute costs than Lambda for longer videos.
npm install @remotion/cloudrun
npx remotion cloudrun render MyComp
Hardware-accelerated rendering on EC2 GPU instances. Fastest option for complex compositions with heavy animations or 3D content.
Requires an EC2 instance with a GPU (e.g., g4dn.xlarge) and appropriate drivers.
Use these resolution and aspect ratio presets when creating compositions. Pass --width and --height to npx remotion render to override the composition defaults.
npx remotion render ChatDemo out/tiktok.mp4 --width=1080 --height=1920
npx remotion render MyComp out/youtube.mp4 --width=1920 --height=1080
npx remotion render MyComp out/instagram-post.mp4 --width=1080 --height=1080
npx remotion render MyComp out/twitter.mp4 --width=1280 --height=720
| Platform | Width | Height | Ratio | FPS |
|---|---|---|---|---|
| TikTok | 1080 | 1920 | 9:16 | 30 |
| YouTube Shorts | 1080 | 1920 | 9:16 | 30 |
| Instagram Reel | 1080 | 1920 | 9:16 | 30 |
| Instagram Post | 1080 | 1080 | 1:1 | 30 |
| YouTube | 1920 | 1080 | 16:9 | 30 |
| Twitter/X | 1280 | 720 | 16:9 | 30 |
When building a Composition in code, set width, height, and fps directly:
<Composition
id="TikTokPromo"
component={PromoVideo}
durationInFrames={30 * 15}
fps={30}
width={1080}
height={1920}
/>
Built-in sound effects for quick audio cues:
import { Sfx } from "@remotion/sfx";
// Available sounds: ding, bruh, vineBoom
<Sfx name="ding" />
<Sfx name="bruh" />
<Sfx name="vineBoom" />
Starburst shape and animation component:
import { Starburst } from "@remotion/starburst";
<Starburst
points={12}
innerRadius={50}
outerRadius={100}
fill="yellow"
/>
Geometric shape primitives. Now includes Arrow shape:
import { Triangle, Star, Pie, Arrow } from "@remotion/shapes";
<Triangle length={100} direction="up" fill="red" />
<Star points={5} innerRadius={30} outerRadius={60} fill="gold" />
<Pie radius={50} progress={0.75} fill="blue" />
<Arrow length={150} direction="right" fill="black" />
Animated captions for video content. Supports word-level timing and multiple animation styles:
import { Caption } from "@remotion/captions";
<Caption
text="Hello world"
startFrame={0}
endFrame={60}
style="bounce"
/>
Embed Remotion videos in React apps without rendering to file. Interactive playback with controls:
import { Player } from "@remotion/player";
<Player
component={MyComp}
durationInFrames={300}
fps={30}
compositionWidth={1920}
compositionHeight={1080}
controls
/>
Mediabunny is the successor to @remotion/media-parser and @remotion/webcodecs. GPU-accelerated format conversion built into Remotion.
Supported inputs: MP4, WebM, MOV, MKV, M3U8, TS, AVI, MP3, FLAC, WAV, M4A, AAC Supported outputs: MP4, WebM, WAV
import { convertMedia } from "@remotion/media-converter";
await convertMedia({
src: "input.mov",
container: "mp4",
});
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.
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.
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}
]
Render at TikTok resolution:
npx remotion render ChatDemo out/chat-tiktok.mp4 --width=1080 --height=1920
Default composition: 1080x1920 (vertical), 30fps, duration auto-calculated from message count.
Fade-in title with spring animation. Use for video intros, section headers, or standalone announcement cards.
bash {baseDir}/scripts/create.sh my-intro --template title
cd my-intro
Customize by editing src/TitleCard.tsx defaultProps:
defaultProps={{ title: "Product Launch", subtitle: "Coming March 2026" }}
Render at YouTube resolution:
npx remotion render TitleCard out/title-youtube.mp4 --width=1920 --height=1080
Default composition: 1920x1080 (landscape), 30fps, 3 seconds.
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.
To add a new template (e.g., promo, code walkthrough, stats dashboard, countdown, testimonial), create a React component that uses Remotion primitives:
import { AbsoluteFill, useCurrentFrame, spring, useVideoConfig, interpolate, Sequence, Img, Audio } from "remotion";
Key Remotion APIs for templates:
useCurrentFrame() - current frame number for animationspring({ frame, fps, config }) - spring physics animationinterpolate(frame, inputRange, outputRange) - linear interpolation<Sequence from={30}> - delay child content by N frames<Img src={staticFile("logo.png")} /> - load static assets<Audio src={staticFile("music.mp3")} /> - add background audio<AbsoluteFill> - full-frame containerRegister compositions in src/Root.tsx:
import { Composition } from "remotion";
import { PromoVideo } from "./PromoVideo";
export const RemotionRoot: React.FC = () => {
return (
<>
<Composition
id="PromoVideo"
component={PromoVideo}
durationInFrames={300}
fps={30}
width={1080}
height={1920}
/>
</>
);
};
Extract a single frame as a still image using Remotion's still command:
npx remotion still MyComp out/thumbnail.png
# 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"}'
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.
npx remotion still MyComp out/ig-thumb.png --width=1080 --height=1080
Render multiple videos in sequence using a shell loop or xargs.
If your Root.tsx registers multiple compositions:
npx remotion render PromoVideo out/promo.mp4
npx remotion render ChatDemo out/chat.mp4
npx remotion render TitleCard out/title.mp4
for topic in "AI Agents" "Open Source" "DevTools"; do
slug=$(echo "$topic" | tr ' ' '-' | tr '[:upper:]' '[:lower:]')
npx remotion render TitleCard "out/${slug}.mp4" \
--props="{\"title\":\"$topic\",\"subtitle\":\"Deep dive\"}"
done
npx remotion render MyComp out/youtube.mp4 --width=1920 --height=1080
npx remotion render MyComp out/tiktok.mp4 --width=1080 --height=1920
npx remotion render MyComp out/square.mp4 --width=1080 --height=1080
npx remotion render MyComp out/twitter.mp4 --width=1280 --height=720
Create a render-jobs.json file:
[
{"comp": "TitleCard", "output": "out/intro.mp4", "props": {"title": "Welcome"}},
{"comp": "ChatDemo", "output": "out/demo.mp4"},
{"comp": "TitleCard", "output": "out/outro.mp4", "props": {"title": "Thanks!"}}
]
Then render all jobs:
cat render-jobs.json | jq -c '.[]' | while read job; do
comp=$(echo "$job" | jq -r '.comp')
output=$(echo "$job" | jq -r '.output')
props=$(echo "$job" | jq -r '.props // empty')
if [ -n "$props" ]; then
npx remotion render "$comp" "$output" --props="$props"
else
npx remotion render "$comp" "$output"
fi
done
Remotion supports multiple codecs via --codec:
# MP4 with H.264 (default, best compatibility)
npx remotion render MyComp out/video.mp4
# MP4 with H.265 (smaller files, less compatible)
npx remotion render MyComp out/video.mp4 --codec=h265
# WebM with VP8
npx remotion render MyComp out/video.webm --codec=vp8
# WebM with VP9 (better quality, slower encode)
npx remotion render MyComp out/video.webm --codec=vp9
# GIF (no audio, large files)
npx remotion render MyComp out/video.gif --codec=gif
# ProRes (lossless, huge files, for post-production)
npx remotion render MyComp out/video.mov --codec=prores
# PNG sequence (one PNG per frame)
npx remotion render MyComp out/frames/ --image-format=png --sequence
# CRF (quality) - lower = better quality, larger file. Default ~20
npx remotion render MyComp out/video.mp4 --crf=18
# Concurrency - render multiple frames in parallel
npx remotion render MyComp out/video.mp4 --concurrency=4
# Log level for debugging
npx remotion render MyComp out/video.mp4 --log=verbose
Remotion v4 supports multiple bundlers:
To use Rspack:
// remotion.config.ts
import { Config } from "@remotion/cli/config";
Config.setBundler("rspack");
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:
Templates ship with TailwindCSS 4.2.0 pre-configured. Use Tailwind classes directly in your compositions:
<AbsoluteFill className="bg-gradient-to-br from-purple-600 to-blue-500 flex items-center justify-center">
<h1 className="text-6xl font-bold text-white">Hello World</h1>
</AbsoluteFill>
Use Zod v4 schemas to validate composition props:
import { z } from "zod";
const schema = z.object({
title: z.string(),
subtitle: z.string().optional(),
color: z.string().default("#ffffff"),
});
<Composition
id="MyComp"
component={MyComp}
schema={schema}
defaultProps={{ title: "Hello" }}
...
/>
The web renderer supports CSS filter properties:
<div style={{ filter: "blur(5px) brightness(1.2) saturate(1.5)" }}>
<Img src={staticFile("photo.jpg")} />
</div>
Remotion prints render progress to stderr during rendering. The output includes:
To capture progress programmatically, parse stderr output:
npx remotion render MyComp out/video.mp4 2>&1 | tee render.log
For CI/CD pipelines, check the exit code:
npx remotion render MyComp out/video.mp4
if [ $? -eq 0 ]; then
echo "Render complete: out/video.mp4"
ls -lh out/video.mp4
else
echo "Render failed"
exit 1
fi
Place assets in the public/ directory. Reference them with staticFile():
import { Img, Audio, staticFile } from "remotion";
// Image
<Img src={staticFile("logo.png")} />
// Audio
<Audio src={staticFile("background-music.mp3")} />
// Video overlay
<OffthreadVideo src={staticFile("clip.mp4")} />
Load web fonts or local fonts in your component:
// Google Fonts via CSS import in src/index.css
@import url('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');
}
Then use in components:
<div style={{ fontFamily: "'Inter', sans-serif" }}>Your text</div>
<AbsoluteFill style={{
backgroundImage: `url(${staticFile("bg.jpg")})`,
backgroundSize: "cover",
backgroundPosition: "center",
}} />
Error: Could not find Chrome Headless Shell
Fix: Run setup script or install Chrome dependencies:
bash {baseDir}/scripts/setup.sh
Or install Chrome Headless Shell explicitly:
npx @remotion/install-chrome-headless-shell
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
Fix: Increase Node.js memory limit:
NODE_OPTIONS="--max-old-space-size=4096" npx remotion render MyComp out/video.mp4
Or reduce concurrency:
npx remotion render MyComp out/video.mp4 --concurrency=1
Cannot find module 'remotion'
Fix: Install dependencies in the project directory:
npm install
Could not find composition with id "MyComp"
Fix: List available compositions:
npx remotion compositions
Then use the correct composition ID in your render command.
For long videos or slow servers, increase the timeout per frame:
npx remotion render MyComp out/video.mp4 --timeout=60000
Default timeout is 30000ms (30 seconds) per frame.
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:
npx remotion render MyComp out/video.mp4 --browser=chrome-headless-shell
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
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
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
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
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
npx remotion lambda render MyComp \
--webhook-url=https://example.com/api/render-complete \
--webhook-secret=my-secret
import { Sfx } from "@remotion/sfx";
import { Sequence } from "remotion";
// Play a ding at frame 30
<Sequence from={30}>
<Sfx name="ding" />
</Sequence>
The setup script installs these system packages required by Chrome Headless Shell:
libnss3 libdbus-1-3 libatk1.0-0 libasound2 libxrandr2 libxkbcommon-dev
libxfixes3 libxcomposite1 libxdamage1 libgbm-dev libcups2 libcairo2
libpango-1.0-0 libatk-bridge2.0-0
Note: Ubuntu 24.04 uses libasound2t64 instead of libasound2.
mesa-libgbm libX11 libXrandr libdrm libXdamage libXfixes libxkbcommon
dbus-libs libXcomposite alsa-lib nss dbus pango cups-libs at-spi2-core atk at-spi2-atk
For Docker, use a base image with Chrome dependencies pre-installed, or add the apt-get install to your Dockerfile:
FROM node:20-slim
RUN apt-get update && apt-get install -y \
libnss3 libatk1.0-0 libatk-bridge2.0-0 libcups2 libgbm1 \
libpango-1.0-0 libcairo2 libxcomposite1 libxdamage1 libxfixes3 libxrandr2 \
&& rm -rf /var/lib/apt/lists/*
All templates use FAKE demo data only:
Always review generated content before publishing.