Creación de vídeos (Remotion) [Lectura opcional]

📚 Navegación de la serie: El artículo anterior 52 Glosario (Amigable para principiantes) recopiló los términos que han aparecido en todo el tutorial en una tabla «a la mano». Este artículo es la última parada de todo el tutorial y también una práctica avanzada [Lectura opcional]: dejar que Claude Code te ayude a crear vídeos con código. Se basa en Remotion (un framework para escribir vídeos con React): describes en lenguaje sencillo qué animación deseas, él escribe el código para «dibujar cada fotograma», y finalmente se renderiza en mp4. Al terminar de leerlo, sabrás exactamente cuáles son sus ventajas, a quién le es útil y para quién es una pérdida de tiempo.

📌 Sobre el enfoque de este artículo: La documentación oficial de Claude Code no tiene una página dedicada a Remotion; esto no es una función integrada de Claude Code, sino una forma de usarlo para «escribir código para otro framework». Por lo tanto, los hechos técnicos de este artículo se basan en el conocimiento general de Remotion + la práctica del tutorial, sin citar la documentación oficial de Claude Code (ya que no lo menciona en absoluto). Se clasifica como «Lectura opcional» porque realmente es un uso secundario: la mayoría de la gente no lo necesitará, pero quienes lo usen pensarán «vaya, esto también se puede hacer» (¡increíble!).

Amigos, primero les daré un dato para que se hagan una idea.

El proyecto de código abierto Remotion acumula más de cincuenta mil estrellas en GitHub. Que un framework para «escribir vídeos con React» tenga este nivel de atención demuestra una sola cosa: «escribir vídeos como si fueran código» no es un entretenimiento de nicho para geeks, sino que hay gente real que lo usa para trabajar.

Uno de los usos más populares es el siguiente: algunos productos generan vídeos personalizados de «resumen anual» para cada usuario (tu tiempo de reproducción, la canción que más escuchaste, tu clasificación); para decenas de miles de usuarios, son decenas de miles de vídeos con contenido diferente pero con la misma plantilla. ¿Harías que un editor use Pr o AE para recortarlos uno por uno? Cortaría hasta el fin de los tiempos. Pero si el vídeo es un bloque de código al que se le pueden pasar parámetros, es solo cuestión de un bucle: cambiar los datos y renderizar uno nuevo.

Hablando de «código al que se le pueden pasar parámetros», ¿te recuerda a alguien? Exacto, es la especialidad de Claude Code. Una vez que el vídeo se convierte en código React, no se diferencia en nada de cualquier otro código con el que hayas jugado en los cincuenta y dos capítulos anteriores: tú describes el requisito, él lo escribe, lo modifica y lo depura. Este artículo te guiará para comprender cómo funciona esta combinación y, lo más importante: ¿es adecuada para ti?

Al leer este artículo, obtendrás:

• Una explicación simple de qué es Remotion y cómo logra «crear vídeos con código».
• Por qué Remotion y Claude Code son la pareja perfecta: el vídeo se convierte en código, y escribir código es el trabajo de Claude.
• Un flujo de trabajo mínimo «desde un directorio vacío hasta un mp4», con los resultados esperados para cada paso para que puedas seguirlo.
• Explicaciones sencillas de tres conceptos clave (fotogramas, interpolación, elasticidad) para que entiendas qué hace el código que genera Claude.
• Una tabla comparativa de «quién debería usarlo / quién debería evitarlo» para ayudarte a decidir si vale la pena invertir tiempo en esto.

---

01 Conceptos básicos: Cómo logra Remotion «crear vídeos con código»

Para ir directo al grano: Remotion convierte «cada fotograma del vídeo» en una pantalla renderizada por React, y luego junta estas pantallas en orden para crear el vídeo. En lugar de arrastrar recursos en una línea de tiempo con el ratón, escribes código para describir «cómo se ve cada fotograma».

Esto puede parecer poco intuitivo: ¿acaso los vídeos no se graban y se editan? ¿Cómo se pueden «escribir»? La clave está en qué tipo de vídeos hace: no se trata de grabaciones de personas reales en exteriores, sino de animaciones de texto, gráficos de datos, introducciones de logotipos y demostraciones de código; es decir, vídeos cuya «pantalla se genera completamente mediante reglas». Este tipo de cosas no se «graba», sino que se «dibuja bajo reglas», lo cual es la especialidad del código.

Analogía: Los libros de animación de folioscopio (flip book) que jugábamos de niños. Dibujas un monigote en la esquina de cada hoja de un bloc de notas: en la primera hoja levanta el pie izquierdo, en la segunda el derecho, en la tercera salta... Cada hoja por separado es una imagen estática, pero al pasar las hojas rápidamente con el pulgar, el monigote parece correr. La esencia del vídeo es exactamente esa: un montón de imágenes estáticas que, al mostrarse lo suficientemente rápido, el ojo humano percibe como un movimiento continuo. Lo que hace Remotion es permitirte usar código para dibujar cada página de este folioscopio: escribes una función que le dice «en la página 0 el texto está fuera de la pantalla, en la página 30 se desliza al centro», y él se encarga de calcular, dibujar y unir cada página intermedia en un vídeo.

En escenarios reales, los siguientes tipos de vídeos se hacen muy fácilmente con Remotion:

• Vídeos de visualización de datos: una animación de un número que sube de 0 a un millón, o un gráfico de barras que crece con el tiempo; al estar controlados por datos y código, son extremadamente precisos.
• Vídeos personalizados en lote: como el «resumen anual» mencionado anteriormente; se introduce información diferente en la misma plantilla para renderizar miles de vídeos en bucle.
• Demostraciones técnicas / Introducciones de tutoriales: resaltado de código línea por línea, efecto de escritura en terminal, logotipo golpeando la pantalla; para un programador, crear sus propios vídeos de demostración con código es mucho más rápido que aprender AE.

Por ejemplo, si deseas crear una presentación de 15 segundos para una pequeña herramienta, pero no sabes usar After Effects, contratar a un editor externo para solo 15 segundos no parece valer la pena. En ese caso, usar Claude Code con Remotion te llevará poco más de una hora desde un directorio vacío hasta un mp4 reproducible (y la mayor parte del tiempo se gastará en ajustar detalles como «este texto vuela demasiado rápido» o «el fondo es muy feo»). Antes, ni siquiera habrías terminado de instalar el software.

Para que veas la posición de Remotion en la creación de vídeos de un vistazo, lo compararé con otras dos herramientas que probablemente conozcas:

Tipo de herramienta	Cómo hace el vídeo	Ventajas	Desventajas
Software de edición (CapCut / Pr / AE)	Arrastrar recursos con el ratón, fotogramas clave manuales	Grabaciones reales, creatividad libre, lo que ves es lo que obtienes	No se puede automatizar en lote, los cambios manuales son lentos, aprendizaje lento
Plantillas en línea (Generadores automáticos)	Rellenar contenido en plantillas existentes	Rápido, sin barreras de entrada	Plantilla rígida, no se pueden modificar los detalles, estilo genérico
Remotion	Escribir código para describir cada fotograma	Control preciso, automatizable en lote, integrable en git, reutilizable	No apto para grabaciones reales, requiere entorno de programación (pero Claude ayuda)

Al ver esta tabla, entiendes su nicho ecológico: no compite con CapCut para editar vídeos cotidianos, ni con las plantillas en línea para generar algo rápido; se enfoca en esa tarea difícil que «requiere precisión, automatización y reutilización». Y su única barrera de entrada, «saber escribir código», queda eliminada gracias a Claude Code.

💡 Resumen en una frase: Remotion divide el vídeo en fotogramas de pantallas de React individuales, y tú usas código para describir «cómo se ve cada fotograma» para que él los dibuje y los una; es ideal para vídeos basados en reglas como texto, datos y logotipos, sin competir con la edición de grabaciones reales ni con las plantillas rápidas, enfocándose en la «precisión + automatización + reutilización».

---

02 Por qué Remotion y Claude Code son la pareja perfecta

La última frase de la sección anterior ya lo deja claro: una vez que el vídeo se convierte en código, crear vídeos se convierte en escribir código, y escribir código es la especialidad de Claude Code. Esa es toda la razón de combinar ambos.

Permíteme detallarlo. Al crear vídeos animados de forma tradicional, ¿dónde está la barrera? En el software: debes saber usar After Effects o Pr, entender los fotogramas clave, las curvas de aceleración y las máscaras de capa. Aprender esto no es rápido, y muchos programadores se quedan atascados en «quiero hacer una animación pero me da pereza aprender AE».

Analogía: No sabes usar After Effects, pero contratas a un editor que sabe React a tu lado. No tienes que tocar ese software complejo; solo debes explicar tus necesidades al editor en lenguaje cotidiano: «Quiero que una línea de texto vuele desde la izquierda, se detenga un momento y luego brille en verde». El editor lo entiende y escribe el código correspondiente. Remotion proporciona la posibilidad de escribir vídeos con código, y Claude Code es el editor que te ayuda a traducir tus necesidades en código. Tú te encargas de la estética y las decisiones, y él de escribir el código.

Esta colaboración aprovecha a la perfección las mayores fortalezas de Claude Code:

Paso de la creación de vídeos	Método tradicional (manual)	Claude Code + Remotion
Iniciar el proyecto	Configurar React, instalar dependencias, estructurar carpetas	Una frase para que monte todo el andamiaje del proyecto
Escribir la animación	Ajustar fotogramas clave en AE	Describes el efecto y él escribe el código con interpolate o spring
Modificar un detalle	Buscar entre capas en el software	«La letra de la escena 2 es pequeña» → Localiza y cambia el código
Generar versiones en lote	Guardar como y rehacer uno por uno	Cambiar un parámetro y renderizar en bucle para crear miles de vídeos

La fila «Modificar un detalle» es donde más se disfruta esta combinación. Si ves en la vista previa que «esta tarjeta entra demasiado rápido», en AE tendrías que buscar el fotograma clave entre un montón de capas; aquí, simplemente escribes en la terminal «haz que la animación de entrada de la tarjeta en FeaturesScene sea más lenta», y Claude irá al archivo .tsx correspondiente para reducir el valor, y la vista previa se actualizará en tiempo real para que veas el resultado. Esta experiencia de «modificar el vídeo con lenguaje natural» es uno de los puntos más adictivos de esta combinación.

Cabe mencionar un requisito importante para no generar malentendidos: el núcleo de esta combinación es que Claude Code escribe código React, no que Claude Code «sepa hacer vídeos» por sí mismo. Por lo tanto, todo lo aprendido en el tutorial anterior se aplica aquí:

• Cuanto más específicas sean tus necesidades, más preciso será el resultado (ver capítulo 15 «Cómo preguntar»): decir «6 segundos, 1920×1080, 30fps, fondo negro y letras doradas» es cien veces mejor que «haz una introducción genial».
• Usa /init o un archivo CLAUDE.md para fijar las convenciones del proyecto (ver capítulos 12 y 18) para que las modificaciones de código sean más estables.
• Incluso puedes crear una Skill específica para enseñarle las reglas de escritura de Remotion (ver capítulo 26) para mejorar notablemente la calidad del código generado.

En otras palabras: no tienes que aprender Remotion desde cero; tu destreza para dirigir a Claude Code al escribir código, practicada en los capítulos anteriores, se reutiliza directamente aquí.

💡 Resumen en una frase: Remotion convierte el vídeo en código React, y escribir código React es la especialidad de Claude Code; tú te encargas de describir las necesidades en lenguaje natural y tomar decisiones estéticas, y él se encarga de montar el proyecto, escribir la animación y modificar según tus comentarios.

---

03 Tres conceptos clave: Entender qué hace el código que genera Claude

Aunque no sepas programar y puedas crear vídeos simplemente guiando a Claude, dedicar tres minutos a comprender estos tres términos hará que el código generado deje de parecerte chino y te dará más confianza para hacer modificaciones. Estos tres conceptos son los cimientos de Remotion: fotogramas, interpolación y elasticidad.

Fotograma (frame): El vídeo se calcula por fotogramas

Volviendo a la analogía del folioscopio: la unidad mínima del vídeo es el «fotograma» (frame), es decir, una «página» del bloc. Remotion utiliza una función central useCurrentFrame() que te indica «en qué fotograma se está dibujando actualmente». Toda tu animación se resume a responder a la pregunta: «en el fotograma frame, cómo debe verse la pantalla».

La relación entre los fotogramas y el tiempo se calcula con una fórmula muy sencilla que debes recordar para entender la duración:

Fotogramas totales = Segundos × Fotogramas por segundo (fps). Por ejemplo, un vídeo de 6 segundos a 30fps consta de 6 × 30 = 180 fotogramas.

Así, si ves en el código durationInFrames={180} junto con fps={30}, sabrás de inmediato: este es un vídeo de 6 segundos. (fps significa frames per second; 30fps es fluido, 60fps es aún más suave pero genera archivos más grandes).

Interpolación (interpolate): Calcular la transición suave de A a B

interpolate() es la función más utilizada y se explica de forma sencilla: dados dos momentos de tiempo y dos valores, calcula el valor de transición intermedio para cada fotograma.

Veamos el ejemplo más directo: quieres que una línea de texto pase de «completamente invisible» (transparencia 0) a «completamente visible» (transparencia 1) en los primeros 30 fotogramas:

import { interpolate, useCurrentFrame } from "remotion";

const frame = useCurrentFrame();
// En el fotograma 0, la opacidad es 0; en el fotograma 30, la opacidad es 1; transición suave intermedia
const opacity = interpolate(frame, [0, 30], [0, 1]);

Traduciendo el código interpolate(frame, [0, 30], [0, 1]) al lenguaje cotidiano: «a medida que frame avanza de 0 a 30, cambia el valor suavemente de 0 a 1». Claude se basa en esto para escribir desvanecimientos, desplazamientos, escalas y rotaciones. Al ver interpolate, sabrás: aquí hay algo que está «pasando suavemente de un estado a otro».

Elasticidad (spring): Hacer que la animación sea elástica y no rígida

spring() es la función que añade elasticidad física a las animaciones. La interpolación lineal (interpolate) produce movimientos a velocidad constante que pueden parecer mecánicos; spring simula un muelle que se pasa del límite y luego regresa a su posición, lo cual se ve mucho más natural.

Como se suele decir: una animación elástica hecha con spring() se ve 10 veces más natural que una animación lineal. Retomando el ejemplo de la presentación de antes, al principio el logotipo aparecía de golpe en el centro, lo cual quedaba bastante feo; después, al pedirle a Claude que «usara un efecto elástico para la entrada del logotipo», cambió interpolate por spring y el logotipo adquirió un rebote muy profesional al estabilizarse. Si quieres que tus animaciones parezcan profesionales, pide directamente a Claude «usa una transición elástica»; es un consejo muy útil.

No necesitas saber escribir estos conceptos, solo reconocerlos. La siguiente tabla te ayudará a asociarlos: al ver cada término en el código, sabrás qué está haciendo Claude.

Término en el código	Qué está haciendo	Cómo pedírselo a Claude
useCurrentFrame()	Obtener el fotograma actual	(Normalmente no debes preocuparte, lo gestiona él solo)
durationInFrames / fps	Definir la duración y fluidez	«Haz un vídeo de 6 segundos a 30fps»
interpolate(...)	Transición suave de A a B	«Haz un desvanecimiento / entrada deslizante / zoom»
spring(...)	Transición con rebote	«Usa un efecto elástico, que rebote un poco»

Uniendo estos tres conceptos en una sola estructura, tendrás una idea muy clara. El siguiente fragmento es un componente mínimo que podría generar Claude: una línea con el texto HELLO que se desvanece al entrar mientras aumenta de tamaño elásticamente. No necesitas saber escribirlo, solo lee los comentarios de la derecha:

import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";

export const Hello = () => {
  const frame = useCurrentFrame();        // Qué fotograma se está dibujando
  const { fps } = useVideoConfig();        // Obtener los fotogramas por segundo (fps)

  // Desvanecer de invisible a visible en los primeros 30 fotogramas
  const opacity = interpolate(frame, [0, 30], [0, 1]);
  // Calcular la escala de forma elástica, de pequeño a tamaño normal
  const scale = spring({ frame, fps, config: { damping: 12 } });

  return (
    <div style={{ opacity, transform: `scale(${scale})` }}>HELLO</div>
  );
};

Entenderlo es muy sencillo: useCurrentFrame() obtiene el «número de fotograma» → interpolate cambia la opacidad de 0 a 1 (desvanecimiento) → spring aplica elasticidad a la escala (rebote) → finalmente se aplican estos valores al estilo del texto. Todo el fragmento responde a una única pregunta: «cómo debe verse la palabra HELLO en el fotograma frame». Por muy complejo que sea el código de Claude, su esqueleto siempre seguirá este patrón.

💡 Resumen en una frase: Tres términos bastan para entender el código: fotograma es la «página» del vídeo (fotogramas totales = segundos × fps), interpolate calcula la transición de A a B, y spring da elasticidad natural al movimiento; juntos describen «cómo se ve la pantalla en cada fotograma».

---

04 Flujo de trabajo mínimo: Desde un directorio vacío hasta un mp4

Tener una vista general de todo el proceso evitará que te pierdas. Son cinco pasos esenciales, en los que darás instrucciones a Claude o ejecutarás un comando para ver el resultado.

Primero representaré todo el flujo en un diagrama antes de detallarlo.

Este diagrama muestra que: tras preparar el entorno, describes tus necesidades a Claude → él genera el código → tú previsualizas → si no te convence, le pides modificaciones en lenguaje natural, y si te gusta, renderizas a mp4; es normal dar varias vueltas en el ciclo de «previsualizar-modificar-volver a previsualizar».

A continuación explicamos detalladamente cada paso, con los comandos y los resultados esperados.

Paso 1: Preparar el entorno

Remotion se basa en Node.js, por lo que tu máquina debe tener Node.js 18 o superior, además de Claude Code instalado (ver capítulo 02 para la instalación de Claude Code). Para verificar la versión de Node:

node --version

Resultado esperado: Se imprime un número de versión como v20.11.0. Basta con que el primer número sea ≥ 18. Si es menor de 18, Remotion Studio fallará al arrancar; este es el primer error común de los principiantes (se puede actualizar usando herramientas como nvm).

⚠️ Nota: Al renderizar vídeos, Remotion utiliza un navegador sin interfaz gráfica en segundo plano (headless Chromium, que toma «capturas de pantalla» de cada fotograma). La primera vez que renderices, es posible que deba descargar este componente; si la conexión se bloquea en este punto, intenta usar una conexión a internet alternativa.

Paso 2: Crear un directorio vacío, iniciar Claude Code y describir las necesidades

mkdir hello-video && cd hello-video
claude

Una vez dentro de la interfaz interactiva de claude, describe tus necesidades claramente de una sola vez. Cuanto más detallado seas, más probable será que funcione a la primera. Ejemplo de prompt de requisitos mínimos:

Ayúdame a crear un proyecto con Remotion para hacer un vídeo de introducción de 6 segundos.
Requisitos: 1920x1080, 30fps, fondo negro puro;
En el centro de la pantalla debe mostrarse "HELLO" con letras grandes blancas, apareciendo con un desvanecimiento y un ligero zoom,
y finalmente las letras deben tener un resplandor verde (#67c23a).
Usa un solo Composition, sin dividir en múltiples escenas.

Observa que en este prompt he especificado detalladamente la duración, resolución, fps, colores y tipo de animación: esto es lo que el capítulo 15 enfatiza como «instrucciones específicas». «6 segundos, 1920×1080, 30fps, fondo negro y letras blancas, desvanecimiento y zoom, resplandor verde» es mucho mejor que pedir «un vídeo genial».

No necesitas inventarlo todo desde cero; recuerda esta lista de cinco elementos para estructurar un buen prompt:

Elemento	Qué debes especificar	Ejemplo
Duración	Cuántos segundos	«6 segundos»
Dimensiones + fps	Resolución de destino, fluidez	«1920×1080, 30fps»
Fondo	No digas solo «bonito», sé específico	«Negro puro», «de gris oscuro a azul marino»
Contenido principal	Qué texto, número o imagen mostrar	«Texto HELLO grande en blanco en el centro»
Tipo de animación	Entrada, salida, si rebota	«Desvanecimiento y ligero zoom con rebote elástico»

Para las dimensiones, mencionar directamente la plataforma de destino es más fácil que dar números: formato vertical para TikTok (1080×1920), horizontal para YouTube (1920×1080) o cuadrado para Instagram (1:1); tú dices la plataforma y él calcula las dimensiones. Rellena los requisitos siguiendo estas cinco líneas y la probabilidad de acierto aumentará notablemente.

Paso 3: Creación del proyecto + Escritura del código

A continuación, Claude Code trabajará de forma autónoma: inicializará el package.json, instalará las dependencias de Remotion, estructurará la carpeta src/, escribirá el componente Composition y programará la lógica de la animación usando interpolate/spring. Él se encarga de todo el andamiaje; tú solo verás cómo va creando los archivos. Al terminar, te indicará los comandos para instalar dependencias e iniciar la vista previa; síguelos.

Paso 4: Vista previa (este paso es el más importante)

npm install
npx remotion studio

Resultado esperado: La terminal imprimirá algo como Remotion Studio running at http://localhost:3000 y abrirá automáticamente el navegador. Verás una interfaz de vista previa con una línea de tiempo en la que podrás reproducir y arrastrar para ver el resultado fotograma a fotograma.

Este paso es el corazón del flujo. Aquí es donde verás si el vídeo queda bien. Arrastra la línea de tiempo y, si notas que «las letras se mueven demasiado rápido» o «el brillo verde es excesivo», anótalo para que Claude lo corrija en el siguiente paso.

Paso 5: Modificar si no te gusta, renderizar si te convence

Si detectas algún problema, no intentes cambiar el código tú mismo; vuelve a la terminal de Claude Code y pídelo en lenguaje cotidiano:

El desvanecimiento de "HELLO" es muy rápido; alarga el tiempo de desvanecimiento a 1 segundo y haz el brillo verde más tenue.

Él localizará el código correspondiente y lo modificará, y Remotion Studio se actualizará automáticamente; vuelve al navegador para ver el nuevo efecto de inmediato. Gira en este ciclo de «decir-cambiar-ver» hasta que estés satisfecho.

Una vez que te guste, renderiza a mp4:

npx remotion render HelloVideo out/hello.mp4

Aquí, HelloVideo es tu Composition ID (debe coincidir con el ID registrado en el código; Claude te dirá cómo se llama) y out/hello.mp4 es la ruta de salida. Resultado esperado: La terminal mostrará una barra de progreso y, al terminar, imprimirá algo como Rendered ... → out/hello.mp4. Ve a la carpeta out/ y tu archivo mp4 estará listo allí.

Dos pequeños puntos donde los principiantes suelen atascarse explicados con sencillez:

¿No sabes cómo se llama el Composition ID? No lo adivines: pregunta directamente a Claude «¿cuál es el Composition ID de este vídeo?» y te lo dirá; o abre la interfaz de vista previa de remotion studio y en la columna izquierda verás listados los nombres de todos los Composition para que los copies. Si el ID es incorrecto, la renderización fallará diciendo que no se encuentra; compruébalo en esos dos lugares.

¿Por qué no se puede omitir la vista previa y renderizar directamente? Porque renderizar es una tarea pesada que puede tardar varios minutos, mientras que la vista previa es instantánea y permite arrastrar fotograma a fotograma. La forma correcta de trabajar es: ajustar en la vista previa hasta que te guste, y renderizar solo una vez al final. Al principio, muchos intentan renderizar con cada pequeño cambio para ver el resultado, perdiendo mucho tiempo esperando barras de progreso: recuerda «vista previa para ajustar, renderizar para exportar» y ahorrarás mucho tiempo.

💡 Resumen en una frase: Cinco pasos: entorno (Node 18+) → describir necesidades → generación automática de código → vista previa en remotion studio → pedir modificaciones / renderizar el mp4 final con remotion render; el ciclo de ajustar en la vista previa y pedir cambios puede repetirse varias veces, lo cual es normal. Ajusta siempre en la vista previa y renderiza solo al final.

---

05 Práctica: Ejecutar un ejemplo mínimo y verificarlo

No basta con leer el flujo, esta sección te ofrece una práctica real paso a paso con los resultados esperados. No necesitas tener instalado ningún entorno de vídeo previo, solo Node.js 18+ y Claude Code.

⚠️ Recordatorio: Este ejemplo hará que Claude Code se conecte a internet para instalar dependencias, crear archivos y renderizar, lo cual es una tarea más «pesada» que las consultas habituales. Instalar dependencias y descargar componentes de renderización en la primera ejecución puede tardar unos minutos.

Paso 1: Confirmar la versión de Node (si no es suficiente, no funcionará)

node --version

Resultado esperado: Imprime v18.x.x o superior (por ejemplo, v20.11.0). Si el primer número es ≥ 18, puedes continuar. De lo contrario, actualiza Node antes de seguir.

Paso 2: Crear un directorio vacío e iniciar Claude Code

mkdir hello-video && cd hello-video
claude

Resultado esperado: Entras en la interfaz interactiva de Claude Code, con el cursor esperando tus instrucciones en el cuadro de entrada.

Paso 3: Copiar y enviar el prompt de requisitos mínimos de la sección 04

Usa el prompt de «6 segundos, 1920×1080, 30fps, fondo negro, letras blancas HELLO, desvanecimiento y zoom, resplandor verde».

Resultado esperado: Claude Code comenzará a crear archivos y escribir código; verás cómo crea package.json, src/Root.tsx (o src/index.ts) y el componente de animación. Durante el proceso, es posible que te pida autorización para «crear archivos» o «ejecutar npm install» (los mecanismos de permisos del capítulo 20); autorízalo para que continúe. Al terminar, te indicará los siguientes comandos.

Paso 4: Instalar dependencias e iniciar la vista previa

npm install
npx remotion studio

Resultado esperado: npm install descarga las dependencias (tardará un poco la primera vez). remotion studio imprime Remotion Studio running at http://localhost:3000 y abre el navegador automáticamente, donde podrás ver la vista previa de las letras HELLO desvaneciéndose sobre fondo negro con resplandor verde, pudiendo arrastrar la línea de tiempo. Ver esta vista previa interactiva = tu flujo funciona correctamente.

Paso 5: Pedir una modificación en una frase para comprobar el cambio con lenguaje natural

Vuelve a la terminal de Claude Code y escribe:

Haz que el desvanecimiento de HELLO sea más largo, que entre más despacio.

Resultado esperado: Claude localizará el código de interpolate correspondiente y ampliará el rango de fotogramas de la transición (por ejemplo, cambiando [0, 15] por [0, 45]). Remotion Studio se actualizará automáticamente; vuelve al navegador y verás que HELLO ahora entra de forma notablemente más lenta. Ver este cambio = has captado la esencia de este flujo: hacer vídeos sin tocar software de edición, solo con tus palabras.

Paso 6: Renderizar a mp4

npx remotion render HelloVideo out/hello.mp4

(Sustituye HelloVideo por el Composition ID real que te indique Claude). Resultado esperado: Se muestra una barra de progreso y, al terminar, imprime Rendered ... → out/hello.mp4. Abre out/hello.mp4 y tendrás un archivo de vídeo real que puedes abrir con cualquier reproductor.

Al completar estos seis pasos, habrás realizado de principio a fin el flujo de confirmar entorno → describir necesidades → generar código → previsualizar → modificar mediante lenguaje natural → renderizar vídeo final. Para hacer vídeos más complejos en el futuro, solo tendrás que describir los requisitos con más detalle y hacer más rondas de modificaciones; el flujo básico es el mismo.

💡 Resumen en una frase: Seis pasos de práctica: verificar Node ≥18 → claude en directorio vacío → enviar prompt de requisitos → generar código → vista previa → pedir modificaciones para ver el cambio instantáneo → renderizar a mp4; realizarlo una vez enseña más que mirar diez diagramas de flujo.

---

06 Quién debería usarlo y quién debería evitarlo: Decidir antes de empezar

Esta sección es la más honesta y refleja la postura que debe tener una lectura opcional: esto no es para todo el mundo, y te diré directamente en qué casos es una gran herramienta y en cuáles es una pérdida de tiempo.

Para resumir: Remotion + Claude Code es ideal para vídeos «estructurados, parametrizados, automatizables en lote y basados en datos»; no es adecuado para vídeos «creativos de una sola vez, grabaciones reales o edición pesada». Si tienes dudas, consulta la siguiente tabla.

Escenario	¿Es adecuado?	Por qué
Generar resúmenes personalizados en lote para miles de usuarios	✅ Muy adecuado	Insertar diferentes datos en la misma plantilla en bucle es la especialidad del código
Vídeos de visualización de datos como números crecientes o gráficos en movimiento	✅ Muy adecuado	Control de datos ultrapreciso mediante código, mucho más exacto que los fotogramas clave manuales
Demostraciones técnicas o introducciones para programadores	✅ Adecuado	Fácil de implementar resaltado de código, escritura en terminal y logotipos, ahorrando tener que aprender AE
Animaciones que requieran precisión milimétrica y control de versiones	✅ Adecuado	Al ser código, el vídeo se puede integrar en git, ver diferencias (diff) y hacer revisiones de código
Vídeos personales (vlogs de viajes, bodas) recortando grabaciones reales	❌ Evitar	Es una tarea de edición tradicional; usa CapCut o Pr, Remotion no ayuda en esto
Vídeos musicales creativos de una sola vez basados en la inspiración	❌ Evitar	Al no haber una «plantilla reutilizable», escribir el código cuesta mucho más que editar directamente
No quieres usar la línea de comandos ni instalar entornos	⚠️ Evitar	Aunque Claude ayude, no te librarás de instalar Node y ejecutar comandos en la terminal

El criterio de decisión se reduce a una pregunta: ¿este vídeo es una «obra de arte única» o una «plantilla que reutilizarás con diferentes datos»? Para lo primero, usa software de edición tradicional; para lo segundo, Remotion entra en juego. La razón por la que la presentación anterior vale la pena es que en el futuro harás una segunda y una tercera presentación: con este código listo, solo tendrás que cambiar el texto y el color para tener un vídeo nuevo, ahí reside su valor. Si solo vas a hacer este vídeo una vez en la vida y no lo volverás a tocar, aprender a usar CapCut durante diez minutos será más rápido.

Además, hay un coste oculto que debes considerar: la renderización consume recursos del procesador y tiempo. Es normal que un vídeo de 60 segundos con efectos tarde dos o tres minutos en renderizarse en un portátil común; cuanto más largo y complejo, más tardará y los ventiladores sonarán con fuerza. Por suerte, hay un truco sencillo: si la renderización es lenta, pide a Claude que añada el parámetro --concurrency para activar la renderización multihilo, lo que multiplicará la velocidad.

Dos consejos sobre errores comunes para ahorrarte desvíos:

Primero, no le pidas vídeos extremadamente complejos de golpe. Si al principio intentas exigirle «cinco escenas con transiciones diferentes y sincronización musical», el código generado se convertirá en un caos difícil de modificar. La estrategia segura es: pedirle que haga la versión más sencilla posible y luego ir agregando escenas una a una. Esto sigue la misma lógica de «dividir tareas complejas» explicada en el capítulo 16, algo especialmente crítico al hacer vídeos.

Segundo, no te asustes si las animaciones con spring a veces se congelan en el primer fotograma. Es un pequeño fallo conocido que ocurre cuando el retraso de la animación no se calcula bien y pasa un valor negativo de fotograma a spring. No necesitas entender la causa técnica, simplemente describe el síntoma a Claude: «esta animación se queda fija en el primer fotograma y no se mueve», y él sabrá cómo corregirlo de inmediato (añadiendo una protección para evitar valores negativos de fotogramas). Esta es la ventaja de la colaboración: tú no tienes que solucionar los problemas, solo describirlos claramente.

💡 Resumen en una frase: Criterio clave: «obra de arte única» → software de edición; «plantilla reutilizable» → Remotion. Es excelente para datos, automatización en lote y demostraciones técnicas, pero no sirve para grabaciones reales ni ideas únicas. Además, la renderización consume recursos; para vídeos largos, pide a Claude que active --concurrency en paralelo.

---

07 Resumen

Este capítulo te ha mostrado un uso avanzado de Claude Code: dejar que use Remotion para ayudarte a «crear vídeos con código».

Repasemos los puntos clave:

Aspecto que querías aclarar	Respuesta	Detalle clave
Qué es Remotion	Un framework para escribir vídeos con React	El vídeo = fotogramas de pantallas de React, como un folioscopio
Por qué usarlo con Claude Code	El vídeo es código, y escribir código es su especialidad	Tú aportas la descripción y estética, él monta el proyecto y escribe la lógica
Qué conceptos entender	Fotogramas, interpolate, spring	Basta con reconocerlos; fotogramas totales = segundos × fps
Cómo trabajar	Describir → generar → previsualizar → modificar → renderizar	El ciclo de ajustar y volver a ver en la vista previa es el núcleo del proceso
Para quién es adecuado	Vídeos estructurados, en lote o basados en datos	Evitar para grabaciones reales o ideas creativas únicas

Ahora deberías ser capaz de: explicar en una frase cómo Remotion crea vídeos con código (pantallas de React fotograma a fotograma como un folioscopio), entender por qué encaja tan bien con Claude Code (el vídeo se vuelve código, que es el trabajo de Claude), saber qué hacen los fotogramas, interpolate y spring en el código generado, realizar la práctica paso a paso para exportar un mp4 real desde un directorio vacío y, lo más importante, evaluar si vale la pena invertir tu tiempo en esto. Eso es suficiente: el objetivo de una lectura opcional no es que domines la herramienta, sino que conozcas que existe este camino y sepas dónde buscar cuando lo necesites.

Con esto termina este capítulo. Y al terminar este capítulo, todo el manual de 《Zero to Agent》 llega a su fin. Las siguientes líneas son una despedida para ti que has recorrido este camino.

---

08 Conclusión: Cincuenta y tres capítulos que hemos recorrido juntos

Amigos, para todos los que han llegado al final de este artículo, solo puedo decir: increíble.

Miremos hacia atrás en este camino:

El primer bloque comenzó con «qué es Claude Code», configurando el entorno, enlazando la cuenta y ejecutando el primer ejemplo para que pases de haber oído hablar de ello a tenerlo en tus manos.

El segundo bloque te enseñó a integrarlo en VS Code, JetBrains, escritorio y navegador, y te guio para empezar a usarlo seriamente en tus proyectos (inicialización, comprensión de la estructura del proyecto).

El tercer bloque cubrió las destrezas fundamentales de la interacción: cómo preguntar, cómo adjuntar imágenes, cómo escribir el CLAUDE.md, cómo gestionar el contexto y cómo configurar las reglas de permisos y seguridad. Con estas bases dominadas, ya sabes realmente «cómo usar» Claude Code.

El cuarto bloque te entregó cinco herramientas (MCP, Subagent, Plugin, memoria y Skill), además de Agent teams, enseñándote cuándo recurrir a cada una de ellas.

Los bloques quinto y sexto profundizaron en la configuración del sistema y la práctica: ajustes, estilos de salida, Hooks, CLI, puntos de restauración, Chrome, ejecución en paralelo, Git, GitHub Actions, SDK de Agentes... llevándote de «saber usarlo» a «dominarlo con maestría y automatización».

El séptimo bloque sirvió de cierre: mejores prácticas, antipatrones, FAQ, glosario de términos y esta lectura opcional sobre Remotion.

Cincuenta y tres capítulos, desde una herramienta de línea de comandos hasta un conjunto completo de capacidades agénticas integradas en tu flujo de trabajo.

Hablando con franqueza: este tutorial nunca pretendió que te limitaras a «memorizar comandos». Los comandos cambian, las versiones se actualizan y surgen nuevas funciones continuamente (mira lo rápido que avanza su registro de cambios oficial). Lo que realmente queríamos dejarte es la mentalidad sobre «cómo colaborar con la IA»: tratarla como un compañero a tu lado y no como un buscador de información, ser específico con los requisitos, confirmar cuando sea necesario, automatizar lo repetitivo y mantener el control sobre la seguridad. Esta mentalidad sobrevivirá a cualquier comando específico.

Por último, no veas estos cincuenta y tres capítulos como un punto final, sino como el punto de partida. Las herramientas son estáticas, pero tu verdadera destreza se desarrollará a medida que las uses para resolver problemas reales en tu día a día. Inicia ese pequeño proyecto que siempre quisiste hacer pero para el que nunca tuviste tiempo, deja que Claude Code te acompañe desde el principio hasta el lanzamiento: en ese momento aprenderás mucho más que leyendo estos cincuenta y tres capítulos.

La mejor forma de practicar esta habilidad siempre será: cerrar el tutorial, abrir la terminal, escribir claude y ponerte a trabajar en lo tuyo.

Nos vemos en el camino.

---

Lecturas recomendadas

• Agent Skills: Equipar a Claude con habilidades especializadas bajo demanda
• Práctica de inicio: Tomar un requisito real de principio a fin
• Glosario (Amigable para principiantes): Traduciendo la jerga técnica al lenguaje cotidiano