Cómo hacer una animación con cada fotograma dibujado en JavaScript (al estilo de Claude Opus 5.5)

La semana en que salió Claude Opus 5.5, hubo un tipo de clip que no paraba de compartirse: cortos animados con un texto como el de Kevin Ngo, "Claude Opus 5.5 drew every frame of this animation in JavaScript" ("Claude Opus 5.5 dibujó cada fotograma de esta animación en JavaScript"). Sin archivos de imagen, sin material de stock, sin modelo de video. Hay un programa que dibuja cada fotograma en un canvas, y la música la sintetiza esa misma página. Esta guía explica cómo se hacen esas películas y te da dos formas de hacer la tuya: en Claude Code con una skill de código abierto, o en el modo Animation de iArt, sin tocar una terminal. Cada película de esta página salió del prompt exacto que se muestra.

"What actually happens in the 2 seconds after you tap your card at a checkout? 25-30s explainer for our fintech blog." Ese es el prompt completo (mostramos los prompts en su inglés original; la app acepta prompts en cualquier idioma). Cada forma, cada etiqueta y el reloj que marca el "tiempo real desde que acercas la tarjeta" están dibujados con código. Activa el sonido para oír la banda sonora, que también se sintetiza con código. El único fallo que encontré revisando fotograma a fotograma es un fragmento rojo suelto en el borde superior durante un movimiento de cámara, hacia el segundo 10.

Qué significa de verdad "cada fotograma dibujado en JavaScript"

Una animación en JavaScript de este tipo es una sola función, draw(ctx, t), que pinta la imagen completa del instante t sobre un canvas de HTML. No guarda estado entre fotogramas ni carga imágenes. Como cada fotograma depende solo del tiempo, un navegador headless puede saltar al fotograma 1, 2, 3… y capturar cada uno en un MP4 con precisión de fotograma, por mucho que tarde en dibujarse cada uno.

Tres detalles hacen que estas películas parezcan hechas a mano y no un protector de pantalla:

• Aleatoriedad con semilla. Las líneas tiemblan y los rellenos parecen entintados porque el código de dibujo usa un generador aleatorio con una semilla fija en lugar de Math.random(). El temblor es idéntico en cada render, así que los fotogramas no parpadean.
• Música en código. La banda sonora se escribe con la Web Audio API en la misma página: batería, bajo, pads y un sonido sintetizado para cada acción. Se renderiza offline y se mezcla en el video, así que no hace falta ningún archivo de audio.
• Una sola línea de tiempo para imagen y sonido. Las películas que se sienten "a tiempo" con la música guardan el tempo, la lista de planos y una lista de eventos (un portazo, un número que aparece) en una única estructura de datos que leen tanto el código de dibujo como el de la música. El sonido cae justo en la acción porque ambos comparten los mismos datos de tiempo.

Eso la distingue de las dos cosas con las que suele confundirse:

Paso 1: Parte de un tema, no de un estilo

Las películas que circularon se ven muy distintas entre sí, y justo de eso se trata. Cuando lo probamos con catorce películas sobre seis temas, el tema y las palabras del prompt definieron el aspecto más que cualquier otra cosa. Los presets de estilo y las imágenes de ejemplo arrastraban todo hacia un mismo look. Además, el modelo tiene un gusto de la casa: un fondo azul profundo con acentos ámbar seguía apareciendo incluso después de quitar cualquier pista al respecto de las instrucciones.

Así que di de qué trata la película, para quién es y dónde se va a publicar. Si quieres un aspecto concreto, nómbralo con palabras sencillas ("al estilo de un libro de ciencias de los años 50") en vez de adjuntar un moodboard. Si te da igual, no digas nada y espera el azul con ámbar.

Why is the sky blue? A 20-second explainer in the style of a 1950s science textbook.

Prueba este prompt en iArt →

Entra una frase y sale una página de libro de texto: figuras numeradas, pies de figura, un encabezado corrido y un cielo sombreado a lápiz. La física se sostiene (las ondas azules, cortas, se dispersan unas seis veces más que las rojas, largas). Los pies de figura se escriben letra por letra, así que un fotograma en pausa suele mostrar media frase.

Paso 2: Dale el encargo, la duración y el formato

Los prompts que mejor funcionaron en nuestras pruebas eran cortos y concretos sobre el encargo: la pregunta que responde la película, el público, la duración y el formato. No necesitas escribir la lista de planos; planificarla es el primer paso del agente (Paso 3). Conviene incluir:

• La pregunta o la historia: "¿cómo cancelan el ruido de verdad los audífonos con cancelación de ruido?"
• Duración y plataforma: "explicativo vertical corto para TikTok, ~20 s". La plataforma también le indica la relación de aspecto.
• Para quién es: "para un niño de 2 años" y "para nuestro blog de fintech" dan ritmos y dibujos muy distintos.
• Las palabras exactas, si alguna debe aparecer: el nombre de un canal, un eslogan. El texto se escribe tal cual, así que sale con la ortografía que tú le diste.

How do noise-cancelling headphones actually cancel noise? Short vertical explainer for TikTok, ~20s.

Prueba este prompt en iArt →

9:16, 22 segundos, tres pasos y una salvedad ("best on steady hums like engines & fans": funciona mejor con zumbidos constantes como motores y ventiladores), y cierra con "Hear it. Flip it. Play it. Quiet." El acercamiento hacia el auricular, entre los segundos 7 y 10, satura el encuadre: por un momento la diadema ocupa media pantalla.

Paso 3: Planifica la rejilla de beats y los planos antes de cualquier código de dibujo

Este es el paso que separa una película de un bucle de formas en movimiento. Antes de escribir código de dibujo, el agente escribe el plan como datos:

1. Una rejilla de beats: un tempo y unas secciones (intro, subida, clímax, una breve pausa en silencio, final). Los cortes se colocan en los tiempos fuertes.
2. Una lista de planos con puesta en escena: normalmente de 10 a 20 planos, cada uno con su posición de cámara, dentro de un único mundo continuo. La película de la semilla al árbol que verás abajo es un solo mundo de tierra y cielo por el que se mueve la cámara, no diapositivas separadas.
3. Una sola lista de eventos que leen tanto el código de dibujo como la música.

En el ejemplo de código abierto "I only asked you to fix one line" ("Solo te pedí arreglar una línea"), ese plan es de 120 bpm, 15 planos y unos 20 efectos de sonido sintetizados. La comprobación de sincronía midió 14 de 14 cortes sobre el beat, y la comprobación de maquetación no encontró textos superpuestos en 300 fotogramas muestreados.

A 40-second film in two acts about how a seed becomes a tree: act one underground (the seed cracks, roots reach down), act two above ground (the shoot breaks through, seasons pass, a tree). Same character style in both acts, one continuous score.

Prueba este prompt en iArt →

40 segundos, dos actos, una sola banda sonora. La cámara sigue a la semilla a través de la tierra y hasta un año entero de estaciones. Mantuvo la carita de la semilla en el tronco hasta el árbol final. Eso lo decidió el agente, no la botánica.

Paso 4: Revísala como un director y corrígela con palabras

Un modelo que escribe miles de líneas de código de dibujo cometerá errores visuales que no puede ver en el código: un rótulo encima de un personaje, una escena que se queda quieta cuatro segundos, un platillo que te hace saltar de la silla. El flujo que funciona es renderizar y mirar:

• Una hoja de contactos: un fotograma cada medio segundo en una sola imagen. Revisa de un vistazo el ritmo, el encuadre y los tiempos muertos (los fallos descritos bajo cada película de esta página se encontraron así).
• Comprobaciones automáticas: ningún recurso cargado, texto que no choca con otro texto ni con objetos, cortes sobre el beat, ningún salto brusco de volumen.
• Luego di qué cambiar: "los rótulos se ven muy pequeños en el celular", "haz más lento el segundo acto", "menos naranja". El agente edita el código y vuelve a renderizar.

Los problemas más comunes en el primer borrador durante nuestras pruebas: personajes con contornos gruesos y redondeados que se ven infantiles, texto dibujado encima de objetos, tramos largos en los que nada se mueve y golpes fuertes aislados en la música. Un golpe dentro de un groove constante suena bien; el mismo golpe después de un silencio sobresalta.

Opción 1: Claude Code con la skill de código abierto

Si te manejas bien en la terminal, todo lo anterior viene empaquetado como dos skills gratuitas para agentes en iart-ai/javascript-animation-skills (MIT): javascript-animation (la biblioteca de dibujo, el flujo de storyboard, el render a MP4 y las autocomprobaciones) y soundtrack (música con Web Audio sobre un mapa de tempo, más la comprobación de sincronía).

# Cualquier agente de código (Claude Code, Cursor, Codex…)
npx skills add iart-ai/javascript-animation-skills

# O como plugin de Claude Code
/plugin marketplace add iart-ai/javascript-animation-skills
/plugin install javascript-animation-skills

Requisitos: Node 18+, playwright-core, ffmpeg y Chrome. Sin API keys. Después pídelo con palabras normales:

Make a 40-second hand-drawn explainer on why babies love black-and-white cards. Every frame in code.

El resultado es un único archivo HTML que puedes abrir en el navegador, más el MP4 renderizado.

"I only asked you to fix one line": un agente convierte la corrección de una errata de una línea en una ciudad entera de la noche a la mañana. Un solo archivo HTML de 81 KB; cada nota y cada efecto de sonido se sintetiza con Web Audio.

Las skills se crearon y probaron con Claude Opus 5.5. También se instalan en Cursor, Codex y otros agentes, pero no las hemos probado con otros modelos. Dibujar una película entera exige mucho razonamiento espacial y que el modelo revise sus propias hojas de contactos, así que usa el modelo con visión más potente que tengas.

Opción 2: El modo Animation de iArt, sin código

Si prefieres no configurar una terminal, iArt ofrece el mismo método como producto. Abre Create → Animation, escribe el prompt, elige 16:9, 9:16 o 1:1 y envíalo. Por dentro funciona igual: un agente sobre Claude Opus 5.5 escribe el storyboard, el código de dibujo y la música, revisa sus propios fotogramas, y la película se reproduce en tu navegador. Lo que cambia respecto a hacerlo por tu cuenta:

• Películas más largas. Para una película más larga, pídele que siga: añade la siguiente parte en el mismo proyecto, con los mismos personajes, el mismo estilo y la misma música.
• Las ediciones son frases. Responde con lo que quieres cambiar; edita el código y vuelve a dibujar.
• Foto de referencia. Adjunta una foto y el agente dibuja un personaje a partir de ella. La foto en sí no aparece en la película.
• Exportar y compartir. Comparte con un enlace público o exporta un MP4 con la banda sonora mezclada, codificado en tu navegador.
• Costo. El crédito de $2 al registrarte alcanza para una animación de hasta unos 30 segundos; exportar el MP4 requiere un plan de pago.
• Todavía no. La voz en off no está disponible en el modo Animation; la banda sonora es música y efectos de sonido. Si necesitas narración con texto exacto en pantalla, el modo Motion de iArt también anima escribiendo código (React y GSAP en lugar de un canvas) y admite voz en off con IA; consulta videos explicativos con IA.

"Opening sequence for my faceless YouTube bedtime-story channel 'Sleepy Lantern'. Cozy, 15 seconds, ends on the channel name." Una intro de canal dibujada con código, y un buen uso de este estilo para un canal sin rostro.

FAQ

¿Claude puede hacer animaciones?

Sí. Claude Opus 5.5 puede escribir JavaScript que dibuja cada fotograma de un corto en un canvas de HTML, con una banda sonora sintetizada con la Web Audio API en el mismo archivo. Luego el código se renderiza fotograma a fotograma a MP4. Las películas como las que se compartieron tras el lanzamiento de Opus 5.5 se hacen así, sin recursos de imagen.

¿Necesito saber programar?

No. En Claude Code el agente escribe todo el código a partir de un prompt en lenguaje natural, aunque tendrás que instalar algunas herramientas. En el modo Animation de iArt solo escribes el prompt en el navegador.

¿Qué modelo debería usar?

Tanto la skill de código abierto como el modo Animation de iArt se crearon y probaron con Claude Opus 5.5. Otros modelos no se han probado; espera dibujos más toscos de los modelos más débiles. El modelo tiene que poder procesar imágenes, porque revisa sus propios fotogramas.

¿Cuánto puede durar una animación dibujada con código?

Con la skill, lo que pidas, aunque las películas más largas tardan más en planificarse y revisarse. En el modo Animation de iArt, una película más larga se construye por partes en el mismo proyecto: pídele que siga hasta que tenga la duración que quieres.

¿De dónde sale la música?

Se escribe en código con la Web Audio API: percusión, bajo, pads y un sonido sintetizado para cada acción en pantalla, todo sobre un mapa de tempo para que los cortes caigan en el beat. Se renderiza offline y se mezcla en el MP4. La skill también puede trabajar con un archivo de música que tú aportes.

¿Puedo añadir voz en off?

Todavía no en el modo Animation de iArt; la banda sonora es música y efectos de sonido. El modo Motion de iArt, que anima con código de React y GSAP, admite voz en off con IA si necesitas narración ya.

Haz la tuya

Elige el prompt de esta página que más se acerque a lo que necesitas, cambia el tema y ejecútalo: en Claude Code con la skill de código abierto, o en el modo Animation de iArt, sin instalar nada. Luego mira la primera toma como la miraría un director y di qué cambiar. Encontrarás más películas con sus prompts en la página del creador de animaciones con JavaScript.