Ejemplos de animación en canvas: 7 películas dibujadas fotograma a fotograma en JavaScript, con sus prompts y lo que medimos
Desde que salió Claude Opus 5.5, "every frame drawn in JavaScript" ("cada fotograma dibujado en JavaScript") se ha convertido en un género: cortos en los que un programa pinta cada fotograma sobre un canvas de HTML y la música se sintetiza en la misma página. Este artículo reúne ejemplos de animación en canvas hechos así, en el modo Animation de iArt y con la skill de código abierto, cada uno con el prompt exacto que lo produjo y con lo que le corregiríamos. Al final hay una tabla en la que pasamos el mismo script de medición por nuestras películas y por cuatro de las que circularon en X, para que veas en qué se diferencian de verdad.
Activa el sonido para oír la banda sonora: también es código. Los prompts de esta página se muestran en su inglés original; la app acepta prompts en cualquier idioma.
Lo que tienen en común estos ejemplos
Todas las películas de abajo las hizo un agente con Claude Opus 5.5 a partir de un prompt de una sola frase, sin archivos de imagen, metraje ni audio. Primero el agente planificó una rejilla de beats y una lista de planos, luego escribió el código de dibujo y la música, y antes de terminar revisó su propia hoja de contactos. Después nadie editó nada a mano. Por eso cada pie de video señala un fallo: los fallos son lo que de verdad trae la primera toma. El método se explica paso a paso en cómo hacer una animación con cada fotograma dibujado en JavaScript, y el término en sí, en la entrada del glosario animación con JavaScript.
1. Cómo elige ChatGPT la siguiente palabra (explicativo 9:16)
How does ChatGPT actually pick the next word? A 25-second vertical explainer for TikTok, no jargon.
En qué fijarse. Es la película de arriba. El agente convirtió "elegir la siguiente palabra" en una ruleta de premios cuyos gajos miden las probabilidades, y la ruleta es toda la explicación: leer, calcular probabilidades, girar, añadir, y otra vuelta para la palabra siguiente. Un indicador de pasos se queda arriba para que siempre sepas en qué punto estás. Las probabilidades en pantalla están marcadas como números de ejemplo inventados, y en una de las repeticiones rápidas gana la segunda palabra más probable, para mostrar que no siempre sale la primera.
Qué corregiríamos. Dice "palabra" todo el tiempo; en realidad ChatGPT elige fragmentos de palabra, algo que el agente omitió para evitar tecnicismos. El tercio inferior del encuadre está bastante vacío durante los primeros siete segundos.
2. Cómo sabe tu teléfono dónde estás (explicativo 1:1)
How does your phone know where you are? A 25-second GPS explainer for my science Instagram, playful but accurate.
En qué fijarse. "Playful but accurate" (divertido pero riguroso) se tradujo en una estética de fanzine científico en risografía: tintas planas azul y rosa sobre papel crema, con un pequeño teléfono rosa como personaje. La física es correcta y está dibujada a escala: unos 30 satélites a 20.200 km, una señal cronometrada en 0,070 s que se convierte en 21.000 km, tres círculos de distancia que se cruzan en el teléfono, y luego la trampa: el reloj del propio teléfono va desfasado y un cuarto satélite lo corrige. La banda sonora es marimba y percusión de caja china, con un sonido para cada pop, pulso y pin.
Qué corregiríamos. El posicionamiento se dibuja con círculos planos en lugar de esferas, la simplificación habitual. En los planos generales el teléfono mide unos 30 px de alto, así que su pose de "escuchar" apenas se distingue, y el cuarto satélite se queda fuera de cuadro mientras llega su círculo.
3. El medio segundo después de pulsar Enter (explicativo 16:9)
What happens in the half second after you type a website address and press Enter? A 30-second explainer for our developer newsletter.
En qué fijarse. Un único mapa de red continuo que la cámara va recorriendo: DNS, luego el handshake TCP como fichas SYN / SYN-ACK / ACK sobre un cable, luego TLS con la verificación del certificado y un candado, luego GET / y 200 OK, y por último la página pintándose. Cada mensaje es una ficha que muestra literalmente lo que dice. Ámbar para lo que envía el navegador, blanco roto para las respuestas, y verde solo cuando la línea ya va cifrada. La dirección de ejemplo resuelve a 203.0.113.42, un rango reservado para documentación, así que no es el servidor real de nadie.
Qué corregiríamos. En los planos generales las fichas miden 25–35 px en pantalla, pequeñas en un teléfono. Los primeros 3,7 segundos son bastante estáticos (solo la pregunta y el tecleo), y la película simplifica: no hay caché de DNS ni HTTP/3.
4. Historia de la IA moderna en 30 segundos (16:9)
A 30-second history of modern AI, from the 2017 paper 'Attention Is All You Need' to today's AI agents that write code. For a tech YouTube channel.
En qué fijarse. Seis épocas, un plano cada una, con una barra de línea de tiempo que sigue el año en la parte inferior: el paper de 2017 con la atención dibujada como arcos entre las palabras de su título, GPT y BERT en 2018, los tamaños de los modelos dibujados como cuadrados cuya área corresponde a su número de parámetros (117M, 1.5B, 175B), una ventana de chat en 2022, un modelo de razonamiento contando las erres de "strawberry" y un agente de programación cuyos tests pasan. El agente limitó los datos en pantalla a los que tenía claros y no usó nombres de productos posteriores a 2022.
Qué corregiríamos. El alejamiento final reduce las seis épocas a miniaturas que no se leen, y los rótulos de 29 px son pequeños en un teléfono. Además es la película más oscura del conjunto, y aquella en la que más se nota el gusto de la casa del modelo (fondo azul profundo con acentos ámbar).
5. La luna arropa a las estrellas (1:1, para un niño de dos años)
A 20-second bedtime animation for a 2-year-old: the moon tucks the stars into bed.
En qué fijarse. El mismo motor en el registro opuesto: personajes redondeados, ojos grandes, una luna con gorro de dormir y un movimiento suave casi constante. En la tabla de mediciones de abajo es la única de nuestras películas que se mueve tanto como las virales. "Divertido para un niño de dos años" es un encargo que el agente interpreta como un estilo visual, no solo como un tema.
Qué corregiríamos. La banda sonora tiene el rango de sonoridad más pequeño del conjunto (unos 4 dB), lo cual encaja con la hora de dormir, pero hace que los cortes entren suaves en lugar de caer en un beat que se sienta.
6. Por qué la Luna cambia de forma (1:1, en español)
¿Por qué la Luna cambia de forma cada noche? Un video corto para mi canal de ciencia para niños, texto en español.
En qué fijarse. Un prompt en español da una película en español, con el texto en pantalla escrito tal cual, porque lo dibuja el código y no un modelo de video. La explicación es la correcta (la Luna no tiene luz propia; cada noche vemos una porción distinta de su mitad iluminada; el ciclo dura unos 29 días y medio), dibujada como un diagrama Sol–Tierra–Luna con recuadros de "cómo la vemos".
Qué corregiríamos. Con 40 segundos es la película más larga del conjunto y la más estática después de la historia de la IA: el 37 % de sus fotogramas tiene movimiento visible. Un canal infantil querría más movimiento entre los momentos del diagrama.
7. "Solo te pedí que arreglaras una línea" (ejemplo de código abierto)
En qué fijarse. Esta se hizo con la skill javascript-animation de código abierto en Claude Code y no en la app, y es una comedia, no un video explicativo: alguien pide arreglar una errata de una línea a las 01:58 y se va a dormir, y a las 08:30 el código es un skyline. Es un único archivo HTML de 81 KB; cada nota y cada efecto de sonido los sintetiza ese mismo archivo. Las comprobaciones del repo midieron 14 de 14 cortes en el beat y ninguna colisión de texto en 300 fotogramas muestreados.
Qué corregiríamos. La primera pasada de esta película se veía infantil (redondeada, con contornos, estilo chibi) y tenía texto encima de los objetos; la versión que ves es la segunda pasada, con un estilo cinematográfico plano y líneas de construcción. Hizo falta la revisión de un director para llegar ahí, que es justo el paso que ahora la app hace por ti.
Qué medimos: nuestras películas frente a las que circularon
Pasamos un mismo script por todas las películas de este artículo y por cuatro de las que se compartieron en X tras el lanzamiento de Opus 5.5. Reduce cada película a 10 fotogramas por segundo en una miniatura de 48×48 en escala de grises y mide cuatro cosas: movimiento medio (el cambio medio de píxeles entre fotogramas consecutivos; cuanto más alto, más pasa por segundo), fotogramas con movimiento (el porcentaje de pasos de 0,1 segundos con un cambio visible), cortes secos cada 10 segundos y rango de sonoridad (los decibelios entre el segundo más fuerte y uno tranquilo). De las películas públicas solo damos nuestras mediciones y enlazamos las publicaciones originales; no las volvemos a alojar.
| Película | Duración | Movimiento medio | Fotogramas con movimiento | Cortes secos / 10 s | Rango de sonoridad |
|---|---|---|---|---|---|
| Watermelon (Kevin Ngo, compartida por @claudeai) | 29 s | 10.9 | 85% | 13.3 | 11 dB |
| "What do you love?" (Kevin Ngo) | 28 s | 11.4 | 97% | 12.5 | 6 dB |
| "Small print" (@Voxyz_ai) | 29 s | 8.2 | 98% | 0 | 7 dB |
| Video-editor demo (@NFT_Chen) | 30 s | 4.5 | 94% | 9.0 | 7 dB |
| 5. La luna arropa a las estrellas | 20 s | 4.8 | 80% | 6.0 | 4 dB |
| 7. Solo te pedí que arreglaras una línea | 30 s | 3.5 | 52% | 6.0 | 14 dB |
| 1. Cómo elige ChatGPT la siguiente palabra | 26 s | 2.1 | 38% | 1.9 | 12 dB |
| 2. Cómo sabe tu teléfono dónde estás | 25 s | 1.4 | 26% | 2.0 | 8 dB |
| 6. Por qué la Luna cambia de forma | 40 s | 1.2 | 37% | 1.5 | 6 dB |
| 3. El medio segundo después de pulsar Enter | 30 s | 1.2 | 33% | 1.0 | 12 dB |
| 4. Historia de la IA moderna en 30 segundos | 30 s | 1.1 | 24% | 1.3 | 14 dB |
El patrón salta a la vista. Las películas que se hicieron virales se mueven casi todo el tiempo (85–98 % de los fotogramas) y se mueven mucho (movimiento medio de 4,5 a 11,4), con un corte cada segundo o más seguido. Nuestros videos explicativos se quedan quietos para que puedas leer: entre el 24 y el 38 % de los fotogramas tiene movimiento, y el movimiento medio va de 1,1 a 2,1. Es una diferencia de género, no una nota de calidad. Un video explicativo que se moviera como la película de la sandía sería imposible de leer, y las dos películas nuestras que son historias y no explicaciones (la de la hora de dormir y la comedia) quedan mucho más cerca del grupo viral. Si quieres esa sensación viral, pídela en el prompt: movimiento constante, un corte en cada beat, nada que leer.
La columna de sonoridad es el otro dato honesto. Nuestras películas tienen más rango dinámico (hasta 14 dB) que la mayoría de las virales (6–7 dB) porque la música está escrita por secciones y con una pausa en silencio, lo que hace que los cortes peguen más fuerte, pero puede sobresaltar si un golpe sale de la nada. La comprobación de sincronía de la skill de banda sonora señala justo eso.
FAQ
¿Qué es una animación en canvas?
Una animación en canvas es una animación que el código dibuja sobre un elemento canvas de HTML, fotograma a fotograma: una función pinta la imagen completa de cada instante, así que nada de lo que hay en pantalla es una imagen o un video importado. Las películas de esta página son animaciones en canvas cuyo código escribió Claude Opus 5.5, con la música sintetizada por ese mismo código.
¿Se editaron a mano estos ejemplos?
No. Cada película es la primera toma que entregó el agente a partir del prompt que se muestra, con los fallos que se indican debajo. La película 7 es la segunda pasada de un ejemplo de código abierto, en la que la revisión de un director cambió el estilo; esa revisión ahora forma parte de lo que hace por sí mismo el agente de la app.
¿Puedo hacer una de estas yo mismo?
Sí. Haz clic en "Prueba este prompt" debajo de cualquier ejemplo para abrirlo en el modo Animation de iArt, o instala la skill javascript-animation de código abierto en Claude Code. El método completo está en la guía práctica enlazada más arriba.
¿Por qué las películas virales se mueven mucho más que estas?
Porque son loops e historias, no videos explicativos. Nuestras mediciones muestran que las películas compartidas tienen movimiento visible en el 85–98 % de los fotogramas; los videos explicativos hacen pausas para que se pueda leer el texto, lo que los deja en el 24–38 %. Pide movimiento constante y cortes en cada beat si esa es la sensación que buscas.
¿Cómo se hicieron las mediciones?
Un script corto reduce cada película a 10 fotogramas por segundo en 48×48 en escala de grises y calcula el cambio medio de píxeles entre fotogramas, el porcentaje de fotogramas con un cambio visible, el número de cortes secos y el rango de sonoridad del audio en decibelios. El mismo script se pasó por todas las películas, las nuestras y las públicas.
Haz la tuya
Cada prompt de esta página es una sola frase. Toma el que más se acerque a lo que necesitas, cambia el tema y ejecútalo en el modo Animation de iArt. Si estás haciendo una serie para un canal, la página del creador de videos sin rostro muestra los formatos más largos que iArt también produce, y la de videos explicativos cubre los explicativos con narración.