Diseño · Probado
Anima tu logo con Claude Opus 5.5: una intro de seis segundos para tu historia
Desde que salió Claude Opus 5.5, los diseñadores publican gráficos animados que el modelo escribió como código: logos que se dibujan solos, gráficas que se transforman, textos que se deslizan hasta su sitio. Sin After Effects ni modelo de vídeo: solo HTML, SVG y CSS.
El 27 de septiembre de 2026 probamos la versión útil más sencilla para una marca pequeña: una intro de logo de seis segundos para una historia de Instagram. El logo salió de Ciyo y la animación de Opus 5.5 en claude.ai, y renderizamos cada fotograma para revisarlo. Ciyo no ejecuta Claude Opus 5.5; el paso de animación se hizo en la propia aplicación de Anthropic.
Por qué código y no un modelo de vídeo
Un modelo de vídeo pinta cada fotograma como píxeles y puede redibujar tu logo de forma algo distinta en cada uno. El código mueve las formas vectoriales reales, así que el logo del último fotograma es exactamente el logo que le diste, exactamente en tus colores y a cualquier tamaño.
La contrapartida es el estilo. La animación hecha con código es limpia y geométrica: líneas que se dibujan, barridos, rebotes y fundidos. Para un clip con humo, aire cinematográfico o aspecto fotográfico, un modelo de vídeo sigue siendo la mejor herramienta.
Publicado el 2026-09-26. El autor compartió 16 gráficos animados hechos con Opus 5.5 en Claude Code y su método: elegir un solo movimiento, mostrar a Claude una referencia y nombrar cada estado, y después pedir HTML y SVG y corregirlo ronda a ronda. En nuestro encargo usamos la misma idea de nombrar cada estado con sus tiempos.
Empieza con un logo vectorial limpio
La animación con código necesita formas, no píxeles. Nuestro logo para Rook & Rabbit, un café de juegos de mesa ficticio, se generó en Ciyo con GPT Image 2.5 Flare, se convirtió en SVG con la herramienta Vector (vectorizar) y se limpió hasta dejar dos colores exactos: verde oscuro #1F4D3A y crema #F3E9D2. El archivo tiene 52 trazados.
Si tu logo es un PNG, vectorízalo primero. Opus solo puede animar lo que puede separar.
El encargo: nombra cada estado y su tiempo
Adjuntamos el SVG y describimos los seis segundos, segundo a segundo. Nombrar cada estado, su inicio y su final marca la diferencia entre una animación utilizable y una vaga.
Anima el logo adjunto para los primeros 6 segundos de una historia de Instagram de Rook & Rabbit, un café de juegos de mesa. Haz un único archivo HTML autónomo, de 1080 x 1920, con SVG en línea y CSS o JavaScript, sin bibliotecas ni fuentes externas. Usa los trazados del logo tal como están. Movimiento: 0-1 s, pantalla crema; 1-2.5 s, se dibuja el contorno de la torre; 2.5-3.5 s, se rellena de verde; 3.5-4.5 s, las orejas del conejo asoman con un pequeño rebote; 4.5-5.5 s, las palabras aparecen con un fundido subiendo desde abajo; 5.5-6 s, pausa. Usa solo #1F4D3A y #F3E9D2. Reprodúcelo una vez y detente en el último fotograma.Revisó sus propios fotogramas y cambió un paso
Opus 5.5 tardó unos dos minutos. Creó el archivo, renderizó fotogramas en los momentos clave y los miró. Luego cambió un paso por su cuenta: el relleno verde aparecía con un fundido, lo que producía durante un segundo un verde pálido intermedio, así que lo sustituyó por un barrido de abajo arriba que mantiene el relleno en los dos colores de la marca.
También omitió el fondo cuadrado crema del logo, porque la pantalla ya es crema, y colocó el logo un poco por encima del centro para dejar sitio a los botones de Instagram.
Lo que medimos en 181 fotogramas
Renderizamos el HTML a 30 fotogramas por segundo y contamos, en cada fotograma, la proporción de píxeles en los dos colores de la marca. El código en sí no contiene ningún otro color, 51 de los 52 trazados del logo están intactos (el que falta es el fondo cuadrado) y las fases empiezan en los segundos 1, 2.5, 3.5 y 4.5, como pedía el encargo.
Durante el dibujo, el relleno y las orejas, al menos el 99.4% de cada fotograma estaba en colores de la marca; el resto son bordes suavizados. La única caída son las palabras: mientras aparecen con el fundido pasan por un verde pálido, y a los 4.9 segundos solo el 96.5% de los píxeles es exacto. Eso es lo que hace un fundido, y nuestro encargo pedía uno. El resumen de Opus decía que todos los fotogramas se mantienen en los dos colores salvo en los bordes; eso se cumple en el relleno, no en las palabras que aparecen con el fundido.
Conviértelo en una historia sin salirte de la marca
El resultado es un archivo HTML, no un vídeo. Ábrelo a 1080 × 1920 y graba la pantalla, o renderiza los fotogramas y únelos en un MP4. Compara el último fotograma con el archivo de tu logo antes de publicar.
Si necesitas una paleta estricta, pide barridos y desplazamientos en lugar de fundidos, y dilo en el encargo. Guarda el logo, los colores y los tiempos en un único prompt, y cada animación futura partirá de la misma marca.
Animación de logos con Claude Opus 5.5
¿Puede Claude Opus 5.5 hacer gráficos animados?
Sí, como código. En nuestra prueba del 27 de septiembre de 2026 convirtió un logo SVG en una animación HTML de seis segundos con los tiempos que le pedimos.
¿Mantiene los colores exactos de mi marca?
En el código, sí: solo los dos colores que le dimos. En los fotogramas renderizados, los fundidos crean tonos intermedios; pide barridos y desplazamientos si eso te importa.
¿Cómo lo publico en Instagram?
Abre el HTML a 1080 × 1920 y graba la pantalla, o renderiza los fotogramas en un MP4, y después sube el vídeo como historia.
¿Puedo hacerlo dentro de Ciyo?
Ciyo no ejecuta Claude Opus 5.5. Crea y vectoriza el logo en Ciyo y después anímalo con Opus 5.5 en claude.ai.
Crea primero el logo en Ciyo
Genera el símbolo, conviértelo en vector y fija los colores; así la animación parte de un archivo limpio.