mvanhorn/clawdbot-skill-remotion-server

Remotion Server

Rendere Videos headless auf jedem Linux-Server mit Remotion v5 (aktuell v4.0.435). Kein Mac oder GUI erforderlich. Die Chrome Headless Shell übernimmt das gesamte Rendering – funktioniert auf VPS, Raspberry Pi, CI-Runnern, Docker-Containern, überall wo Node.js läuft. FFmpeg ist in jedes Remotion-Projekt integriert – keine separate FFmpeg-Installation nötig.

Einrichtung (einmalig)

Installiere die Browser-Abhängigkeiten für Chrome Headless Shell:

bash {baseDir}/scripts/setup.sh

Dies installiert Systembibliotheken (libnss3, libatk, libgbm, libcups2 usw.), die Chrome auf headless Linux benötigt. Unterstützt Ubuntu 22.04/24.04, Debian und Amazon Linux.

Einrichtung überprüfen

Überprüfe nach der Einrichtung, ob Chrome Headless Shell funktioniert:

npx @remotion/chrome-headless-shell --help

Falls dies fehlschlägt, fehlen die Systemabhängigkeiten. Führe setup.sh erneut aus oder installiere manuell:

# 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

Schnellstart

Ein Projekt erstellen

bash {baseDir}/scripts/create.sh mein-video
cd mein-video

Ein Video rendern

npx remotion render MeineKomposition out/video.mp4

Vorschau im Browser (Entwicklungsmodus)

npx remotion preview

Öffnet einen lokalen Entwicklungsserver, auf dem du durch die Video-Zeitleiste scrollen, Props anpassen und iterieren kannst, bevor du renderst.

Rendering-Optionen (5 Möglichkeiten)

Remotion v5 bietet fünf Rendering-Backends. Wähle basierend auf deiner Infrastruktur und Skalierung.

1. Lokales CLI (Standard)

Rendere auf dem Rechner, auf dem Node.js läuft. Am besten für Entwicklung, CI und Single-Server-Bereitstellungen geeignet.

npx remotion render MeineKomposition out/video.mp4

2. Remotion Lambda

Verteile das Rendering auf AWS Lambda-Funktionen. Rendert bis zu ~80 Minuten Full-HD-Video. Unterstützt Webhooks für asynchrone Benachrichtigungen und integrierte Kostenschätzung.

npm install @remotion/lambda

# Lambda-Funktion bereitstellen
npx remotion lambda functions deploy

# Auf Lambda rendern
npx remotion lambda render MeineKomposition

# Kosten vor dem Rendern schätzen
npx remotion lambda still --estimate-price MeineKomposition

Hauptmerkmale:

• Verteiltes Rendering über mehrere Lambda-Aufrufe
• Webhook-Rückrufe bei Render-Abschluss
• Kostenschätzung vor dem Rendern
• S3-Ausgabespeicher

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

3. @remotion/vercel (NEU – Feb 2026)

Rendere in Vercel Sandboxes. Einfachste Einrichtung – kein AWS-Konto erforderlich.

npm install @remotion/vercel

Bereitstellung deines Remotion-Projekts auf Vercel und Auslösen von Renderings über die API. Am besten für Teams, die bereits Vercel nutzen und eine Konfiguration ohne Aufwand wünschen.

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

4. Cloud Run (alpha)

Rendere auf Google Cloud Run. Niedrigere Rechenkosten als Lambda für längere Videos.

npm install @remotion/cloudrun
npx remotion cloudrun render MeineKomposition

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

5. GPU-Rendering auf EC2 (v4.0.248+)

Hardware-beschleunigtes Rendering auf EC2-GPU-Instanzen. Schnellste Option für komplexe Kompositionen mit starken Animationen oder 3D-Inhalten.

Erfordert eine EC2-Instanz mit einer GPU (z. B. g4dn.xlarge) und entsprechende Treiber.

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

Voreinstellungen für Social-Media-Formate

Verwende diese Auflösungs- und Seitenverhältnis-Voreinstellungen beim Erstellen von Kompositionen. Übergib --width und --height an npx remotion render, um die Standardeinstellungen der Komposition zu überschreiben.

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

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

• Auflösung: 1080x1920
• Seitenverhältnis: 9:16
• Empfohlene FPS: 30
• Maximale Dauer: 60s (TikTok), 60s (Shorts), 90s (Reels)

YouTube Standard (16:9 Landschaft)

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

• Auflösung: 1920x1080
• Seitenverhältnis: 16:9
• Empfohlene FPS: 30 oder 60

Instagram Beitrag (1:1 quadratisch)

npx remotion render MeineKomposition out/instagram-beitrag.mp4 --width=1080 --height=1080

• Auflösung: 1080x1080
• Seitenverhältnis: 1:1
• Maximale Dauer: 60s

Twitter/X Video (16:9 Landschaft)

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

• Auflösung: 1280x720
• Seitenverhältnis: 16:9
• Maximale Dateigröße: 512MB
• Maximale Dauer: 140s

Format-Voreinstellungen Zusammenfassung

Plattform	Breite	Höhe	Verhältnis	FPS
TikTok	1080	1920	9:16	30
YouTube Shorts	1080	1920	9:16	30
Instagram Reel	1080	1920	9:16	30
Instagram Beitrag	1080	1080	1:1	30
YouTube	1920	1080	16:9	30
Twitter/X	1280	720	16:9	30

Beim Erstellen einer Komposition im Code setze width, height und fps direkt:

<Composition
  id="TikTokPromo"
  component={PromoVideo}
  durationInFrames={30 * 15}
  fps={30}
  width={1080}
  height={1920}
/>

Neue Pakete (v4.0.429+)

@remotion/sfx (v4.0.429)

Integrierte Soundeffekte für schnelle Audio-Hinweise:

import { Sfx } from "@remotion/sfx";

// Verfügbare Sounds: ding, bruh, vineBoom
<Sfx name="ding" />
<Sfx name="bruh" />
<Sfx name="vineBoom" />

@remotion/starburst (v4.0.435)

Sternen- und Animationskomponente:

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

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

@remotion/shapes (aktualisiert v4.0.432)

Geometrische Grundformen. Enthält jetzt die Pfeil-Form:

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

Animierte Untertitel für Videoinhalte. Unterstützt wortgenaues Timing und mehrere Animationsstile:

import { Caption } from "@remotion/captions";

<Caption
  text="Hallo Welt"
  startFrame={0}
  endFrame={60}
  style="bounce"
/>

@remotion/player

Bette Remotion-Videos in React-Apps ein, ohne sie als Datei zu rendern. Interaktive Wiedergabe mit Steuerelementen:

import { Player } from "@remotion/player";

<Player
  component={MeineKomposition}
  durationInFrames={300}
  fps={30}
  compositionWidth={1920}
  compositionHeight={1080}
  controls
/>

Mediabunny (Formatkonvertierung)

Mediabunny ist der Nachfolger von @remotion/media-parser und @remotion/webcodecs. GPU-beschleunigte Formatkonvertierung, integriert in Remotion.

Unterstützte Eingaben: MP4, WebM, MOV, MKV, M3U8, TS, AVI, MP3, FLAC, WAV, M4A, AAC Unterstützte Ausgaben: MP4, WebM, WAV

import { convertMedia } from "@remotion/media-converter";

await convertMedia({
  src: "input.mov",
  container: "mp4",
});

Remotion Skills (Jan 2026)

KI-Agenten-Integration für Prompt-to-Video-Workflows. Claude Code kann Remotion-Kompositionen aus natürlichsprachlichen Beschreibungen generieren.

"Erstelle ein 15-Sekunden-TikTok-Video mit animiertem Text, der 'Neue Funktion' sagt, mit einer Feder-Animation einblendet und dann drei Aufzählungspunkte zeigt"

Der Agent generiert die TSX-Komposition, registriert sie und rendert sie – alles aus einem einzigen Prompt.

Vorlagen

Alle Vorlagen werden über das Skript create.sh erstellt. Jede generiert ein vollständiges Remotion-Projekt mit TypeScript, TailwindCSS 4.2.0 und den Vorlagenkomponenten.

Chat-Demo (Telegram-ähnliches Handy-Mockup)

Animierte Chat-Bläschen, die nacheinander in einem Handy-Mockup erscheinen. Gut für Produktdemos, Bot-Präsentationen und Kunden-Support-Highlights.

bash {baseDir}/scripts/create.sh mein-chat --template chat
cd mein-chat

Passe die Konversation in src/messages.json an:

[
  {"text": "Wie setze ich mein Passwort zurück?", "isUser": true},
  {"text": "Gehe zu Einstellungen > Konto > Passwort zurücksetzen. Du erhältst in ca. 30 Sekunden eine E-Mail.", "isUser": false},
  {"text": "Verstanden, danke!", "isUser": true}
]

Rendere in TikTok-Auflösung:

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

Standardkomposition: 1080x1920 (vertikal), 30fps, Dauer automatisch aus Nachrichtenanzahl berechnet.

Titel-Karte (animierter Intro-Text)

Einblendender Titel mit Feder-Animation. Verwende für Video-Intros, Abschnittsüberschriften oder eigenständige Ankündigungskarten.

bash {baseDir}/scripts/create.sh mein-intro --template title
cd mein-intro

Passe die Vorlage durch Bearbeiten der defaultProps in src/TitleCard.tsx an:

defaultProps={{ title: "Produkteinführung", subtitle: "Kommt im März 2026" }}

Rendere in YouTube-Auflösung:

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

Standardkomposition: 1920x1080 (Landschaft), 30fps, 3 Sekunden.

Leer (Startvorlage)

Leere Leinwand für eigene Kompositionen.

bash {baseDir}/scripts/create.sh mein-projekt
cd mein-projekt

Zeigt einen Frame-Zähler. Ersetze src/Composition.tsx durch deine eigene Komponente.

Eigene Vorlagen erstellen

Um eine neue Vorlage hinzuzufügen (z. B. Werbevideo, Code-Durchlauf, Statistiken-Dashboard, Countdown, Testimonial), erstelle eine React-Komponente, die Remotion-Primitive verwendet:

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

Wichtige Remotion-APIs für Vorlagen:

• useCurrentFrame() – aktuelle Frame-Nummer für Animationen
• spring({ frame, fps, config }) – Feder-Physik-Animation
• interpolate(frame, inputRange, outputRange) – lineare Interpolation
• <Sequence from={30}> – verzögert Kind-Elemente um N Frames
• <Img src={staticFile("logo.png")} /> – lädt statische Assets
• <Audio src={staticFile("music.mp3")} /> – fügt Hintergrund-Audio hinzu
• <AbsoluteFill> – Vollbild-Container

Registriere Kompositionen 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-Generierung

Extrahiere einen einzelnen Frame als Standbild mit dem Befehl still von Remotion:

npx remotion still MeineKomposition out/thumbnail.png

Optionen

# Bestimmter Frame (Standard ist Frame 0)
npx remotion still MeineKomposition out/thumb.png --frame=45

# JPEG-Ausgabe
npx remotion still MeineKomposition out/thumb.jpeg --image-format=jpeg

# JPEG-Qualität (0-100)
npx remotion still MeineKomposition out/thumb.jpeg --image-format=jpeg --jpeg-quality=90

# Benutzerdefinierte Auflösung
npx rem