mvanhorn/clawdbot-skill-remotion-server

Serveur Remotion

Rendez des vidéos sans interface graphique sur n'importe quel serveur Linux en utilisant Remotion v4 (dernière version : v4.0.435). Pas besoin de Mac ou d'interface graphique. Chrome Headless Shell gère tout le rendu - fonctionne sur VPS, Raspberry Pi, runners CI, conteneurs Docker, partout où Node.js s'exécute. FFmpeg est intégré dans chaque projet Remotion - pas besoin d'installer FFmpeg séparément.

Configuration (unique)

Installez les dépendances du navigateur pour Chrome Headless Shell :

bash {baseDir}/scripts/setup.sh

Ce script installe les bibliothèques système (libnss3, libatk, libgbm, libcups2, etc.) requises par Chrome sur un Linux sans interface graphique. Prend en charge Ubuntu 22.04/24.04, Debian et Amazon Linux.

Vérifier la configuration

Après l'installation, confirmez que Chrome Headless Shell fonctionne :

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

Si cela échoue, les dépendances système sont manquantes. Réexécutez setup.sh ou installez manuellement :

# 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

Démarrage rapide

Créer un projet

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

Rendre une vidéo

npx remotion render MyComp out/video.mp4

Aperçu dans le navigateur (mode développement)

npx remotion preview

Ouvre un serveur de développement local où vous pouvez parcourir la chronologie vidéo, ajuster les propriétés et itérer avant le rendu.

Options de rendu (5 façons de rendre)

Remotion v4 propose cinq moteurs de rendu. Choisissez en fonction de votre infrastructure et de votre échelle.

1. CLI local (par défaut)

Rendez sur la machine où Node.js s'exécute. Idéal pour le développement, l'CI et les déploiements sur un seul serveur.

npx remotion render MyComp out/video.mp4

2. Remotion Lambda

Distribuez le rendu sur les fonctions AWS Lambda. Rend jusqu'à environ 80 minutes de vidéo Full HD. Prend en charge les webhooks pour les notifications asynchrones et l'estimation intégrée des coûts.

npm install @remotion/lambda

# Déployer la fonction Lambda
npx remotion lambda functions deploy

# Rendre sur Lambda
npx remotion lambda render MyComp

# Estimer le coût avant le rendu
npx remotion lambda still --estimate-price MyComp

Fonctionnalités clés :

• Rendu distribué sur plusieurs invocations Lambda
• Rappels webhook à la fin du rendu
• Estimation du coût avant le rendu
• Stockage de sortie S3

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

3. @remotion/vercel (NOUVEAU - Février 2026)

Rendez dans les Vercel Sandboxes. Configuration la plus simple - pas besoin de compte AWS.

npm install @remotion/vercel

Déployez votre projet Remotion sur Vercel et déclenchez les rendus via l'API. Idéal pour les équipes déjà sur Vercel qui souhaitent un rendu sans configuration.

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

4. Cloud Run (alpha)

Rendez sur Google Cloud Run. Coûts de calcul inférieurs à Lambda pour les vidéos plus longues.

npm install @remotion/cloudrun
npx remotion cloudrun render MyComp

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

5. Rendu GPU sur EC2 (v4.0.248+)

Rendu accéléré par le matériel sur les instances GPU EC2. Option la plus rapide pour les compositions complexes avec animations lourdes ou contenu 3D.

Nécessite une instance EC2 avec un GPU (par exemple, g4dn.xlarge) et les pilotes appropriés.

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

Préréglages de format pour les réseaux sociaux

Utilisez ces préréglages de résolution et de rapport hauteur/largeur lors de la création de compositions. Passez --width et --height à npx remotion render pour remplacer les valeurs par défaut de la composition.

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

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

• Résolution : 1080x1920
• Rapport hauteur/largeur : 9:16
• FPS recommandé : 30
• Durée maximale : 60s (TikTok), 60s (Shorts), 90s (Reels)

YouTube Standard (16:9 paysage)

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

• Résolution : 1920x1080
• Rapport hauteur/largeur : 16:9
• FPS recommandé : 30 ou 60

Instagram Post (1:1 carré)

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

• Résolution : 1080x1080
• Rapport hauteur/largeur : 1:1
• Durée maximale : 60s

Twitter/X Video (16:9 paysage)

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

• Résolution : 1280x720
• Rapport hauteur/largeur : 16:9
• Taille de fichier maximale : 512 Mo
• Durée maximale : 140s

Résumé des préréglages de format

Plateforme	Largeur	Hauteur	Rapport	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

Lors de la création d'une Composition dans le code, définissez width, height et fps directement :

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

Nouveaux packages (v4.0.429+)

@remotion/sfx (v4.0.429)

Effets sonores intégrés pour des repères audio rapides :

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

// Sons disponibles : ding, bruh, vineBoom
<Sfx name="ding" />
<Sfx name="bruh" />
<Sfx name="vineBoom" />

@remotion/starburst (v4.0.435)

Composant de forme et d'animation d'étoile :

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

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

@remotion/shapes (mis à jour v4.0.432)

Primitives de formes géométriques. Inclut désormais la forme Flèche :

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

Sous-titres animés pour le contenu vidéo. Prend en charge le minutage au niveau du mot et plusieurs styles d'animation :

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

<Caption
  text="Bonjour tout le monde"
  startFrame={0}
  endFrame={60}
  style="bounce"
/>

@remotion/player

Intégrez des vidéos Remotion dans des applications React sans les rendre dans un fichier. Lecture interactive avec contrôles :

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

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

Mediabunny (conversion de format)

Mediabunny est le successeur de @remotion/media-parser et @remotion/webcodecs. Conversion de format accélérée par GPU intégrée à Remotion.

Entrées prises en charge : MP4, WebM, MOV, MKV, M3U8, TS, AVI, MP3, FLAC, WAV, M4A, AAC Sorties prises en charge : MP4, WebM, WAV

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

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

Compétences Remotion (Janv. 2026)

Intégration d'agent IA pour les workflows de type 'prompt vers vidéo'. Claude Code peut générer des compositions Remotion à partir de descriptions en langage naturel.

"Crée une vidéo TikTok de 15 secondes avec un texte animé disant 'Nouvelle fonctionnalité' qui apparaît en fondu avec une animation ressort, puis affiche trois points de suite"

L'agent génère la composition TSX, l'enregistre et la rend - le tout à partir d'une seule invite.

Modèles

Tous les modèles sont créés via le script create.sh. Chacun génère un projet Remotion complet avec TypeScript, TailwindCSS 4.2.0 et les composants du modèle.

Chat Demo (maquette de téléphone style Telegram)

Bulles de chat animées apparaissant en séquence dans une maquette de téléphone. Idéal pour les démos de produits, les vitrines de robots, les mises en avant du support client.

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

Modifiez src/messages.json pour personnaliser la conversation :

[
  {"text": "Comment réinitialiser mon mot de passe ?", "isUser": true},
  {"text": "Allez dans Paramètres > Compte > Réinitialiser le mot de passe. Vous recevrez un email dans environ 30 secondes.", "isUser": false},
  {"text": "Compris, merci !", "isUser": true}
]

Rendez à la résolution TikTok :

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

Composition par défaut : 1080x1920 (vertical), 30fps, durée calculée automatiquement en fonction du nombre de messages.

Carte de titre (intro animée)

Titre avec fondu et animation ressort. Utilisez pour les intros de vidéos, les en-têtes de section ou les cartes d'annonce autonomes.

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

Personnalisez en modifiant les defaultProps de src/TitleCard.tsx :

defaultProps={{ title: "Lancement du produit", subtitle: "À venir en mars 2026" }}

Rendez à la résolution YouTube :

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

Composition par défaut : 1920x1080 (paysage), 30fps, 3 secondes.

Vierge (modèle de démarrage)

Zone de travail vide pour créer des compositions personnalisées à partir de zéro.

bash {baseDir}/scripts/create.sh my-project
cd my-project

Affiche un compteur d'images. Remplacez src/Composition.tsx par votre propre composant.

Création de modèles personnalisés

Pour ajouter un nouveau modèle (par exemple, promotion, démonstration de code, tableau de bord statistiques, compte à rebours, témoignage), créez un composant React qui utilise les primitives Remotion :

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

API Remotion clés pour les modèles :

• useCurrentFrame() - numéro d'image actuel pour l'animation
• spring({ frame, fps, config }) - animation physique avec ressort
• interpolate(frame, inputRange, outputRange) - interpolation linéaire
• <Sequence from={30}> - retarder le contenu enfant de N images
• <Img src={staticFile("logo.png")} /> - charger des ressources statiques
• <Audio src={staticFile("music.mp3")} /> - ajouter un fond audio
• <AbsoluteFill> - conteneur plein écran

Enregistrez les compositions dans 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}
      />
    </>
  );
};

Génération de miniatures

Extrayez une seule image sous forme d'image fixe à l'aide de la commande still de Remotion :

npx remotion still MyComp out/thumbnail.png

Options

# Image spécifique (par défaut, image 0)
npx remotion still MyComp out/thumb.png --frame=45

# Sortie JPEG
npx remotion still MyComp out/thumb.jpeg --image-format=jpeg

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

# Résolution personnalisée