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:
| Animación dibujada con código | Animación por fotogramas clave | Generación de video con IA | |
|---|---|---|---|
| Qué produce los píxeles | Un programa dibuja cada fotograma | Un animador fija las poses clave y el software rellena lo de en medio | Un modelo de video predice píxeles |
| Recursos | Ninguno: formas, texto y sonido son todo código | Dibujos, vectores, metraje | Ninguno, pero tampoco hay fuente |
| Texto en pantalla | Exacto, porque se escribe tal cual | Exacto | Puede deformarse o salir mal escrito |
| Cambiar una cosa | Editar una línea y volver a renderizar | Reajustar los keyframes a mano | Regenerar y cruzar los dedos |
| Mismo render dos veces | Idéntico | Idéntico | Distinto |
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.
Tres películas en las que el estilo se nombra en el prompt, con palabras simples:
Paper cut-out collage style, like a children's picture book made of construction paper. A little boy at his window can't sleep, so a small friendly cloud drifts down over the rooftops, borrows a bit of moonlight and glows like a nightlight until he dozes off. 20 seconds, square 1:1.
El aspecto de collage de papel es el que popularizó el clip de Kevin Ngo; la historia es nuestra.
Black-and-white ink woodcut style, rough carved lines on off-white paper. A girl folds a paper boat and sets it into the rain gutter; as it drifts through the city at night, every window it passes lights up and someone folds another boat. Short hand-lettered captions. 25 seconds, 16:9.
Inspirado en la animación en tinta de @shfred0.
Why is the sky blue? A 20-second explainer in the style of a 1950s science textbook.
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.
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:
- 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.
- 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.
- 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.
40 segundos, dos partes, 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 lenta la segunda mitad", "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-skillsRequisitos: 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 es la misma idea: un agente sobre Claude Opus 5.5 escribe el storyboard, la película como código (texto compuesto tipográficamente, SVG y datos, con una capa de canvas para el trabajo dibujado a mano como las películas de esta página) 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. Pide la duración que quieras; una película más larga tarda más en generarse y cuesta más.
- Las ediciones son frases. Responde con lo que quieres cambiar; edita el código y vuelve a dibujar.
- Tus imágenes. Adjunta capturas de pantalla, un logo o fotos de producto y aparecen en la película tal cual; adjunta la foto de una persona o de un estilo que te guste y sirve de referencia para un personaje o un estilo dibujado. Indica cuál es cuál. También puedes darle la dirección de tu sitio web.
- Exportar y compartir. Comparte con un enlace público o exporta un MP4 con la banda sonora mezclada, renderizado en la nube (1080p en Pro, 4K en Ultra). Las superposiciones, como los lower thirds, se exportan como WebM transparente.
- Costo. Una película de 20 a 30 segundos cuesta unos $0.60–$1.00 y tarda unos 4–5 minutos en generarse, así que el crédito de $2 al registrarte alcanza para dos o tres; exportar el MP4 requiere un plan de pago.
- Voz en off. Elige una voz en el cuadro de mensaje y la película se narra, con la imagen sincronizada con las palabras. Sin voz, la banda sonora es música y efectos de sonido.
"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.
| Claude Code + skill | iArt Animation | |
|---|---|---|
| Configuración | Node, Playwright, ffmpeg, Chrome y una suscripción a un agente | Un navegador |
| Modelo | El que use tu agente (probado con Opus 5.5) | Claude Opus 5.5 |
| Resultado | Un archivo HTML + MP4 en tu computadora | Proyecto en el editor, enlace para compartir, exportación a MP4 o WebM transparente (de pago) |
| Duración | La que pidas | La que pidas; las películas más largas cuestan más |
| Edición | Pídeselo al agente o edita el HTML | Pídelo en el chat |
| Costo | Skill gratuita; pagas tu propio uso del modelo | Crédito según el uso ($2 gratis para empezar) |
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, pide la duración que quieras; una película más larga tarda más en generarse y cuesta más.
¿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?
Sí. En el modo Animation de iArt, elige una voz en el cuadro de mensaje; el agente escribe el texto, lo graba y sincroniza la imagen con él. Sin voz, la banda sonora es música y efectos de sonido.
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.