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 renderiza cada fotograma
y compone la banda sonora en código. Sin fotogramas clave, sin línea de tiempo, sin terminal.
¿Qué es la animación JavaScript?
Un video escrito como código.
Renderizado 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 renderiza con código que escribe un agente con Claude Opus 5.5. La tipografía se compone como texto real, las formas y los trazados se dibujan en SVG, y una capa de canvas pinta lo dibujado a mano, las partículas o las texturas; cada fotograma es una función del tiempo, así que el video se reproduce, se recorre y se exporta de la misma manera. La música y los efectos de sonido se sintetizan en código 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 animación 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.
¿Claude Motion no está en tu plan? Mira cuatro formas de hacer el mismo tipo de animación sin él.
Ejemplos
Videos dibujados enteramente en código.
Cada video se hizo en el modo Animation de iArt a partir del prompt que aparece debajo, con cada fotograma y cada nota escritos en código. 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 →“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.”
Prueba este prompt →“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.”
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 tus capturas de pantalla o tu logo para mostrarlos en el video, o una foto en la que basar un personaje dibujado.
02
Planifica beats y planos
Antes de escribir código, el agente decide los planos: qué muestra cada uno, cuánto dura y dónde caen los cortes y los golpes de sonido. Las imágenes y la música leen los mismos tiempos; por eso los cortes caen justo en el beat.
03
Dibuja, musicaliza y revisa
Escribe el código que renderiza cada fotograma 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 recortados, colisiones 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 renderizar. Comparte un enlace público o, en un plan de pago, exporta un MP4 con la banda sonora o un WebM transparente para superposiciones.
Dos motores
¿Qué motor de iArt te conviene?
Animation es una de las dos formas de hacer un video en iArt. Es la herramienta indicada cuando las palabras, los datos y el timing deben ser exactos, no para metraje con aspecto de filmación.
| Animation | AI Video | |
|---|---|---|
| Cómo se hace | El código renderiza cada fotograma (texto tipográfico, SVG, una capa de canvas); la banda sonora se sintetiza en código | Un modelo generativo de video renderiza las imágenes |
| Ideal para | Explicativos, motion graphics, videos ilustrados, superposiciones | Tomas cinematográficas con aspecto de filmación |
| Texto en pantalla | Exacto (compuesto en código) | Lo dibuja el modelo; la ortografía puede variar |
| Recursos | No hacen falta; tus capturas, logos, imágenes y clips también pueden aparecer | Metraje generado |
| Voz en off | Voz en off con IA (elige una voz) | Voz en off con IA |
¿Haces un explicativo con la tipografía exacta de tu marca o gráficos de datos? 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
- ✓ Pide la duración que quieras; los videos largos se dividen en escenas
- ✓ Muestra tus capturas de pantalla, tu logo o tu sitio, o dibuja un personaje a partir de una foto
- ✓ Voz en off con IA opcional
- ✓ Comparte un enlace público; exporta un MP4 con la banda sonora, o un WebM transparente para superposiciones, 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 renderizada con código, es un video en el que cada fotograma lo produce el código: una función del tiempo decide qué se ve en pantalla en cada momento, con texto tipográfico, formas SVG y dibujo en canvas, y la música y los efectos de sonido se sintetizan con la Web Audio API. 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 animación 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 divide en escenas en el mismo proyecto, con el mismo estilo y la misma música, y puedes cambiar cualquier escena después respondiendo en el chat. El video de la semilla que se convierte en árbol, en esta página, dura 40 segundos.
¿El modo Animation agrega voz en off o narración?
Sí. Elige una voz en el cuadro de mensaje y el video se narra, con la imagen sincronizada con las palabras. Sin voz, la banda sonora es música y efectos de sonido sintetizados en código.
¿Puedo usar mis propias imágenes o fotos?
Sí. Las capturas de pantalla, logos, fotos de producto y grabaciones de pantalla cortas que adjuntes aparecen en el video tal cual; una foto de una persona o de un estilo que te guste se usa como referencia para un personaje dibujado o para el estilo. También puedes darle la dirección web de tu sitio.
¿Cuánto cuesta y puedo descargar el video?
Las cuentas nuevas reciben un crédito de registro de $2. Con $2 alcanza para un video de menos de 30 segundos. Cualquier video se puede compartir con un enlace público. Exportar un MP4 con la banda sonora requiere un plan de pago (Pro cuesta $20/mes). Las superposiciones, como los lower thirds, se exportan en cambio como WebM transparente.
¿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 escribe cada fotograma.
Cada fotograma y la música, escritos en código. Empieza con el crédito de registro de $2; exporta MP4 en un plan de pago.