Claude Code + Remotion: que la IA te haga todas las animaciones de tus vídeos

10 de septiembre de 202611 min de lectura

Las animaciones de mis vídeos no las hago yo. Le paso el guion a Claude Code y él decide qué tiene que salir en cada frase, lo programa con Remotion y me devuelve cada animación como un vídeo con el fondo transparente. Yo solo las arrastro a CapCut, encima de mi grabación.

Las animaciones de los vídeos en los que lo cuento están hechas así. Esta es la guía para que lo montes tú, con todo para copiar y pegar.

Si vienes del vídeo de los motion designers: el comando está en el paso 2, mi skill de estilo en el paso 4 y los tres prompts en el paso 6.

Qué es Remotion y por qué encaja tan bien con Claude

Remotion es una herramienta para hacer vídeos con código. En vez de mover fotogramas clave en una línea de tiempo, cada animación es un componente de React: "este texto entra en el frame 8, esta barra se llena entre el 20 y el 40". Luego Remotion lo renderiza a un vídeo de verdad.

Eso a una persona le cuesta. A Claude, no: escribir código es justo lo que mejor hace. Y como el resultado es código, si algo no te gusta se lo dices ("más lento", "el número más grande") y lo cambia al momento, sin rehacer nada a mano.

Lo que cuesta: Remotion es gratis para una persona sola y para equipos de hasta 3, también si vendes lo que haces con él. A partir de 4 personas necesitas su licencia de empresa. Lo explican en su página de licencia.

Lo que necesitas

Claude Code instalado y funcionando.
Node.js en su versión LTS. Compruébalo con node --version.
Un editor que lea vídeo con transparencia. CapCut de escritorio, Premiere, DaVinci Resolve o Final Cut lo leen sin problema.
FFmpeg, si vas a pasarle un vídeo de referencia (paso 6). Es gratis. Compruébalo con ffmpeg -version.

Paso 1 · Crea el proyecto de Remotion

Abre una terminal en la carpeta donde quieras guardarlo y lanza esto:

npx create-video@latest --yes --blank --no-tailwind mis-animaciones
cd mis-animaciones
npm i

Crea un proyecto en blanco llamado mis-animaciones. Hazlo en una carpeta que no sea un repositorio de Git: con --yes, el comando se niega a crearse dentro de uno.

Si prefieres que te lo pregunte todo, lanza solo npx create-video@latest y elige la plantilla en blanco.

Paso 2 · La skill oficial de Remotion

Remotion tiene sus propias skills para agentes como Claude Code: le enseñan cómo se escribe bien un proyecto de Remotion (animaciones, tiempos, tipografías, render). Desde dentro de la carpeta del proyecto:

npx skills add remotion-dev/skills

Con eso Claude ya sabe usar Remotion. Lo que todavía no sabe es qué animar, y eso es lo que resuelve el paso siguiente.

Paso 3 · La skill del método (la mía, para copiar)

La skill oficial le enseña a programar animaciones. Esta le enseña a decidir qué animación va en cada frase, que es donde está la diferencia entre un vídeo que se ve caro y uno que parece una presentación.

Crea el fichero .claude/skills/animaciones-para-reels/SKILL.md dentro del proyecto y pega esto:

---
name: animaciones-para-reels
description: Úsala cuando te pase un guion de vídeo corto (TikTok, Reels, Shorts) y te pida las animaciones. Convierte cada frase en un clip de Remotion listo para arrastrar a CapCut.
---

# Animaciones para reels

Convierte un guion en clips de vídeo con fondo transparente, uno por idea.

## Formato (no se negocia)

- 1080x1920, 30 fps.
- Cada clip entra con un barrido que arranca en el frame 0 y dura 8 frames,
  y sale con el barrido inverso en los últimos 7.
- html, body y #root con fondo transparente. Nada opaco detrás.
- Se renderiza en ProRes 4444 con canal alfa:
  npx remotion render ID out/ID.mov --codec=prores --prores-profile=4444 --image-format=png --pixel-format=yuva444p10le

## Antes de programar: el contrato de cada plano

Para cada frase del guion, escribe cuatro cosas:

- Frase: la línea del guion.
- Afirmación: qué sostiene, con tus palabras.
- Aporte: qué ve el espectador que NO oye.
- Forma: por qué esa forma visual y no un rótulo.

Si el Aporte dice lo mismo que la Frase, ese plano todavía no existe: el
espectador ya lo está oyendo. Poner en pantalla la frase que se narra no aporta.

## Reglas

- Convierte el adjetivo en cantidad y la comparación en escala compartida.
  "Muchísimo" no se ve; un hueco vacío sí. "Más potente" no se ve; dos cosas
  medidas con la misma regla sí.
- Mínimo 2,5 s por línea de texto, y medio segundo más por cada 10 caracteres.
  Todo clip acaba con 1,2 s quieto antes de salir.
- Una pieza nueva cada 2-3 segundos: que nada se quede parado más de 4.
- Nada de logos en los 3 primeros segundos del vídeo: parecen un anuncio.
- Dos tipos de clip: overlay (transparente, va encima del metraje) y plano
  entero (fondo opaco, sustituye al metraje). Di cuál es cada uno al entregar.

## Al terminar

- Comprueba que cada .mov tiene alfa de verdad:
  ffmpeg -v error -i out/ID.mov -vf "select=eq(n\,20),alphaextract" -frames:v 1 -y alfa.png
  Si falla, el clip no tiene transparencia y no sirve.
- Mira un fotograma de cada clip compuesto sobre gris antes de darlo por bueno.
- Entrega una tabla con cada clip: duración, tipo y la frase del guion que ilustra.

Paso 4 · Tu skill de estilo

Sin esto, cada animación sale con unos colores y una letra distintos, y el vídeo parece hecho a trozos. Una skill de estilo fija tres cosas: tus colores, tu tipografía y tu ritmo. Claude la lee antes de cada animación y todas parecen de la misma marca.

Lo más rápido es pedírsela a Claude:

Créame una skill en .claude/skills/estilo-de-marca/SKILL.md que fije el estilo
de todas mis animaciones. Antes de escribirla, pregúntame por mis colores (fondo,
texto y un solo color de acento), mis dos tipografías (titulares y texto) y el
ritmo que quiero (suave o enérgico). Añade al final una lista de comprobación
para repasar antes de renderizar.

Y esta es la mía, tal cual la uso. Cópiala en .claude/skills/estilo-de-marca/SKILL.md y cambia los valores por los tuyos:

---
name: estilo-de-marca
description: Úsala SIEMPRE que crees o retoques una animación de este proyecto. Fija los colores, la tipografía y el ritmo para que todas las animaciones parezcan de la misma marca.
---

# Estilo de marca

Regla madre: no se inventa una estética por vídeo. Cambia lo que se enseña,
nunca cómo se enseña.

## Colores

- Fondo: #0a0a0a en todo plano a pantalla completa.
- Paneles y ventanas: #111111, con borde de 2 px en rgba(255,255,255,.14).
- Texto: #ffffff el principal, #a3a3a3 el secundario, #6b6b6b las etiquetas.
- Acento: #ff2020, el ÚNICO. Va plano: líneas, barras, subrayados, tachados y
  la cifra clave. Nunca resplandor, nunca degradado, nunca de fondo.
- Los colores de otras marcas, solo dentro de su propia interfaz o su logo.
- Prohibido: paletas nuevas por vídeo, degradados de color y neón.

## Tipografía

- Titulares y cifras: Manrope 800, letter-spacing -0.02em, interlineado 1.
- Interfaz, código, rutas y etiquetas: IBM Plex Mono. Las etiquetas, en
  MAYÚSCULAS con letter-spacing 0.16em.
- Cero cursiva. Ninguna otra fuente, salvo la de una interfaz real replicada.
- Las fuentes se cargan con @remotion/google-fonts.
- En 1080x1920: titulares de 90 a 160 px y nada por debajo de 30 px. Una
  terminal o un editor se enseñan GRANDES (código de 40 px o más), nunca una
  ventana entera y diminuta.

## Ritmo

- Nada aparece: todo llega. De desenfocado a nítido, con una curva suave:
  cubic-bezier(0.16, 1, 0.3, 1), entre 0,5 y 0,8 s.
- Cero sacudidas, flashes, rebotes y golpes de escala.
- La cámara flota y empuja poco: un 6 % como mucho.
- Nada quieto más de 1,5 s: siempre hay algo que respira.
- Una idea por plano. Lo que ya se ha dicho se atenúa y deja paso a lo nuevo.
- Desde el primer fotograma ya hay algo grande y legible: nunca un arranque vacío.

## Antes de renderizar

1. ¿Algún color fuera del fondo, el texto y el acento?
2. ¿Solo las dos fuentes, sin cursiva y con todo legible en un móvil?
3. ¿Todo llega suave y nada se queda parado?
4. ¿Algún texto cortado por un borde o pisando a otro?
5. ¿Algún fotograma vacío al pasar de una cosa a otra?

Cierra Claude Code y vuelve a abrirlo dentro de la carpeta del proyecto, para que cargue las tres skills.

Paso 5 · Pégale tu guion

Abre claude en la carpeta del proyecto y pégale el guion entero con una línea delante:

usa la skill de Remotion, la de animaciones-para-reels y la de estilo-de-marca
para animar este guion:

[pega aquí tu guion]

Claude va a trocear el guion, escribir el contrato de cada plano y crear un componente por animación. Si quieres ver cómo van quedando antes de renderizar nada, lanza npm run dev: se abre el Remotion Studio en el navegador y las ves moverse.

Lo que no te guste, se lo dices con palabras normales: "el C3 va muy rápido, que dure un segundo más", "el número del C5 más grande". Lo cambia en el código y listo.

Paso 6 · Pídeselo como un director (los tres prompts)

Hice la prueba: la misma animación cinco veces, unas con Opus 5.5 y otras con Sonnet 5.5. Me quedé con una de Sonnet, que es el modelo barato. Lo que cambió el resultado no fue el modelo, fue cómo se lo pedí. Son tres cosas, y las tres se copian.

1. Dale un vídeo de referencia

Guarda en la carpeta del proyecto un vídeo cuya animación te guste, con el nombre referencia.mp4, y pégale esto:

En referencia.mp4 hay una animación que me gusta. Saca un fotograma cada medio
segundo con ffmpeg y míralos. Antes de programar nada, dime qué hace: cómo entra
y sale cada elemento, cuánto dura cada cosa, cuántas ideas hay en pantalla a la
vez y cómo usa el color y el tamaño de la letra. No copies el contenido: copia
la manera de moverse, con mi skill de estilo.

Con una referencia delante deja de inventarse el ritmo. Es la diferencia entre "hazme algo bonito" y "hazme algo como esto".

2. Descríbele la escena paso a paso

Un director no dice "haz una escena de acción": dice qué pasa en cada segundo. Con una animación, igual. Esta es la plantilla que uso para cada clip:

Clip C1 · pantalla completa · 5 segundos.
La voz dice: "[la frase del guion]"

Qué pasa, segundo a segundo:
- 0,0 s: ya hay algo grande en pantalla: [qué]. Nunca un arranque vacío.
- 0,6 s: cuando la voz dice "[palabra]", entra [qué], desenfocado y de abajo arriba.
- 1,4 s: [la cifra] crece hasta [valor] y un subrayado rojo la marca.
- 3,0 s: lo anterior se atenúa y llega [qué].
- 4,2 s: todo se queda quieto para que se lea, y sale.

Una sola idea por plano. Lo que se ve es exactamente lo que dice la voz en
ese momento.

Cuanto más concreto el segundo y la palabra, mejor cae cada movimiento con tu voz.

3. Que mire sus propios fotogramas y se corrija

Claude escribe el código, pero no ve el resultado si no se lo pides. Este es el prompt que más mejora una animación:

Antes de renderizar el vídeo, saca una imagen de los momentos clave de cada clip:

npx remotion still ID out/ID-f45.png --frame=45 --scale=0.5

Mira cada imagen y hazte una autocrítica: ¿se lee en un móvil?, ¿hay algún texto
cortado o pisando a otro?, ¿algún fotograma vacío?, ¿cae cada movimiento en su
palabra?, ¿cumple la skill de estilo? Corrige lo que falle y vuelve a mirar.
Dos vueltas como mínimo antes de darlo por bueno.

Cambia ID por el nombre del clip y 45 por el fotograma que quieras ver. La primera versión casi nunca es la buena: la que queda después de dos vueltas, sí.

Paso 7 · Renderiza con fondo transparente

Esta es la parte que más falla, así que merece su propio paso. Para que el vídeo salga con transparencia hacen falta estos cuatro ajustes a la vez:

npx remotion render ID out/ID.mov --codec=prores --prores-profile=4444 --image-format=png --pixel-format=yuva444p10le

Cambia ID por el nombre de cada animación (Claude te dice cuáles son). Si quitas cualquiera de los cuatro ajustes, el clip sale con fondo negro. Lo normal es pedirle a Claude que las renderice todas de una vez.

Paso 8 · A CapCut

Arrastra cada .mov a una pista por encima de tu vídeo, en el momento en que dices esa frase. Como el fondo es transparente, se ve tu grabación por detrás y la animación encima. No hay que quitar fondos ni convertir nada.

Si un clip es de "plano entero", va en la misma pista pero tapa tu grabación en ese tramo: es para las frases que no tienen nada que grabar.

Los fallos más comunes

"El clip sale con fondo negro en CapCut." Se renderizó sin alguno de los cuatro ajustes del paso 7, casi siempre porque salió en JPEG, que no tiene transparencia. Vuelve a renderizar con la línea completa.

"Claude no usa la skill." Comprueba que el fichero se llama exactamente SKILL.md y está en .claude/skills/animaciones-para-reels/, y reinicia Claude Code. En Windows el explorador esconde las extensiones y es fácil acabar con SKILL.md.txt.

"El texto va tan rápido que no se lee." Pídele que respete la regla de 2,5 segundos por línea. Si tienes que ralentizar un clip en el editor, el clip está mal hecho, no tu vista.

"Las animaciones son bonitas pero no dicen nada." Pídele que te enseñe el contrato de cada plano antes de programar. Si el "aporte" repite lo que dices en voz alta, ese plano sobra o hay que pensarlo otra vez.

"Quiero que suenen." Pídele que meta efectos de sonido sincronizados con cada movimiento. Los de kenney.nl son de dominio público y se pueden usar gratis, también en vídeos con los que ganas dinero.

En resumen

Un proyecto de Remotion, tres skills (la oficial, la del método y la de tu estilo), tu guion pegado con un buen brief y un comando de render. Claude programa las animaciones, Remotion las convierte en vídeos con fondo transparente, y tú las arrastras encima de tu grabación.

No sustituye a tener buen gusto: sigue siendo tu vídeo y tu guion. Pero te quita las horas de mover fotogramas clave.

Calcula tu presupuesto →