Logo animado para tu página web: Rive, Lottie, SVG o video

Cuatro formas de animar un logo, lado a lado

Un logo se puede mover en una página web de cuatro maneras: con CSS que anima un SVG dentro del HTML, con un reproductor de Lottie que lee una exportación de After Effects, con un reproductor de Rive que lee un archivo .riv o con un video. El logo puede verse casi igual en las cuatro. Lo que cambia es lo que descarga cada visitante, quién puede editar el movimiento y qué ve quien tiene las animaciones desactivadas.

El reproductor suele pesar más que la animación

El archivo de animación de un logo es pequeño. Lo que hace más pesada una opción que otra es el código que la reproduce, que llega antes del primer fotograma. El 29 de octubre de 2026 descargamos cada reproductor tal como está publicado en npm (a través de jsDelivr) y lo comprimimos con gzip, como lo haría un servidor. Los servidores que usan Brotli o Zstandard envían un poco menos.

La documentación de cada proveedor apunta en la misma dirección. Rive llama a canvas-lite su paquete web más pequeño, porque deja por fuera los motores de texto, layout, audio y scripting; para la mayoría de proyectos recomienda webgl2, cuyo motor, según nuestra medición, es unas tres veces más grande. LottieFiles calcula el motor de dotLottie en unos 500 KB comprimidos y lo descarga de una CDN cuando arranca el primer reproductor, salvo que lo precargues o lo alojes tú.

El caso real: el logo de Gissi

Gissi Music Academy es una escuela de música en Bogotá que se llamaba A medio tono hasta octubre de 2026; el 23 de octubre su sitio pasó al nuevo nombre y a gissimusic.com. El logo es un lettering rosado de letras redondeadas que dice "gissi", con una sombra amarilla bajo los dos puntos de las íes. Ese día redibujamos en vectores el archivo del logo que nos envió la escuela, un contorno suave por letra y el ojo de la g como un hueco real, y lo animamos con Rive para el hero de la página de inicio. Los detalles que siguen salen del código del sitio y de su historial de cambios; el caso de Gissi cuenta el resto del proyecto.

Un solo dibujo, todos los archivos

Las letras viven en un único archivo de coordenadas. Un comando de compilación, npm run logo:build, genera a partir de él:

• el SVG estático que usan la barra de navegación, el pie de página y el hero como respaldo;
• la escena de Rive, escrita como formas de Rive a partir de las mismas coordenadas (no se importa ningún SVG) y compilada a un archivo .riv con la herramienta de línea de comandos de Rive;
• los logos en PNG y WebP, la imagen para compartir de 1200 × 630, el favicon y los íconos de la app.

Como todo sale de las mismas coordenadas, la animación termina exactamente en la pose que muestra el SVG, y el cambio de uno a otro no se nota.

Qué hace la animación

• Entrada. Las cinco letras aparecen de izquierda a derecha, cada una crece un poco más allá de su tamaño final y se asienta. Dura cerca de 1,1 segundos.
• Reposo. Una "ola de piano": cada letra sube unos pocos píxeles y vuelve, 0,15 segundos después de la anterior, y luego la palabra se queda quieta. Se reproduce una sola vez y dura cerca de 1,8 segundos.
• Hover o toque. La letra bajo el puntero se aplasta y se estira durante medio segundo. Son listeners de Rive para la entrada y la pulsación del puntero (pointer enter y pointer down), así que funcionan con mouse y en pantallas táctiles.
• Sombras. La sombra amarilla de cada punto repite el movimiento de su punto 0,1 segundos después, así que el punto se separa de ella y la sombra lo alcanza.

Un error que conviene evitar: huecos pintados

La primera versión, del 23 de octubre, pintaba los espacios entre letras del color de fondo de la página. Sobre cualquier otro fondo esos espacios aparecían como contornos alrededor de las letras. La corrección, publicada ese mismo día, le da a cada letra con huecos una forma de recorte con la regla par-impar (even-odd), así que el ojo de la g queda transparente y se mueve con la letra. En el SVG, esos mismos huecos son una máscara. Un logo que va a vivir sobre fondos claros y oscuros necesita huecos que de verdad sean huecos.

Cómo lo carga la página de inicio

• Primero llega el SVG estático. Está en el HTML como un <img> de 4.425 bytes, unos 2,3 KB transferidos. Queda debajo del canvas de la animación, invisible, y CSS lo muestra 1,4 segundos después de pintarse si la animación todavía no ha tomado el control.
• El runtime y el archivo del logo cargan a la vez. El runtime es el paquete canvas-lite de Rive. Su archivo WebAssembly se sirve desde gissimusic.com con la versión del paquete en el nombre: la documentación de Rive dice que el WASM debe coincidir con la versión del paquete, y alojarlo tú mismo te da control sobre su origen y su caché.
• El .riv viaja comprimido. El hosting sirve los .riv como un tipo binario desconocido y no los comprime, así que la compilación los pasa por gzip (9.872 bytes quedan en 3.998) y el navegador los descomprime con DecompressionStream.
• Si llega tarde, se salta la entrada. Si el runtime llega cuando el logo estático ya apareció, la animación arranca en una segunda máquina de estado, Calm, que va directo a la ola, así que el logo nunca aparece dos veces.
• Movimiento reducido y Save-Data reciben solo el SVG. Quien pidió movimiento reducido en su sistema, o navega con Save-Data, no descarga ni el runtime ni el .riv. Con movimiento reducido, el logo estático aparece de inmediato; con Save-Data, aparece en su tiempo habitual.
• Fuera de pantalla, se detiene. Cuando la página tapa el hero al hacer scroll, el logo deja de dibujarse con stopRendering de Rive y vuelve cuando el hero reaparece.
• El nombre se anuncia una vez. El contenedor tiene role="img" y el nombre de la escuela como aria-label; el <img> tiene el alt vacío y el canvas está oculto para las tecnologías de asistencia.

Lo que medimos en gissimusic.com

El 29 de octubre de 2026 cargamos la página de inicio en vivo con Chromium sin interfaz y la caché desactivada: tres veces en una ventana de escritorio de 1440 × 900, dos veces en una ventana de celular de 390 × 844 con la conexión limitada a un 4G lento (150 ms de ida y vuelta, 1,6 Mbps de bajada) y la CPU cuatro veces más lenta, y una vez con movimiento reducido. "Transferido" incluye los encabezados HTTP.

Lo que dicen los números:

• El archivo del logo pesa unos 4 KB. El runtime que lo reproduce, unos 378 KB, más de 150 veces el SVG estático.
• Compartir el runtime cambia la cuenta. En Gissi, el mismo runtime reproduce también el fondo animado del hero, así que el logo solo suma su archivo de 4 KB. Un sitio que anima únicamente su logo paga el runtime completo por él.
• Rive explica casi toda la diferencia entre las dos cargas. Unos 428 KB de los 0,43 MB de diferencia son el runtime y los dos .riv; el resto es un pequeño script de scroll suave que también se apaga con movimiento reducido.
• El respaldo cubre las conexiones lentas. En escritorio sin limitar, la animación tomó el control unos 1,4 segundos después de iniciar la navegación, así que el logo estático no tuvo que aparecer. En el celular limitado, el espacio del logo quedó vacío durante los 1,4 segundos que la página espera la entrada, el logo estático apareció hacia los 2,6 segundos y la animación tomó el control entre 6,4 y 6,5 segundos, en el estado Calm y sin repetir la entrada. Entre una cosa y otra, el visitante vio el logo terminado, no una caja vacía.
• El canvas nunca fue el elemento del Largest Contentful Paint. En escritorio, el LCP fue el logo SVG de la barra de navegación, un <img>; en el celular limitado, la imagen de fondo del hero. web.dev enumera los elementos que cuenta el LCP: imágenes, <image> dentro de un SVG, video, imágenes de fondo de CSS y bloques de texto. El canvas no está en la lista, y Chromium ignora los elementos con opacidad 0, como el respaldo oculto. Aun así, la descarga del runtime comparte la conexión con el elemento que sí es LCP; nuestra guía de Core Web Vitals cubre el resto.

Los límites: son pruebas de laboratorio desde un solo lugar, en un solo motor de navegador y con dos o tres cargas por configuración, no datos de campo de visitantes reales. No medimos el uso de CPU ni la tasa de fotogramas de la animación.

La opción del video, en números

Para el caso de Gissi en nuestro propio sitio grabamos la misma entrada de la página de inicio como video: 6 segundos a 1440 × 810 y 60 fotogramas por segundo, en H.264 y sin pista de audio. Pesa 1.513.399 bytes, unos 1,5 MB. El video muestra el logo y el fondo animado juntos, así que no es una comparación exacta, pero equivale a unas tres veces y media todo lo que Rive envía a la página de inicio, y no puede responder a un hover ni a un toque.

El video sigue siendo la opción correcta cuando el look es metraje, 3D, grano o efectos que un reproductor vectorial no dibuja, o cuando la animación es una vista previa de un sitio y no parte de él, como en nuestro portafolio. Si lo usas:

• Quita el audio o silencialo. Los navegadores no bloquean la reproducción automática de un video sin pista de audio o con el audio silenciado.
• Usa autoplay, loop, muted y playsinline para que se comporte como un GIF, más una imagen de póster. Olvídate del GIF animado: en el ejemplo de web.dev, un GIF de 3,7 MB quedó en un MP4 de 551 KB y un WebM de 341 KB.
• Un <video> puede ser el elemento LCP. Cuenta el póster o el primer fotograma, lo que llegue primero, así que mantén liviano el póster.
• Con movimiento reducido, muestra el póster y no lo reproduzcas solo. Un loop de más de cinco segundos necesita controles, como explica la siguiente sección.

Si lo que necesitas es una pieza audiovisual y no un logo en movimiento, es otro trabajo: lo cubre nuestro servicio de videos de lanzamiento.

Las reglas de accesibilidad para un logo en movimiento

Cinco segundos: WCAG 2.2.2 Pausar, detener, ocultar

El criterio 2.2.2 de WCAG 2.2, de nivel A, cubre el contenido en movimiento que arranca solo, dura más de cinco segundos y se muestra junto a otro contenido: debe existir una forma de pausarlo, detenerlo u ocultarlo, salvo que el movimiento sea esencial. Una entrada de logo que termina en uno o dos segundos y se queda quieta no entra. Un loop sí.

La entrada de Gissi dura cerca de 1,1 segundos. Hasta el 29 de octubre, la ola de piano que la sigue se repetía cada 4,5 segundos sin control de pausa. Quien pedía movimiento reducido nunca la veía, y dejaba de dibujarse cuando la página tapaba el hero, pero el documento Understanding del W3C no dice que una configuración del sistema operativo cuente como el mecanismo, así que, según nuestra lectura, el loop no cumplía el 2.2.2. Lo encontramos al investigar para este artículo y lo cambiamos el mismo día: ahora la ola se reproduce una sola vez. En Chromium sin interfaz, revisando el canvas del logo cada 100 milisegundos, la versión anterior volvía a moverse cada 4,5 segundos mientras la observamos; la nueva se detiene unos 3,5 segundos después de abrir la página y queda quieta. Pasar el cursor o tocar una letra todavía la hace rebotar, porque ese movimiento lo inicia el visitante.

El movimiento que tú provocas: WCAG 2.3.3 Animación desde interacciones

El criterio 2.3.3 es de nivel AAA: el movimiento que dispara una interacción, como el rebote de las letras de Gissi al pasar el cursor, debe poder desactivarse salvo que sea esencial. La técnica suficiente del W3C es la media query prefers-reduced-motion (C39). En Gissi, con movimiento reducido el .riv nunca se carga, así que el rebote no puede ocurrir.

El movimiento reducido te toca a ti, en cualquier formato

MDN describe prefers-reduced-motion como la forma de detectar que alguien le pidió a su dispositivo minimizar el movimiento no esencial, que puede causar malestar a personas con trastornos vestibulares. Ningún reproductor lo aplica por ti. La documentación de Rive dice que no aplica el movimiento reducido de forma automática y sugiere pasar la preferencia al archivo con data binding, con un camino reducido en la máquina de estado. El README de lottie-web no lo menciona, así que tu código decide si reproduce solo. Con CSS es una media query. Para un logo, la versión reducida más simple es el logo quieto.

Dale nombre al logo una sola vez

Para las tecnologías de asistencia, un canvas es solo un mapa de bits, así que un logo de Rive, o uno de Lottie dibujado en canvas, necesita su nombre en un elemento contenedor (role="img" con un aria-label) y el canvas oculto. El renderizador SVG de lottie-web puede añadir un título y una descripción al SVG que dibuja, y el runtime web de Rive tiene una opción experimental que construye una capa accesible sobre el canvas. Nuestra guía del manual de marca cubre los límites de destellos y cómo dejar por escrito las reglas de movimiento, y el checklist WCAG 2.2 te ayuda a revisar el resto de la página.

Cómo elegir

• CSS sobre SVG en línea cuando el movimiento son desplazamientos, escalas y fundidos de las partes del logo. Pon el SVG dentro del HTML para que CSS llegue a cada letra; cargado como <img>, el SVG es una sola imagen para la página y los scripts que tenga no se ejecutan. Anima transform y opacity, que el navegador puede resolver en la etapa de composición, y usa transform-box: fill-box para que una letra escale desde su propio centro y no desde el del SVG. Las animaciones CSS no necesitan JavaScript, y el navegador puede bajarles el ritmo en pestañas que nadie está mirando.
• Lottie cuando un motion designer arma la línea de tiempo en After Effects, exportada con Bodymovin, o en las herramientas de LottieFiles, y el logo se reproduce en lugar de reaccionar. lottie-web dibuja en SVG, canvas o HTML; su reproductor completo pesa 76 KB con gzip. Los archivos dotLottie vienen comprimidos y pueden reunir varias animaciones, temas y máquinas de estado, pero el reproductor trae unos 500 KB de WebAssembly.
• Rive cuando el logo tiene estados o reacciona: hover, toques, un estado de carga, un tema. Rinde más cuando el mismo runtime reproduce otras cosas del sitio, como el fondo del hero de Gissi. Empieza por canvas-lite si el archivo no usa textos, layouts, audio ni scripting de Rive.
• Video cuando el look no se puede dibujar con vectores y nadie necesita interactuar con él.

Elijas la que elijas, aplican las mismas cinco reglas:

1. Publica primero el SVG estático, exactamente en la pose donde termina la animación.
2. Carga la animación después del contenido principal y sáltala con movimiento reducido y Save-Data.
3. Deja de dibujar cuando el logo sale de la pantalla.
4. Mantén el movimiento automático por debajo de cinco segundos o dale un control de pausa.
5. Nombra el logo una sola vez para los lectores de pantalla.

Qué pedirle a quien diseña tu logo

• Un archivo maestro en vectores donde cada parte que se va a mover sea una forma propia con nombre, y cada hueco sea un recorte, no un parche del color de fondo.
• La pose de reposo de la animación, que es también el logo estático.
• Una sección de movimiento en el manual de marca: duraciones, curvas de aceleración, qué se repite y qué nunca se mueve.
• Una versión para movimiento reducido, que casi siempre es el logo quieto.
• Direcciones de archivo con versión para la web. El /logo-mark.svg de Gissi quedaba en caché un día, así que quien había visto la marca anterior la siguió viendo en la barra de navegación después del cambio; el 23 de octubre su dirección pasó a llevar un hash del contenido, como ya la tenía el .riv. Nuestro checklist de lanzamiento de página web y nueva marca cubre los demás archivos que necesitan el mismo cuidado.

Si todavía vas a encargar el logo, cuánto cuesta un logo en Colombia compara precios publicados; pide los archivos para animación en el mismo brief, porque separar las formas después obliga a redibujar.

Dónde entra Dardo

Diseñamos logos con nuestro servicio de diseño de logo, construimos identidades completas con creación de marca y hacemos el trabajo de animación y WebGL en sitios web con desarrollo creativo. Si tu logo necesita moverse, cuéntanos dónde va a vivir y qué debe hacer.