mvanhorn/clawdbot-skill-remotion-server

Servidor Remotion

Renderiza videos sin cabeza gráfica en cualquier servidor Linux usando Remotion v4 (última versión: v4.0.435). No se requiere Mac ni interfaz gráfica. Chrome Headless Shell maneja todo el renderizado: funciona en VPS, Raspberry Pi, runners de CI, contenedores Docker, en cualquier lugar donde se ejecute Node.js. FFmpeg está incluido en cada proyecto de Remotion: no es necesaria una instalación separada de FFmpeg.

Configuración (una sola vez)

Instala las dependencias del navegador para Chrome Headless Shell:

bash {baseDir}/scripts/setup.sh

Esto instala las bibliotecas del sistema (libnss3, libatk, libgbm, libcups2, etc.) que requiere Chrome en Linux sin cabeza gráfica. Compatible con Ubuntu 22.04/24.04, Debian y Amazon Linux.

Verificar la configuración

Después de la configuración, confirma que Chrome Headless Shell funciona:

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

Si esto falla, faltan las dependencias del sistema. Vuelve a ejecutar setup.sh o instálalas manualmente:

# 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

Inicio rápido

Crear un proyecto

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

Renderizar un video

npx remotion render MiComp out/video.mp4

Vista previa en el navegador (modo desarrollo)

npx remotion preview

Abre un servidor de desarrollo local donde puedes recorrer la línea de tiempo del video, ajustar propiedades e iterar antes de renderizar.

Opciones de renderizado (5 formas de renderizar)

Remotion v4 ofrece cinco motores de renderizado. Elige según tu infraestructura y escala.

1. CLI local (predeterminado)

Renderiza en la máquina donde se ejecuta Node.js. Ideal para desarrollo, CI e implementaciones en un solo servidor.

npx remotion render MiComp out/video.mp4

2. Remotion Lambda

Distribuye el renderizado entre funciones de AWS Lambda. Renderiza hasta ~80 minutos de video Full HD. Compatible con webhooks para notificaciones asíncronas y estimación de costos integrada.

npm install @remotion/lambda

# Implementar función Lambda
npx remotion lambda functions deploy

# Renderizar en Lambda
npx remotion lambda render MiComp

# Estimar costo antes de renderizar
npx remotion lambda still --estimate-price MiComp

Características clave:

• Renderizado distribuido en múltiples invocaciones de Lambda
• Callbacks mediante webhook al completar el renderizado
• Estimación de costos antes de renderizar
• Almacenamiento de salida en S3

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

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

Renderiza dentro de Sandboxes de Vercel. La configuración más sencilla: no se necesita cuenta de AWS.

npm install @remotion/vercel

Implementa tu proyecto de Remotion en Vercel y activa los renderizados a través de la API. Ideal para equipos que ya usan Vercel y quieren renderizado sin configuración.

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

4. Cloud Run (alfa)

Renderiza en Google Cloud Run. Costos de cómputo más bajos que Lambda para videos más largos.

npm install @remotion/cloudrun
npx remotion cloudrun render MiComp

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

5. Renderizado con GPU en EC2 (v4.0.248+)

Renderizado acelerado por hardware en instancias GPU de EC2. La opción más rápida para composiciones complejas con animaciones pesadas o contenido 3D.

Requiere una instancia de EC2 con GPU (por ejemplo, g4dn.xlarge) y los controladores adecuados.

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

Predeterminados de formato para redes sociales

Usa estos predeterminados de resolución y relación de aspecto al crear composiciones. Pasa --width y --height a npx remotion render para sobrescribir los valores predeterminados de la composición.

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

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

• Resolución: 1080x1920
• Relación de aspecto: 9:16
• FPS recomendado: 30
• Duración máxima: 60s (TikTok), 60s (Shorts), 90s (Reels)

YouTube Estándar (16:9 apaisado)

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

• Resolución: 1920x1080
• Relación de aspecto: 16:9
• FPS recomendado: 30 o 60

Publicación de Instagram (1:1 cuadrado)

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

• Resolución: 1080x1080
• Relación de aspecto: 1:1
• Duración máxima: 60s

Video de Twitter/X (16:9 apaisado)

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

• Resolución: 1280x720
• Relación de aspecto: 16:9
• Tamaño máximo de archivo: 512MB
• Duración máxima: 140s

Resumen de predeterminados de formato

Plataforma	Ancho	Alto	Relación	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

Al construir una composición en código, establece width, height y fps directamente:

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

Paquetes nuevos (v4.0.429+)

@remotion/sfx (v4.0.429)

Efectos de sonido integrados para señales de audio rápidas:

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

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

@remotion/starburst (v4.0.435)

Componente de forma y animación de ráfaga estelar:

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

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

@remotion/shapes (actualizado v4.0.432)

Primitivas de formas geométricas. Ahora incluye la forma Flecha:

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

Subtítulos animados para contenido de video. Compatible con temporización a nivel de palabra y múltiples estilos de animación:

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

<Caption
  text="Hola mundo"
  startFrame={0}
  endFrame={60}
  style="bounce"
/>

@remotion/player

Incrusta videos de Remotion en aplicaciones React sin renderizar a un archivo. Reproducción interactiva con controles:

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

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

Mediabunny (conversión de formato)

Mediabunny es el sucesor de @remotion/media-parser y @remotion/webcodecs. Conversión de formato acelerada por GPU integrada en Remotion.

Entradas compatibles: MP4, WebM, MOV, MKV, M3U8, TS, AVI, MP3, FLAC, WAV, M4A, AAC Salidas compatibles: MP4, WebM, WAV

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

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

Habilidades de Remotion (Ene 2026)

Integración con agentes de IA para flujos de trabajo de prompt a video. Claude Code puede generar composiciones de Remotion a partir de descripciones en lenguaje natural.

"Crea un video de TikTok de 15 segundos con texto animado que diga 'Nueva función'
 que aparezca con una animación de resorte, luego muestra tres viñetas"

El agente genera la composición TSX, la registra y la renderiza, todo desde un solo prompt.

Plantillas

Todas las plantillas se crean mediante el script create.sh. Cada una genera un proyecto completo de Remotion con TypeScript, TailwindCSS 4.2.0 y los componentes de la plantilla.

Chat Demo (maqueta de teléfono estilo Telegram)

Burbujas de chat animadas que aparecen en secuencia dentro de una maqueta de teléfono. Ideal para demostraciones de productos, showcases de bots, aspectos destacados de atención al cliente.

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

Edita src/messages.json para personalizar la conversación:

[
  {"text": "¿Cómo restablezco mi contraseña?", "isUser": true},
  {"text": "Ve a Configuración > Cuenta > Restablecer contraseña. Recibirás un correo en ~30 segundos.", "isUser": false},
  {"text": "Entendido, ¡gracias!", "isUser": true}
]

Renderiza en resolución TikTok:

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

Composición predeterminada: 1080x1920 (vertical), 30fps, duración calculada automáticamente según la cantidad de mensajes.

Tarjeta de Título (introducción animada)

Título con aparición gradual y animación de resorte. Úsalo para introducciones de video, encabezados de sección o tarjetas de anuncio independientes.

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

Personaliza editando defaultProps en src/TitleCard.tsx:

defaultProps={{ title: "Lanzamiento de Producto", subtitle: "Próximamente Marzo 2026" }}

Renderiza en resolución YouTube:

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

Composición predeterminada: 1920x1080 (apaisado), 30fps, 3 segundos.

Blank (plantilla inicial)

Lienzo vacío para construir composiciones personalizadas desde cero.

bash {baseDir}/scripts/create.sh mi-proyecto
cd mi-proyecto

Muestra un contador de fotogramas. Reemplaza src/Composition.tsx con tu propio componente.

Cómo construir plantillas personalizadas

Para agregar una nueva plantilla (por ejemplo, promocional, recorrido de código, panel de estadísticas, cuenta regresiva, testimonio), crea un componente React que use las primitivas de Remotion:

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

APIs clave de Remotion para plantillas:

• useCurrentFrame() - número de fotograma actual para la animación
• spring({ frame, fps, config }) - animación física con resorte
• interpolate(frame, inputRange, outputRange) - interpolación lineal
• <Sequence from={30}> - retrasa el contenido hijo N fotogramas
• <Img src={staticFile("logo.png")} /> - carga activos estáticos
• <Audio src={staticFile("music.mp3")} /> - agrega audio de fondo
• <AbsoluteFill> - contenedor de fotograma completo

Registra las composiciones en 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}
      />
    </>
  );
};

Generación de miniaturas

Extrae un solo fotograma como imagen fija usando el comando still de Remotion:

npx remotion still MiComp out/thumbnail.png

Opciones

# Fotograma específico (el predeterminado es el fotograma 0)
npx remotion still MiComp out/thumb.png --frame=45

# Salida JPEG
npx remotion still MiComp out/thumb.jpeg --image-format=jpeg

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

# Resolución personalizada
npx remo