Cómo Generar Videos con Remotion y Claude Code

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

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);
  // Grid animation
  return (
    <AbsoluteFill style={{ opacity }}>
      {/* Grid line rendering */}
    </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}>
        {/* Subtitle fade-in */}
      </Sequence>
      {/* Fade-out */}
    </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

# Specify codec (default is h264 = MP4)
npx remotion render MyComposition out/video.webm --codec=vp9

# Adjust quality (CRF: lower = higher quality, larger file)
npx remotion render MyComposition out/video.mp4 --crf=18

# Render a specific frame range (useful for testing)
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.

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.