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 prompt de abajo empieza con las palabras exactas que hicieron su película.

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

Cómo escribir un prompt para una animación dibujada con código

Una sola frase ya basta para una buena película: la pregunta que responde, para quién es, cuánto dura y el formato. Para una película más profesional, escribe el prompt como un brief corto, en este orden:

[Una o dos frases: qué es la película, cuánto dura, qué formato.]

IDEA: el único tema o recurso que sostiene toda la película.

0–2s: qué hay en pantalla, qué se mueve y cómo, las palabras exactas.
2–5s: …
(una línea por beat, hasta el final)

LOOK: fondo y paleta (códigos hex), tipografía, texturas, composición.
MOTION: dónde va rápido, dónde se detiene, cómo un plano da paso al siguiente.
SOUND: la música (tempo, instrumentos, ambiente) y un sonido para cada acción. Escribe "No narration." si no hay narración.

Los prompts de esta guía están escritos así: la primera frase es la que hizo la película, y el resto describe esa película segundo a segundo. En comparaciones a ciegas, lado a lado, en el modo Animation de iArt (un modelo de IA vio las dos películas en ambos órdenes), el brief completo superó a la frase inicial sola en cinco de las seis películas que probamos, y empató en la sexta. Tarda más en hacerse y usa más créditos, porque hay más que construir. La forma más rápida de escribir uno es describir, segundo a segundo, una película que te guste.

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 (MDN: Canvas API). 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(), cuya semilla no se puede elegir ni reiniciar (MDN). 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.

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.

IDEA: One small smiling paper cloud is the hero: it drifts to the moon, soaks up its golden light, then floats down beside the boy's window. The film is the cloud turning from plain cream paper into a glowing nightlight.

0–3.3s: wide shot of a sleepy town at night: purple paper gabled houses, deep blue starry sky, a big textured full moon upper right. In a warm yellow attic dormer, a boy in blue leans out and looks up.
3.3–6.7s: cut to a medium close-up of the boy framed in the glowing dormer. He yawns wide, rubs one eye with his fist, then rests his chin on his folded hands on the sill.
6.7–10s: back to the wide sky. A fluffy cream paper cloud with a smiling face drifts in from the upper left and glides slowly across the stars toward the moon.
10–13.3s: close-up on the moon. The cloud eases up against its left edge and nuzzles it. Soft yellow light pulses between them, sparkles twinkle, and warm gold spreads through the cloud from inside. It blushes and smiles.
13.3–16.7s: medium-wide on the rooftop. The now golden, glowing cloud floats down on a slow eased arc and settles gently right beside the open dormer window.
16.7–20s: medium shot of the window and the glowing cloud. Tiny yellow star sparkles drift around them. The boy's eyes grow heavy and close with a contented smile as he dozes off. Hold in stillness to the end.

LOOK: midnight indigo sky #1E2243 and #262B54, plum and slate-purple rooftops #3C335C and #4D476D, warm lamp yellow windows #FED466 and #F6AD3C, creamy moon #F8E7A2 and #EED37A, cloud cream #F4EEDC turning golden. Everything is cut from textured construction paper: fibre grain, stippled roofs and sky, torn deckled edges. The glowing window anchors the centre; moon and cloud live in the upper third.

MOTION: slow, low-energy, lullaby pace. The cloud drifts smoothly with soft eased stops at the moon and at the window, with a gentle squash and stretch as it floats. The boy moves like a paper puppet: stepped blinks, swapped mouth shapes for the yawn, a simple arm rub.

SOUND: a slow, gentle lullaby on fingerpicked nylon-string guitar and warm acoustic bass with soft celesta and glockenspiel accents. Magical chimes and a soft sparkle sweep when the cloud touches the moon and fills with light, faint twinkles as it descends. The music never stops. No narration.

Prueba este prompt en iArt →

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.

IDEA: One paper boat drifting left to right along the gutter is the spark. Every window it passes snaps on, and the light spreads like a chain reaction until the whole city glows and the gutter is full of boats.

Captions: lowercase hand-lettered white text in a black banner at the bottom, one per shot.

0–2.6s: a dark, hatched, rain-soaked skyline inks in on off-white paper, a small girl sitting on her front steps, rain lines jittering. Caption: "a dark, wet city".
2.6–5.1s: close-up of her mittened hands folding a cream sheet: triangle hat, brim, pop open into a boat. Caption: "she folded one boat".
5.1–7.6s: the girl with pigtails reaches down from the stoop, sets the boat on the gutter stream and lets go; it drifts right, bobbing. Caption: "and let it go".
7.6–12.6s: track right with the boat past dark facades. A ground-floor window bursts on with cream light and pointed rays, a silhouette inside; neighbours pop on; from an upper window someone drops another boat. Caption: "one window woke".
12.6–15.1s: wider street. Windows pop on in a ripple along the whole block; several boats now float together. Caption: "then the next street".
15.1–20.1s: the opening skyline again; light spreads across tenements and far towers until hundreds of windows glow. Caption: "then the whole city".
20.1–22.6s: low tracking shot along the curb: dozens of boats in a tight convoy, silhouettes watching from lit windows. Caption: "boats, and more boats".
22.6–25s: her building, every window lit; the girl sits in the central arched window holding a folded paper bird. Caption: "it started with one." Hold.

LOOK: strictly two tones like a linocut print: off-white paper #F3EFE6, carbon black #161412 for buildings, figures and banners, bright cream #FFFDF8 for window light and boats. Rough carved lines, heavy crosshatching, spiky ray bursts around lit windows. Flat side-on framing, water line low.

MOTION: animated on twos, hand-printed feel. Folds and windows snap on instantly with a short ray burst; boats drift smoothly with a gentle bob. Hard cuts; the only camera move is a slow pan along the water. The light spreads faster and faster.

SOUND: reflective fingerpicked acoustic guitar around 75–80 BPM, melancholy turning hopeful, over continuous rain hiss. Paper creases on each fold, a soft water dip, a warm switch click and small chime per window, clicks multiplying as the city lights up, a last chord ringing into the rain. No narration.

Prueba este prompt en iArt →

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.

IDEA: One illustrated textbook page. Follow a sunbeam into the air: molecules knock the short blue waves off in every direction while red passes straight on, and that scattered blue reaches a boy's eye from all over the sky.

Throughout: header "CHAPTER 7 · LIGHT AND THE AIR", page "143", a title at the top, a "Fig." caption at the bottom, all typed on letter by letter.

0–3.8s: a boy in a blue cap in a field, a crosshatched red sun above. Title: "Why Is the Sky Blue?" Caption: "Fig. 7-1. On a clear day the whole sky looks blue. But sunlight itself looks white. Where does the blue come from?"
3.8–7.6s: push in to the sun; a white beam carries a long red wave and a short blue wave side by side. Labels pop in: "WHITE SUNLIGHT", "RED: LONG WAVES", "BLUE: SHORT WAVES". Title: "1. Sunlight is a mix of colors". Caption: "Fig. 7-2. White sunlight holds every color of the rainbow. Red light travels in long waves; blue light in short ones."
7.6–12.6s: along the beam among paired-circle molecules ("AIR MOLECULE"), the blue wave hits one and sprays out in rings: "BLUE BOUNCES OFF IN ALL DIRECTIONS". The red wave carries on: "RED PASSES STRAIGHT ON". Table top right, "LIGHT SCATTERED BY AIR": RED 1x, BLUE counting up to 6x. Title: "2. Air scatters the short waves". Caption: "Fig. 7-3. Tiny molecules of air knock short blue waves off in all directions, about six times more than long red ones."
12.6–16.4s: back to the field; dashed blue lines run from molecules all over the sky into the boy's eye ("YOUR EYE"). Title: "3. Blue arrives from every direction". Caption: "Fig. 7-4. Wherever you look, scattered blue light is coming toward your eye. So every part of the sky looks blue."
16.4–20s: full diagram holds. Title: "In Short". Caption becomes a bordered box: "The air scatters blue light out of sunlight, all across the sky. That is why the sky is blue." Hold.

LOOK: aged newsprint #EDE7D7, vermilion #D75D4E for sun and red wave, cornflower blue #4B78A4 for blue wave and sky lines, mustard ground #C4B17B, olive tree #8A7D58, faded charcoal #22201E lines and text. Lithograph print feel: fine horizontal ruling, crosshatch shading, a double-ruled diagram frame. Bold sans titles, plain sans captions, caps labels.

MOTION: calm classroom pace with holds for reading. Waves travel at steady speed; scatter rings expand smoothly, no bounce.

SOUND: warm, minimal electric piano chords around 80 BPM. Typewriter clacks on all typing, no whooshes, a resolving chord and one last key strike. No narration.

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

Un prompt corto que nombre el encargo basta para empezar: la pregunta que responde la película, el público, la duración y el formato. No tienes que escribir la lista de planos, porque planificarla es el primer paso del agente (Paso 3); escribirla tú, como en el brief de arriba, te acerca más a la película que tienes en mente. Conviene incluir en la frase inicial:

• 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 (las especificaciones de TikTok recomiendan el vertical 9:16 — TikTok for Business).
• 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.

IDEA: One cutaway earcup on a listener's head is the whole diagram. Red noise wave in, mic hears it, chip flips it teal, speaker plays it, red plus teal add to a flat line. A bottom meter drops LOUD, MUFFLED, QUIET.

0–2.4s: an annoyed listener faces a fan-like engine labelled "ENGINE HUM". A red sine wave travels into his ear; the bottom meter "NOISE AT YOUR EAR" fills red to "LOUD". Question card drops in at the top: "How do headphones erase noise?"
2.4–3.8s: over-ear headphones slide down onto his head and open into a cutaway: outer mic, chip, inner speaker. The cushion damps the wave; meter falls to "MUFFLED".
3.8–7.6s: punch in on the earcup. Card: "STEP 1 / A mic outside hears the noise". A pulsing ring marks the mic; a screen on the chip traces the red wave.
7.6–11.3s: card: "STEP 2 / A chip flips it upside down / every peak becomes a dip". The wave on the chip screen flips vertically and turns teal.
11.3–12.6s: card: "STEP 3 / The speaker plays the flipped wave". The speaker sends the teal wave into the ear alongside the red one. Equation: "NOISE" + "FLIPPED" = "YOU HEAR".
12.6–15.2s: card: "PEAK + DIP / They cancel out / the hum mostly disappears". Red and teal overlap and flatten into one grey line; meter shrinks to "QUIET" in green.
15.2–18.8s: slight pull back. Card: "THE CATCH / Best on steady hums like engines & fans / sudden sounds get through more".
18.8–22s: reframe on the now smiling listener. Four lines stamp on one by one: "Hear it." "Flip it." "Play it." "Quiet." Hold.

LOOK: warm off-white paper #F1EFE8 with fine grain. Charcoal #22252A headphones and outlines, warm grey #7F7C77 clothes and parts, coral red #D84337 for the noise wave and LOUD, teal #26B5A1 for the flipped wave, forest green #2D6A4F for QUIET. Minimal flat infographic: cutaway diagram, pill badges, thin line waves. Bold sans headlines, small tracked caps labels, text kept in the upper and lower thirds.

MOTION: clear cause-and-effect pace; each card holds one to two seconds to read, then swaps with a quick slide or dissolve. Props move fast with a snappy ease-out; waves scroll smoothly and continuously.

SOUND: warm fingerstyle acoustic guitar with soft piano and a light beat, around 90–100 BPM, under a steady low engine drone at the start. A click and muffled filter sweep as the headphones seal, blips on the mic, a rising synth whoosh on the flip, then the drone cuts out abruptly at the cancel. Soft woodblock pops on each final line, chords resolving. No narration.

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.

IDEA: One little acorn with a face is the hero throughout, seen in a fixed side-on cross-section with soil below, sky above. It wakes, roots, sprouts, becomes an oak, lives through the seasons, and ends by dropping a new acorn, closing the loop.

0–4.5s: brown soil layers under rain; a tiny acorn sleeps underground above a pebble. A small grey badge appears top left: "Act I · Below". Drops seep down toward it.
4.5–9s: close-up: three drops land on its cap, its eyes pop open with a smile, the shell cracks and a pale first root pushes downward.
9–19.5s: wide again. The root drives down, curves around the pebble and branches into side roots. A green shoot pushes up through the soil, pausing just below the surface.
19.5–25s: the shoot breaks through. Badge changes to "Act II · Above". Two rounded first leaves unfold and spread; the seedling smiles up at the sky.
25–30s: the stem thickens into a trunk, the acorn's face still at its base. Branches grow and burst into round green leaf clusters with small pink blossom dots; a warm sun rises upper right.
30–33s: autumn. The sky warms; the canopy turns golden orange and leaves drift down to the ground.
33–36s: winter. Bare branches, snow falling, a white layer building on the soil. The face sleeps calmly.
36–40s: spring. The snow melts, green canopies pop back with blossoms, an acorn ripens on a branch, falls and lands on the soil with two small bounces.

LOOK: soil in deep chocolate #4A3322 and umber #5A3D28 with tan flecks #9C8471; sky parchment cream #EBE5D8; acorn golden ochre #D89849 with chestnut cap #8C5A28; stem green #88A878; foliage sage #94B097 and olive #5F8265, autumn orange #C8873E, blossom coral #E28A7A; sun amber #E2A35B. Flat shapes with light paper grain, simple line roots and branches, round canopies. Badge: small grey #7E858C rounded box, white text.

MOTION: calm, readable, with pauses between each stage of growth. Springy squash and stretch on the crack, leaf pops and landing; smooth easing on root and branch growth. Seasons change in place with colour shifts, falling leaves and snow.

SOUND: one unbroken, unhurried fingerstyle acoustic guitar score, thinning in winter, lifting for spring. Drip pings underground, a crisp shell crack, soft pops on eye-open and when the shoot breaks through, birdsong above ground, woody rustles, an autumn breeze, quiet winter wind, a spring chime, and a hollow thud as the new acorn lands. No narration.

Prueba este prompt en iArt →

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

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.

¿Qué longitud debe tener el prompt?

Una o dos frases bastan para una buena película: qué es, cuánto dura, el formato y el momento que importa. Para una película más profesional, añade un brief corto de unas 300 a 450 palabras: la idea que sostiene la película, los planos segundo a segundo con las palabras exactas en pantalla, el estilo, el movimiento y un sonido para cada acción. Un brief tarda más en hacerse y usa más créditos.

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