No tienes que saber animar
Ves animaciones en el feed todos los días. Un botón que se abre. Unas barras que se vuelven línea. Un logo que se arma con puntos. Y piensas que eso es trabajo de un diseñador, o de una semana en After Effects.
Ya no. Desde que salió Claude Opus 5.5, el 22 de septiembre de 2026, Claude escribe esas animaciones en código. Charlie Hills publicó un tablero con 16. Yo tomé las mismas 16 y las rehice con los diseños y los datos de mi web.
Lo que aprendí haciéndolas: el trabajo ya no es animar. Es saber nombrar lo que quieres. Cada movimiento tiene un nombre. Cuando lo dices, Claude escribe justo ese movimiento.
Aquí van las 16, en 4 grupos. Cada una con su nombre, para qué sirve y un prompt listo para copiar.
Cómo se pide una animación
No me salieron con un solo prompt. Cada una pasó por varias rondas. Estos son los 3 pasos que funcionaron.
Escoge un solo movimiento
No le pidas "hazme algo bonito". Pídele una cosa: un botón que se abre, una lista que entra, un número que crece. Una animación, un movimiento.
Nombra cada momento
Dile cómo empieza, qué cambia en el medio y cómo termina. Si tienes una referencia, una captura o un video, pásasela. Y usa el nombre del movimiento: morph, stagger, spring. Con el nombre, Claude usa la técnica correcta de una.
Pídela en HTML y corrígela por rondas
Pide un solo archivo HTML. Míralo moverse y dile qué cambiar: "más lento al final", "que la tarjeta no se salga del marco". La primera versión casi nunca queda. Ajustas hasta que se vea como la imaginaste.
En cada prompt de abajo, lo que va entre corchetes lo cambias por lo tuyo: tus palabras, tus colores, tus datos.
Grupo 1 · Cómo se mueven las cosas
Las 4 básicas. Si solo aprendes cuatro nombres, que sean estos.
1 · Morph · una forma que se vuelve otra
El botón de mi web se vuelve la agenda. Tiene tres momentos: empieza como botón, la caja se estira y termina en la agenda. El truco es que la caja nunca desaparece. Es la misma, cambiando de tamaño.
Úsalo para: el botón "agenda", "ver demo" o "comprar" de tu página, que se abre en lo que promete.
2 · Stagger · en cascada
El buscador de mi Biblioteca. Primero el texto se escribe letra por letra. Después las guías entran una detrás de otra, con una décima de segundo entre cada una. Si entran todas juntas, se ve plano.
Úsalo para: listas, resultados de búsqueda, menús, la sección de servicios de tu página.
3 · Spring · el resorte
Las tarjetas que caen. Cada una se pasa un poquito de su lugar y vuelve, como si pesara. Ese rebotecito la hace sentir real.
Úsalo para: notificaciones, tarjetas que llegan, un logo que aterriza al final de un video.
4 · Easing · sale rápido, frena suave
El zoom a mis cifras. La cámara sale rápido y frena suave, como un carro que llega al semáforo. En una buena animación, nada se mueve a velocidad constante.
Úsalo para: cualquier cosa que se desplace. Zooms, entradas, cambios de lugar. Si algo se ve robótico, casi siempre le falta easing.
Grupo 2 · Interfaces
Lo que hace que una web se sienta cara. No es el diseño quieto. Es cómo se mueve cuando la tocas.
5 · Crossfade · fundido cruzado
Las pestañas. Tocas otra, y lo viejo se desvanece mientras lo nuevo aparece, al mismo tiempo. Sin crossfade, el cambio da un salto.
Úsalo para: pestañas, testimonios que rotan, un antes y después.
6 · Shared element · elemento compartido
La guía que se abre. Tocas la tarjeta y su título viaja hasta arriba de la página nueva. Tu ojo lo sigue y no se pierde.
Úsalo para: una tarjeta de producto que se abre en su página, un portafolio, un catálogo.
7 · Magnification · la lupa
El menú de abajo. Los íconos crecen cuando el cursor se acerca, y el más cercano crece más. Como una lupa que viaja contigo.
Úsalo para: menús de íconos, una fila de logos de clientes, una galería.
8 · Blur · el desenfoque
Las cifras. Todo se desenfoca menos la que importa: más de 250 personas formadas. El desenfoque le dice al ojo dónde mirar.
Úsalo para: resaltar un dato en una presentación, el plan recomendado en tu tabla de precios.
Grupo 3 · Texto e imagen
Las letras también se animan. Y las fotos.
9 · Mask · la máscara
La palabra "control" de mi web. El texto funciona como una ventana, y por dentro sube el color. La letra no cambia. Cambia lo que se ve a través de ella.
Úsalo para: el titular de tu página, la portada de un Reel, una palabra clave que quieras que se recuerde.
10 · Variable font · la fuente variable
El logo que se estira. Es una sola fuente con perillas de grosor y de ancho, y Claude las mueve. Una sola fuente, muchas formas.
Úsalo para: tu logo o un titular que respira en la intro de un video.
11 · Layout animation · todo se reacomoda
Mi web, del celular al computador. Cada bloque viaja a su nuevo lugar, en vez de saltar. Así el ojo entiende que es la misma página.
Úsalo para: mostrar tu web en celular y en computador, reorganizar un tablero, ordenar una lista.
12 · Clip path · el recorte
La foto del curso. Aparece por una ventana que se va abriendo. Como destapar un regalo.
Úsalo para: revelar la portada de un curso, un producto nuevo, el resultado de un antes y después.
Grupo 4 · Datos y 3D
Los números también se mueven. Y una pantalla plana puede tener fondo.
13 · Path morph · de barras a línea
Mis cifras en barras: 10 empresas, 30 aplicaciones, 31 tableros, 50 flujos y agentes. Las barras se vuelven una línea: la punta de cada barra viaja hasta su punto. El dato es el mismo, cambia la forma.
Úsalo para: un reporte de ventas, el crecimiento de tu cuenta, cualquier dato donde importe la tendencia.
14 · Stroke draw · el trazo
El cerebro de una empresa. Las líneas se van dibujando, y un punto de luz corre de los procesos a las decisiones. Así se ve que algo fluye.
Úsalo para: explicar un proceso, tu forma de trabajar, una automatización, un embudo de ventas.
15 · Perspective · la profundidad
Las páginas de mi web. Giran con profundidad: la de adelante se ve grande y la de atrás, pequeña. Una pantalla plana que parece tener fondo.
Úsalo para: mostrar varias pantallas de tu web o tu app de un solo golpe.
16 · Particles · las partículas
Mi logo. 372 puntos sueltos se acomodan hasta formarlo. Hecho con mucho amor, como dice mi web.
Úsalo para: la intro o el cierre de un video, un lanzamiento, la pantalla de carga de tu app.
Lo que esto no hace
Prefiero que lo sepas antes de pegar el primer prompt.
- No sale de un solo prompt. Cada una de mis 16 pasó por varias rondas de corrección.
- No es un video todavía. Claude te entrega la animación en código. Para el Reel, la grabas en pantalla o la conviertes en video. Yo uso Remotion, una herramienta que convierte código en video, y también la manejo con Claude.
- No trae tu marca. Sin tus colores, tus palabras y tus datos, te entrega algo genérico. Por eso cada prompt trae corchetes.
Lo que tienes que recordar
- Un movimiento por animación. Nada de "hazme algo bonito".
- Nombra cómo empieza, qué cambia en el medio y cómo termina.
- Pídela en un solo archivo HTML y corrígela por rondas.
- Los 16 nombres: morph, stagger, spring, easing, crossfade, shared element, magnification, blur, mask, variable font, layout animation, clip path, path morph, stroke draw, perspective y particles.
- Ponle siempre tus colores, tus palabras y tus datos.
¿Quieres que lo hagamos con tu marca?
Si te quedó alguna duda concreta: comenta MOTION en el Reel o escríbeme por DM en @santaia.lab.