Cómo Generar Videos con Remotion y Claude Code

Remotion te permite crear videos usando componentes de React, y Claude Code puede generar el código a partir de prompts en lenguaje natural. Instala con npx create-video@latest, añade Agent Skills para mejores prácticas, describe tu video en un prompt, previsualiza en Remotion Studio y renderiza con npx remotion render.

"Hacer videos con código" suena intimidante, pero combinar Remotion con Claude Code te permite generar videos solo a partir de prompts en lenguaje natural — sin editor de línea de tiempo, sin keyframing manual.

Este artículo recorre todo el flujo de trabajo — configurar Remotion, instalar Agent Skills, generar un video con Claude Code y renderizar el resultado. Asumimos Remotion v4.0 (se requiere Node.js 16+, se recomienda 20 LTS).

Qué Es Remotion — Un Framework de React para Video Programático

Remotion es un framework para crear videos usando componentes de React. Es fundamentalmente diferente de los editores de línea de tiempo como Premiere Pro o DaVinci Resolve.

En la edición de video tradicional, organizas clips en una línea de tiempo y aplicas efectos a través de una interfaz gráfica. En Remotion, escribes código que describe lo que un componente de React renderiza para cada número de frame. En otras palabras, un video se convierte en una función del tiempo.

import { AbsoluteFill, useCurrentFrame } from "remotion";

export const MyVideo = () => {
  const frame = useCurrentFrame();
  const opacity = Math.min(1, frame / 30);

  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#0a0a0a",
      }}
    >
      <h1 style={{ fontSize: 80, opacity, color: "white" }}>Hello, Remotion!</h1>
    </AbsoluteFill>
  );
};

useCurrentFrame() devuelve el número de frame actual. El código anterior hace un fade-in del texto durante los primeros 30 frames (1 segundo a 30fps). Eso por sí solo ya es un video. Así se ve cuando se renderiza.

Las principales ventajas de Remotion incluyen:

• Reproducibilidad — El código produce el mismo resultado a partir de la misma entrada. Puedes gestionar todo con design tokens y variables
• Automatización — Inyecta dinámicamente datos desde APIs o bases de datos en los videos
• Integración con IA — Al estar basado en código, Remotion se combina naturalmente con agentes de IA. El equipo de Remotion recomienda oficialmente la integración con Claude Code

Configuración — Desde la Creación del Proyecto Hasta la Vista Previa en Studio

Asegúrate de tener Node.js 16+ instalado (se recomienda 20 LTS), luego crea un nuevo proyecto.

npx create-video@latest

Se te harán algunas preguntas durante la configuración. Elige lo siguiente:

• Template → Blank (para que Claude Code construya todo desde cero)
• TailwindCSS → Yes (facilita el estilizado)
• Agent Skills → Yes (necesario para la integración con agentes de IA)

Una vez generado el proyecto, instala las dependencias e inicia el Studio.

cd my-video
npm install
npm start

Tu navegador abre http://localhost:3000 mostrando Remotion Studio. El Studio te permite previsualizar composiciones, configurar Input Props y ejecutar renders.

En este punto, la plantilla Blank muestra un lienzo vacío. Ahora es momento de dejar que Claude Code construya el contenido real.

Instalación de Agent Skills

Agent Skills es una colección de archivos de reglas para agentes de IA proporcionada por el equipo de Remotion. Estas reglas ayudan a agentes de IA como Claude Code, Cursor y Codex a escribir código que siga las mejores prácticas de Remotion.

Si elegiste Yes durante create-video, los Skills ya están instalados. Para agregarlos después, ejecuta:

npx skills add remotion-dev/skills

Instalar Agent Skills coloca archivos de reglas (.md) en tu proyecto. Claude Code lee estos archivos y genera código que se ajusta a las convenciones de Remotion.

Aquí están las principales categorías de skills.

Generando un Video con Claude Code

Con Remotion Studio en ejecución, abre una terminal separada en el directorio del proyecto e inicia Claude Code.

claude

Ahora solo envía un prompt. Empieza con algo simple.

Create a 5-second video with a dark background.
White "Hello World" text at 80px fades in over 1 second in the center.

Claude Code edita los archivos fuente y registra una composición. Cuando los cambios se guardan, la vista previa de Remotion Studio se recarga instantáneamente.

Revisa la vista previa y envía instrucciones de seguimiento para refinar el video.

Change the text color to #00FF88.
After the fade-in, wait 0.5 seconds, then add a fade-out
where the text slides upward.

Consejos para los Prompts

Para obtener los mejores resultados de Claude Code con Remotion, ten en cuenta estos puntos.

• Usa números específicos — Di "80px" en lugar de "fuente grande", y "fade in en 1 segundo" en lugar de "fade lento"
• Declara las especificaciones del video primero — Declara resolución (1920x1080), FPS (30) y duración total (en segundos) al inicio
• Construye incrementalmente — Empieza con el layout básico, luego añade animaciones, luego ajusta colores y fuentes. Iterar produce resultados más precisos que intentar conseguir todo en un solo prompt
• Usa límites de Sequence — Instrucciones como "0-2 segundos es la intro, 3-5 segundos es el contenido principal" ayudan a Claude Code a generar código bien estructurado con componentes Sequence apropiados

Manos a la Obra — Construyendo una Intro de YouTube Tech

Construyamos algo más práctico: una animación de apertura de 5 segundos para un canal de YouTube de tecnología, creada completamente a través de conversación con Claude Code.

Empieza dándole a Claude Code la especificación completa.

Create a 1920x1080, 30fps, 5-second YouTube opening video.

Structure:
- 0-1s: A terminal-green (#00FF88) grid fades in against a dark background
- 1-3s: Channel name "Studio Mitsu" appears in the center with a typewriter effect
- 3-4s: Subtitle "Tech & Code" fades in below the channel name
- 4-5s: Everything fades out

Background: #0a0a0a, text color: #00FF88.
Use a monospace font (Fira Code).

Claude Code crea múltiples componentes y los conecta con Sequence para el control de la línea de tiempo. La estructura del código generado se ve aproximadamente así.

import { AbsoluteFill, Sequence, useCurrentFrame, useVideoConfig } from "remotion";

const Grid = () => {
  const frame = useCurrentFrame();
  const opacity = Math.min(1, frame / 30);
  // Animación del grid
  return (
    <AbsoluteFill style={{ opacity }}>
      {/* Renderizado de líneas del grid */}
    </AbsoluteFill>
  );
};

const TypewriterText = ({ text }: { text: string }) => {
  const frame = useCurrentFrame();
  const charsToShow = Math.floor(frame / 3);
  return (
    <span style={{ fontFamily: "Fira Code", color: "#00FF88", fontSize: 72 }}>
      {text.slice(0, charsToShow)}
      <span style={{ opacity: frame % 20 < 10 ? 1 : 0 }}>_</span>
    </span>
  );
};

export const Opener = () => {
  const { fps } = useVideoConfig();

  return (
    <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
      <Sequence durationInFrames={fps * 5}>
        <Grid />
      </Sequence>
      <Sequence from={fps * 1} durationInFrames={fps * 2}>
        <TypewriterText text="Studio Mitsu" />
      </Sequence>
      <Sequence from={fps * 3} durationInFrames={fps * 1}>
        {/* Fade-in del subtítulo */}
      </Sequence>
      {/* Fade-out general */}
    </AbsoluteFill>
  );
};

Aquí está el video generado a partir de este prompt.

El código real que genera Claude Code será más completo, pero el patrón central es el mismo. Sequence controla el tiempo mediante from y durationInFrames, mientras que useCurrentFrame() impulsa las animaciones a nivel de frame.

Revisa la vista previa del Studio y ajusta tamaños de fuente, curvas de easing y colores con prompts de seguimiento. Este ciclo rápido de "prompt → vista previa → ajustar" es donde la combinación de Remotion + Claude Code realmente brilla.

Renderizado y Exportación de Tu Video

Una vez que la vista previa se ve bien, expórtalo como archivo de video.

npx remotion render MyComposition out/video.mp4

Reemplaza MyComposition con el id que usaste al registrar la Composition. Si omites la ruta de salida, se guarda en la carpeta out/ con un nombre predeterminado.

Opciones Principales

# Especificar codec (por defecto h264 = MP4)
npx remotion render MyComposition out/video.webm --codec=vp9

# Ajustar calidad (CRF: menor = mayor calidad, archivo más grande)
npx remotion render MyComposition out/video.mp4 --crf=18

# Renderizar un rango específico de frames (útil para pruebas)
npx remotion render MyComposition out/test.mp4 --frames=0-90

El renderizado usa tu CPU local. Un video de 5 segundos típicamente termina en unos segundos a menos de un minuto.

Para videos más largos o renderizado por lotes, Remotion Lambda ejecuta renders en paralelo en AWS. Un video de 1 minuto cuesta aproximadamente $0.017, y un video HD de 10 minutos alrededor de $0.10. Sin embargo, para uso personal, el renderizado local es más que suficiente.

FAQ

¿Remotion es gratuito?

Sí, para individuos, organizaciones sin fines de lucro y equipos de 3 o menos. Las empresas con 4+ miembros necesitan una licencia Creators ($25/puesto/mes) o Automators ($0.01/render, mínimo $100/mes) según el caso de uso.

¿Necesito saber React para usar Remotion con Claude Code?

No necesariamente. Claude Code genera los componentes de React por ti a partir de prompts en lenguaje natural. Sin embargo, conocimientos básicos de React te ayudan a entender el código generado y hacer ajustes manuales cuando sea necesario.

¿Puede Remotion manejar animaciones complejas como After Effects?

Remotion puede producir motion graphics sofisticados — efectos de máquina de escribir, partículas, 3D con Three.js, animaciones de gráficos y más. No reemplazará After Effects para trabajo de VFX pesado, pero para intros de YouTube, visualizaciones de datos y contenido de redes sociales, es más que capaz.

¿Cómo se compara el precio de Remotion Lambda con el renderizado local?

Remotion Lambda cuesta aproximadamente $0.017 por video de 1 minuto en AWS. Para renderizado ocasional, el CPU local es gratis y suficientemente rápido (un video de 5 segundos se renderiza en segundos). Lambda tiene sentido cuando necesitas renderizar cientos de videos en paralelo.

¿Qué formatos de video soporta Remotion?

Remotion soporta H.264 (MP4), H.265 (MP4), VP8/VP9 (WebM), ProRes (MOV) y GIF. H.264 MP4 es el predeterminado y cubre la mayoría de casos de uso incluyendo YouTube y redes sociales.

¿Puedo usar Remotion con otras herramientas de IA además de Claude Code?

Sí. Agent Skills funcionan con cualquier agente de IA que lea archivos de reglas — incluyendo Cursor, GitHub Copilot y OpenAI Codex. Claude Code es oficialmente recomendado por el equipo de Remotion, pero los skills son agnósticos al agente.

¿Hay forma de previsualizar sin renderizar el video completo?

Sí. Remotion Studio (npm start) proporciona vista previa en tiempo real en localhost:3000. Puedes navegar frame a frame, reproducir a velocidad completa e inspeccionar composiciones individuales. El renderizado solo produce el archivo final — siempre debes previsualizar primero.

Conclusión

Este artículo cubrió el flujo de trabajo para generar videos con Remotion y Claude Code — sin escribir una sola línea de código a mano.

• Remotion — Un framework para video programático con React. Gratuito para equipos de 3 o menos (Creators $25/puesto/mes para equipos más grandes)
• Agent Skills — Archivos de reglas para agentes de IA. Instala con npx skills add remotion-dev/skills
• Claude Code — Genera y modifica código de Remotion a partir de prompts. Los cambios se reflejan instantáneamente en la vista previa del Studio
• Renderizado — Exporta a MP4, WebM y más con npx remotion render

El ciclo "prompt → vista previa → ajustar → renderizar" ofrece una velocidad que la edición de video tradicional no puede igualar. Es especialmente poderoso para videos con plantillas como intros, visualizaciones de datos y contenido corto para redes sociales.

Empieza ejecutando npx create-video@latest, luego dile a Claude Code que "haga un video animado de 5 segundos" y mira qué sucede.

Artículos relacionados:

• Motion para React: Guía de Animaciones
• React Server Components: Guía Completa
• Optimización de Re-renders en React: Guía Práctica