mvanhorn/clawdbot-skill-remotion-server

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:

# 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

Quick Start

Create a project

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.

npm install @remotion/lambda

# Deploy Lambda function
npx remotion lambda functions deploy

# Render on Lambda
npx remotion lambda render MyComp

# Estimate cost before rendering
npx remotion lambda still --estimate-price MyComp

Key features:

• Distributed rendering across multiple Lambda invocations
• Webhook callbacks on render completion
• Cost estimation before rendering
• S3 output storage

See https://www.remotion.dev/docs/lambda

3. @remotion/vercel (NEW - Feb 2026)

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.

See https://www.remotion.dev/docs/vercel

4. Cloud Run (alpha)

Render on Google Cloud Run. Lower compute costs than Lambda for longer videos.

npm install @remotion/cloudrun
npx remotion cloudrun render MyComp

See https://www.remotion.dev/docs/cloudrun

5. GPU rendering on EC2 (v4.0.248+)

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.

See https://www.remotion.dev/docs/gpu

Social Media Format Presets

Use these resolution and aspect ratio presets when creating compositions. Pass --width and --height to npx remotion render to override the composition defaults.

TikTok / YouTube Shorts / Instagram Reels (9:16 vertical)

npx remotion render ChatDemo out/tiktok.mp4 --width=1080 --height=1920

• Resolution: 1080x1920
• Aspect ratio: 9:16
• Recommended FPS: 30
• Max duration: 60s (TikTok), 60s (Shorts), 90s (Reels)

YouTube Standard (16:9 landscape)

npx remotion render MyComp out/youtube.mp4 --width=1920 --height=1080

• Resolution: 1920x1080
• Aspect ratio: 16:9
• Recommended FPS: 30 or 60

Instagram Post (1:1 square)

npx remotion render MyComp out/instagram-post.mp4 --width=1080 --height=1080

• Resolution: 1080x1080
• Aspect ratio: 1:1
• Max duration: 60s

Twitter/X Video (16:9 landscape)

npx remotion render MyComp out/twitter.mp4 --width=1280 --height=720

• Resolution: 1280x720
• Aspect ratio: 16:9
• Max file size: 512MB
• Max duration: 140s

Format preset summary

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}
/>

New Packages (v4.0.429+)

@remotion/sfx (v4.0.429)

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" />

@remotion/starburst (v4.0.435)

Starburst shape and animation component:

import { Starburst } from "@remotion/starburst";

<Starburst
  points={12}
  innerRadius={50}
  outerRadius={100}
  fill="yellow"
/>

@remotion/shapes (updated v4.0.432)

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" />

@remotion/captions

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"
/>

@remotion/player

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 (format conversion)

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",
});

Remotion Skills (Jan 2026)

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}
]

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.

Title Card (animated intro)

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.

Blank (starter template)

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:

import { AbsoluteFill, useCurrentFrame, spring, useVideoConfig, interpolate, Sequence, Img, Audio } from "remotion";

Key Remotion APIs for templates:

• useCurrentFrame() - current frame number for animation
• spring({ frame, fps, config }) - spring physics animation
• interpolate(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 container

Register 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}
      />
    </>
  );
};

Thumbnail Generation

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 rem