Claude puede escribir el código detrás de un video con movimiento en minutos. Mantener ese código funcionando en un sitio real, en todos los navegadores y dispositivos, es la parte difícil. Claude + GSAP te ofrece animaciones a partir de un prompt, respaldadas por un código robusto que puedes implementar con total confianza.
El lunes 28 de septiembre, GSAP superó el millón de descargas diarias en npm por primera vez. Fue un momento emocionante para el equipo de GSAP, y ocurrió al inicio de una semana inusual. Las descargas semanales suelen crecer un pequeño porcentaje. La semana del 27 de septiembre registró poco más de 7 millones de descargas, casi un 50% más que a finales de agosto.
No tardamos mucho en darnos cuenta de lo que estaba pasando: internet estaba teniendo un momento de furor por la animación. Anthropic había lanzado Claude Opus 5.5, y es bastante bueno con el movimiento. Nos etiquetaron en cientos de publicaciones, las típicas demos web que esperarías, pero también en una cantidad enorme de videos. Eso era nuevo. Entonces, ¿cómo estaba la gente sacando videos de un chatbot?
Bueno, Claude en realidad no puede crear video. Hace lo que mejor sabe hacer: escribir código. Construye la escena con tecnologías web como HTML, SVG y canvas, con Three.js para cualquier elemento 3D, y escribe el código para animarlo todo. Luego, un navegador sin interfaz (headless) recorre la animación fotograma a fotograma y ffmpeg une esos fotogramas en un MP4. Así que, en el fondo, el video resultante es realmente una página web.
Hacer videos frente a desarrollar para la web
Algo que podrías notar si curioseas en el código para la salida de video es que Claude no siempre usa una biblioteca de animación, a menos que se le pida una herramienta específica; a menudo creará su propio motor. Para un video, eso suele estar bien. Se ejecuta una vez, en un navegador, a un tamaño determinado, y luego se convierte en píxeles. Si se ve bien cuando le das a renderizar, listo. Pero la web no es tan sencilla. Los sitios web deben funcionar en todo tipo de dispositivos, navegadores y velocidades de conexión, y deben seguir funcionando a pesar de las actualizaciones del navegador y los ajustes en el código.
Claude puede escribir código de animación en segundos, pero alguien tiene que encargarse de ese código una vez que esté en vivo. Eso es lo que una biblioteca de animación te ahorra. Cuando un navegador lanza un nuevo error, le corresponde al equipo de la biblioteca solucionarlo, no a ti, y la siguiente persona (o agente) que abra tu proyecto no tendrá que descifrar un motor casero: tendrá documentación, ejemplos y una comunidad en la que apoyarse.
Cómo hacer tus propios videos de movimiento
El prompt que inició esta tendencia fue simplemente
Make a 15-second motion graphics video that shows what an incredible motion designer you are. Go all out.Le di a Opus los recursos de marca de GSAP, un archivo con las directrices de marca y le pedí
Make a 15 second showreel video. Use GSAP for the animation and the assets attached. Use Three.js and shaders alongside SVG. This is for a blog about how to create motion graphics with Opus.
Es, sin duda, un salto impresionante en capacidad. Entiendo por qué las redes sociales se inundaron de gente publicando sus experimentos.
Si quieres un poco más de control sobre el resultado final, otra opción es usar HyperFrames. Es el framework de código abierto de HeyGen para convertir HTML en video. Te ofrece un flujo de trabajo probado que renderiza de la misma manera siempre, además de una vista previa en vivo, una interfaz de línea de comandos (CLI) y extras como subtítulos, voz en off y bloques prefabricados. También incluye habilidades para Claude Code que le enseñan las convenciones desde el principio, para que Claude dedique su esfuerzo (y sus tokens) al trabajo creativo en lugar de a la fontanería técnica.
Potencia tus habilidades con GSAP
Si animas con GSAP, tus habilidades se trasladan directamente a la web, específicamente estas habilidades. Las escribimos para enseñar a Claude (y a muchos otros agentes) las cosas que hacen que una animación web resista el paso del tiempo en el mundo real. Eso significa usar gsap.matchMedia() para que las animaciones se adapten a diferentes tamaños de pantalla y respeten a quienes han activado la opción de reducir movimiento. Significa animar transformaciones en lugar de propiedades de diseño para que todo se mantenga fluido, y asegurarse de limpiar correctamente la animación en los frameworks de JS. Es el trabajo minucioso que normalmente aprenderías a base de golpes. Además, todos los plugins de GSAP ahora son gratuitos gracias a Webflow, así que aprovecha para jugar con Physics2D o MorphSVG mientras estás en ello.
Si todo se mueve, nada destaca
Una semana después de aquel lunes del millón de descargas, mis feeds se ven muy diferentes. Cada dos publicaciones hay un reel de movimiento impecable, y he empezado a pasarlos de largo casi sin mirar. Es una sensación extraña para alguien que pasa la mayor parte de su tiempo pensando en la animación.
Ahora que cualquiera puede producir ese nivel de pulido en unos minutos, es un buen momento para hacer una pausa y recordar para qué sirve el movimiento. Una buena animación cumple una función. Guía la mirada, explica cómo se conectan dos ideas, muestra que algo ha cambiado o hace que una interfaz se sienta más intuitiva.
La buena noticia es que el criterio para el movimiento es algo que puedes desarrollar, y hay personas brillantes compartiendo su experiencia. Estos son algunos de mis favoritos:
- Habilidades de animación de Emil Kowalski. La filosofía de diseño de ingeniería de Emil, empaquetada para tu agente. Es una excelente manera de aprender por qué algunas animaciones se sienten bien y otras no.
- Directrices de movimiento de Material Design. Un análisis reflexivo sobre cómo el movimiento puede comunicar estructura y significado en una interfaz.
- Osmo. Una biblioteca de maravillosas animaciones web listas para producción, ideales para aprender y construir, ya sea con código personalizado o en Webflow.
- Made With GSAP. Efectos hermosos con tutoriales estructurados que los respaldan. Perfecto para inspirarse y para quienes sienten curiosidad por el código.
