Creador de Animaciones JavaScript
Cada fotograma, dibujado en código.
Tú solo lo describes.
Un agente sobre Claude Opus 5.5 escribe el JavaScript que dibuja cada fotograma en un canvas
y compone la banda sonora en código. Sin imágenes, sin metraje, sin archivos de audio, sin terminal.
¿Qué es la animación JavaScript?
Un video escrito como código.
Dibujado de nuevo en cada fotograma.
El modo Animation de iArt.ai convierte una descripción de una frase en una animación JavaScript: un video corto en el que cada fotograma se dibuja en un canvas HTML con código que escribe un agente con Claude Opus 5.5. No se importa nada: ni imágenes, ni metraje de archivo, ni archivos de audio. Toda la imagen es una sola función, draw(ctx, t), que pinta el canvas para cualquier instante t: personajes, fondos, tipografía, movimientos de cámara. La música y los efectos de sonido se sintetizan en la misma página con la Web Audio API.
iArt.ai lleva ese método a una pestaña del navegador. Su modo Animation es un agente sobre Claude Opus 5.5: describes el video y el agente planifica los beats y los planos, escribe el código de dibujo y la banda sonora, revisa sus propios fotogramas y reproduce el resultado en tu navegador. No hay un estilo predeterminado. El aspecto sale del tema y de tus palabras, así que un explicativo sobre pagos y un cuento para dormir para un niño de dos años no se parecen en nada.
Por qué se difundió ahora: dibujar un video entero en código depende del razonamiento espacial de un modelo, de su gusto y de su capacidad para escribir código largo y cuidadoso, y también de que pueda mirar sus propios fotogramas y corregirlos. Con Claude Opus 5.5, los videos dibujados con código se volvieron lo bastante buenos como para que la gente empezara a compartirlos, y "cada fotograma en JavaScript" se convirtió en un género propio.
Para la definición completa, consulta qué es la animación JavaScript. Para hacerlo tú mismo paso a paso, lee cómo hacer una animación con Claude Opus 5.5.
Ejemplos
Videos dibujados enteramente en código.
Cada video lo hizo el agente Animation de iArt a partir del prompt que aparece debajo. Cada fotograma es código de canvas; cada nota es Web Audio. Prueba un prompt y obtendrás un video en la misma línea, no una copia.
“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 →“How do noise-cancelling headphones actually cancel noise? Short vertical explainer for TikTok, ~20s.”
Prueba este prompt →“Why is the sky blue? A 20-second explainer in the style of a 1950s science textbook.”
Prueba este prompt →“Opening sequence for my faceless YouTube bedtime-story channel 'Sleepy Lantern'. Cozy, 15 seconds, ends on the channel name.”
Prueba este prompt →“A 20-second bedtime animation for a 2-year-old: the moon tucks the stars into bed.”
Prueba este prompt →“¿Por qué la Luna cambia de forma cada noche? Un video corto para mi canal de ciencia para niños, texto en español.”
Prueba este prompt →Cómo funciona
Describe. Planifica. Dibuja. Ajusta.
Esto es lo que pasa entre tu prompt y el primer fotograma.
01
Describe el video
Di lo que quieres con tus propias palabras: el tema, para quién es, la duración, el tono. Elige 16:9, 9:16 o 1:1. Adjunta una foto si quieres un personaje basado en una persona o mascota real: el agente dibuja el personaje a partir de ella, y la foto en sí nunca aparece en el video.
02
Planifica beats y planos
Antes de dibujar nada, el agente escribe una cuadrícula de beats y una lista de planos ambientadas en un único mundo continuo, además de una lista de eventos compartida que leen tanto las imágenes como la música. Por eso los cortes caen justo en el beat.
03
Dibuja, musicaliza y revisa
Escribe el código que dibuja cada fotograma en el canvas y la banda sonora en Web Audio (música y efectos de sonido), y luego revisa sus propios fotogramas y una hoja de contactos en busca de textos encimados y fotogramas en blanco antes de que veas nada.
04
Edita, continúa, exporta
Responde en el chat para cambiar lo que sea; el agente edita el código y vuelve a dibujar. Para un video más largo, 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. Comparte un enlace público o exporta un MP4 con la banda sonora en un plan de pago.
Tres motores
¿Qué motor de iArt te conviene?
Animation es una de las tres formas de hacer un video en iArt. Es la herramienta indicada para videos dibujados y explicativos, no para todo.
| Animation | Motion Design | AI Video | |
|---|---|---|---|
| Cómo se hace | El código dibuja cada fotograma en un canvas; la banda sonora se sintetiza en código | El código anima diseños con tipografía compuesta (React + GSAP) | Un modelo generativo de video renderiza las imágenes |
| Ideal para | Videos y explicativos dibujados e ilustrados | Motion graphics: texto exacto, datos, marca, producto | Tomas cinematográficas con aspecto de filmación |
| Texto en pantalla | Exacto (dibujado por código) | Exacto (compuesto tipográficamente) | Lo dibuja el modelo; la ortografía puede variar |
| Recursos | Ninguno: sin archivos de imagen, video ni audio | Puede usar tus imágenes, logos, diapositivas y datos | Metraje generado |
| Voz en off | Todavía no (solo música y efectos de sonido) | Voz en off con IA integrada | Voz en off con IA |
¿Necesitas narración o la tipografía exacta de tu marca? Motion Design hace ambas cosas; mira videos explicativos.
Hazlo tú mismo,
o sáltate la configuración.
El método es de código abierto. Si vives en la terminal, ejecútalo con tu propio agente de programación. Si prefieres escribir una frase en el navegador, usa el modo Animation.
Claude Code + javascript-animation-skills
Nuestro paquete de skills de código abierto le enseña a tu agente de programación el mismo método: cuadrícula de beats y lista de planos, una biblioteca de dibujo, una banda sonora en Web Audio, autorrevisiones y un render a MP4. Creado y probado con Claude Opus 5.5.
- – Gratis y con licencia MIT; usas tu propio plan de Claude Code o tu propio uso de la API
- – Funciona en Claude Code y en otros agentes de programación
- – Requiere Node 18+, ffmpeg, Chrome y playwright-core
- – El video es un archivo HTML que es tuyo y que puedes editar a mano
El mismo método, en una pestaña del navegador
Nada que instalar, sin terminal. Describe el video, míralo reproducirse y cámbialo respondiendo en el chat.
- ✓ Funciona en app.iart.ai, en la pestaña Animation de la página Create
- ✓ Pídele que siga para un video más largo
- ✓ Dibuja un personaje a partir de una foto que adjuntes
- ✓ Comparte un enlace público; exporta MP4 con la banda sonora en un plan de pago
Preguntas frecuentes
Preguntas frecuentes sobre animación JavaScript
No encuentra lo que busca? Comuniquese con nuestro equipo.
¿Qué es la animación JavaScript?
La animación JavaScript, entendida como animación dibujada con código, es un video en el que cada fotograma se pinta en un canvas HTML mediante código: una función draw(ctx, t) renderiza lo que debe verse en pantalla en el instante t, y la música y los efectos de sonido se sintetizan con la Web Audio API. No se importa nada: ni imágenes, ni metraje, ni archivos de audio. El modo Animation de iArt es un generador de animación con IA que escribe ese código por ti a partir de un prompt de texto.
¿Qué modelo usa el modo Animation de iArt?
Claude Opus 5.5. El agente planifica los beats y los planos, escribe el código de dibujo y la banda sonora, y revisa sus propios fotogramas y la hoja de contactos antes de mostrarte el video. La versión de código abierto del método, javascript-animation-skills, también se creó y se probó con Claude Opus 5.5.
¿Cuánto puede durar un video?
Pide la duración que quieras. Un video más largo se construye por partes en el mismo proyecto, con los mismos personajes, el mismo estilo y la misma música: pídele que siga hasta terminarlo. El video de la semilla que se convierte en árbol, en esta página, se hizo en dos partes y dura 40 segundos.
¿El modo Animation agrega voz en off o narración?
Todavía no. La banda sonora del modo Animation es música y efectos de sonido sintetizados en código. Si necesitas narración, usa el modo Motion Design de iArt, que anima con código React y GSAP e incluye voz en off con IA.
¿Puedo usar mis propias imágenes o fotos?
Puedes adjuntar una foto de referencia y el agente dibuja un personaje a partir de ella; la foto en sí nunca aparece en el video. Fuera de eso, no se importa nada ni se genera nada como imagen: cada trazo en pantalla lo dibuja el código.
¿Cuánto cuesta y puedo descargar el video?
Las cuentas nuevas reciben un crédito de registro de $2, suficiente para crear una animación de hasta unos 30 segundos. Cualquier video se puede compartir con un enlace público. Exportar un MP4 con la banda sonora, codificado en tu navegador, requiere un plan de pago (Pro cuesta $20/mes).
¿Hay una forma gratuita y de código abierto de hacerlo?
Sí. javascript-animation-skills (github.com/iart-ai/javascript-animation-skills, MIT) es un conjunto de skills de Claude Code que le enseña a tu agente de programación el mismo método y renderiza el video a MP4 en tu computadora. Requiere Node 18+, ffmpeg y Chrome. El modo Animation de iArt es el mismo enfoque sin la configuración.
Describe el video.
El agente dibuja cada fotograma.
Cada fotograma dibujado en código, la música sintetizada en código, nada importado. Empieza con el crédito de registro de $2; exporta MP4 en un plan de pago.