Animação de logo no site: Rive, Lottie, SVG ou vídeo

Quatro jeitos de animar uma logo, lado a lado

Uma logo pode se mexer numa página de quatro jeitos: CSS animando um SVG que está no HTML, um player Lottie lendo uma exportação do After Effects, um player Rive lendo um arquivo .riv ou um vídeo. A logo pode ficar quase igual nos quatro. O que muda é o que cada visitante baixa, quem consegue editar o movimento e o que vê quem desativou as animações.

O player costuma pesar mais que a animação

O arquivo de animação de uma logo é pequeno. O que deixa um caminho mais pesado que outro é o código que toca a animação, que chega antes do primeiro quadro. Em 29 de outubro de 2026 baixamos cada player como publicado no npm (via jsDelivr) e o compactamos com gzip, como um servidor faria. Servidores com Brotli ou Zstandard enviam um pouco menos.

A documentação dos próprios fornecedores aponta na mesma direção. A Rive chama o canvas-lite de seu menor pacote web, porque ele deixa de fora os motores de texto, layout, áudio e scripting; para a maioria dos projetos, recomenda o webgl2, cujo motor, pela nossa medição, é umas três vezes maior. A LottieFiles estima o motor do dotLottie em cerca de 500 KB compactados e o baixa de uma CDN quando o primeiro player começa, a menos que você faça preload ou hospede o arquivo.

O caso real: a logo da Gissi

A Gissi Music Academy é uma escola de música em Bogotá que se chamava A medio tono até outubro de 2026; em 23 de outubro o site passou para o novo nome e para gissimusic.com. A logo é um lettering rosa de letras arredondadas que forma "gissi", com uma sombra amarela sob os dois pingos dos is. Nesse dia redesenhamos em vetor o arquivo da logo que a escola nos enviou, um contorno suave por letra e o miolo do g como um furo de verdade, e animamos tudo com Rive para o hero da página inicial. Os detalhes abaixo vêm do código do site e do seu histórico de commits; o case da Gissi conta o resto do projeto.

Um desenho só, todos os arquivos

As letras ficam num único arquivo de coordenadas. Um comando de build, npm run logo:build, gera a partir dele:

• o SVG estático usado na barra de navegação, no rodapé e como reserva do hero;
• a cena do Rive, escrita como formas do Rive a partir das mesmas coordenadas (nada é importado de um SVG) e compilada num arquivo .riv com a ferramenta de linha de comando da Rive;
• as logos em PNG e WebP, a imagem de compartilhamento de 1200 × 630, o favicon e os ícones do app.

Como tudo sai das mesmas coordenadas, a animação termina exatamente na pose que o SVG mostra, e a troca de um para o outro não aparece.

O que a animação faz

• Entrada. As cinco letras surgem da esquerda para a direita, cada uma cresce um pouco além do tamanho final e se acomoda. Dura cerca de 1,1 segundo.
• Repouso. Uma "onda de piano": cada letra sobe alguns pixels e volta, 0,15 segundo depois da anterior, e então a palavra fica parada. Ela toca uma vez só e dura cerca de 1,8 segundo.
• Hover ou toque. A letra sob o ponteiro achata e estica por meio segundo. São listeners do Rive para a entrada e o toque do ponteiro (pointer enter e pointer down), então funcionam com mouse e em telas sensíveis ao toque.
• Sombras. A sombra amarela de cada pingo repete o movimento do pingo 0,1 segundo depois, então o pingo se afasta dela e a sombra o alcança.

Um erro para evitar: furos pintados

A primeira versão, de 23 de outubro, pintava os espaços entre as letras com a cor de fundo da página. Em qualquer outro fundo, esses espaços apareciam como contornos em volta das letras. A correção, publicada no mesmo dia, dá a cada letra com furos uma forma de recorte com a regra par-ímpar (even-odd), então o miolo do g fica transparente e se move com a letra. No SVG, os mesmos furos são uma máscara. Uma logo que vai aparecer sobre fundos claros e escuros precisa de furos que sejam furos de verdade.

Como a página inicial carrega a logo

• O SVG estático vem primeiro. Ele está no HTML como um <img> de 4.425 bytes, cerca de 2,3 KB transferidos. Fica embaixo do canvas da animação, invisível, e o CSS o revela 1,4 segundo depois de renderizado, se a animação ainda não tiver assumido.
• O runtime e o arquivo da logo carregam juntos. O runtime é o pacote canvas-lite da Rive. O arquivo WebAssembly é servido de gissimusic.com com a versão do pacote no nome: a documentação da Rive diz que o WASM precisa bater com a versão do pacote, e hospedá-lo você mesmo dá controle sobre a origem e o cache.
• O .riv viaja compactado. A hospedagem serve arquivos .riv como um tipo binário desconhecido e não os compacta, então o build passa o arquivo pelo gzip (9.872 bytes viram 3.998) e o navegador descompacta com DecompressionStream.
• Se chegar atrasado, pula a entrada. Se o runtime chega quando a logo estática já apareceu, a animação começa numa segunda máquina de estado, Calm, que vai direto para a onda, então a logo nunca entra duas vezes.
• Movimento reduzido e Save-Data recebem só o SVG. Quem pediu movimento reduzido no sistema, ou navega com Save-Data, não baixa nem o runtime nem o .riv. Com movimento reduzido, a logo estática aparece na hora; com Save-Data, no tempo de sempre.
• Fora da tela, para. Quando a página cobre o hero na rolagem, a logo para de ser desenhada com o stopRendering da Rive e volta quando o hero reaparece.
• O nome é anunciado uma vez. O contêiner tem role="img" e o nome da escola como aria-label; o <img> tem alt vazio e o canvas fica oculto para tecnologias assistivas.

O que medimos em gissimusic.com

Em 29 de outubro de 2026 carregamos a página inicial no ar com Chromium headless e o cache desativado: três vezes numa janela de desktop de 1440 × 900, duas vezes numa janela de celular de 390 × 844 com a conexão limitada a um 4G lento (150 ms de ida e volta, 1,6 Mbps de download) e a CPU quatro vezes mais lenta, e uma vez com movimento reduzido. "Transferido" inclui os cabeçalhos HTTP.

O que os números mostram:

• O arquivo da logo tem cerca de 4 KB. O runtime que o toca, cerca de 378 KB, mais de 150 vezes o SVG estático.
• Dividir o runtime muda a conta. Na Gissi, o mesmo runtime também toca o fundo animado do hero, então a logo só acrescenta seu arquivo de 4 KB. Um site que anima apenas a logo paga o runtime inteiro por ela.
• O Rive é quase toda a diferença entre os dois carregamentos. Cerca de 428 KB dos 0,43 MB de diferença são o runtime e os dois .riv; o resto é um pequeno script de rolagem suave que também fica desligado com movimento reduzido.
• A reserva cobre as conexões lentas. No desktop sem limitação, a animação assumiu cerca de 1,4 segundo depois do início da navegação, então a logo estática nem precisou aparecer. No celular limitado, o espaço da logo ficou vazio durante os 1,4 segundo que a página espera pela entrada, a logo estática apareceu por volta de 2,6 segundos e a animação assumiu entre 6,4 e 6,5 segundos, no estado Calm e sem repetir a entrada. Nesse intervalo, o visitante viu a logo pronta, não uma caixa vazia.
• O canvas nunca foi o elemento do Largest Contentful Paint. No desktop, o LCP foi a logo SVG da barra de navegação, um <img>; no celular limitado, a imagem de fundo do hero. O web.dev lista os elementos que o LCP considera: imagens, <image> dentro de um SVG, vídeo, imagens de fundo de CSS e blocos de texto. O canvas não está na lista, e o Chromium ignora elementos com opacidade 0, como a reserva oculta. Mesmo assim, o download do runtime divide a conexão com o elemento que é o LCP; o nosso guia de Core Web Vitals cobre o resto.

Os limites: são testes de laboratório a partir de um só lugar, num só motor de navegador e com dois ou três carregamentos por configuração, não dados de campo de visitantes reais. Não medimos o uso de CPU nem a taxa de quadros da animação.

O caminho do vídeo, em números

Para o case da Gissi no nosso próprio site, gravamos a mesma entrada da página inicial em vídeo: 6 segundos em 1440 × 810 e 60 quadros por segundo, em H.264 e sem faixa de áudio. São 1.513.399 bytes, cerca de 1,5 MB. O vídeo mostra a logo e o fundo animado juntos, então a comparação não é exata, mas ele pesa umas três vezes e meia tudo o que o Rive envia para a página inicial e não responde a hover nem a toque.

O vídeo continua sendo a escolha certa quando o visual é filmagem, 3D, granulação ou efeitos que um player vetorial não desenha, ou quando a animação é uma prévia de um site e não parte dele, como no nosso portfólio. Se for usar:

• Tire o áudio ou deixe mudo. Os navegadores não bloqueiam o autoplay de um vídeo sem faixa de áudio ou com o áudio mudo.
• Use autoplay, loop, muted e playsinline para ele se comportar como um GIF, mais uma imagem de pôster. Esqueça o GIF animado: no exemplo do web.dev, um GIF de 3,7 MB virou um MP4 de 551 KB e um WebM de 341 KB.
• Um <video> pode ser o elemento LCP. Conta o pôster ou o primeiro quadro, o que vier antes, então mantenha o pôster leve.
• Com movimento reduzido, mostre o pôster e não toque sozinho. Um loop de mais de cinco segundos precisa de controles, como explica a próxima seção.

Se o que você precisa é de um filme, e não de uma logo em movimento, é outro trabalho: o nosso serviço de vídeos de lançamento cuida disso.

As regras de acessibilidade para uma logo em movimento

Cinco segundos: WCAG 2.2.2 Pausar, parar, ocultar

O critério 2.2.2 da WCAG 2.2, de nível A, cobre conteúdo em movimento que começa sozinho, dura mais de cinco segundos e aparece junto com outro conteúdo: precisa haver um jeito de pausar, parar ou ocultar, a menos que o movimento seja essencial. Uma entrada de logo que termina em um ou dois segundos e fica parada está fora. Um loop, não.

A entrada da Gissi dura cerca de 1,1 segundo. Até 29 de outubro, a onda de piano que vem depois se repetia a cada 4,5 segundos, sem controle de pausa. Quem pedia movimento reduzido nunca a via, e ela parava de ser desenhada quando a página cobria o hero, mas o documento Understanding do W3C não diz que uma configuração do sistema operacional conta como o mecanismo, então, pela nossa leitura, o loop não atendia ao 2.2.2. Encontramos o problema ao pesquisar para este artigo e mudamos no mesmo dia: agora a onda toca uma vez só. No Chromium headless, conferindo o canvas da logo a cada 100 milissegundos, a versão anterior voltava a se mexer a cada 4,5 segundos enquanto observamos; a nova para cerca de 3,5 segundos depois de a página abrir e fica parada. Passar o cursor ou tocar numa letra ainda a faz quicar, porque é o visitante quem inicia esse movimento.

O movimento que você provoca: WCAG 2.3.3 Animação a partir de interações

O critério 2.3.3 é de nível AAA: o movimento disparado por uma interação, como o achatar e esticar das letras da Gissi no hover, deve poder ser desligado, a menos que seja essencial. A técnica suficiente do W3C é a media query prefers-reduced-motion (C39). Na Gissi, com movimento reduzido o .riv nunca carrega, então esse efeito não tem como acontecer.

Movimento reduzido é responsabilidade sua, em qualquer formato

O MDN descreve o prefers-reduced-motion como o jeito de detectar que alguém pediu ao dispositivo para minimizar movimentos não essenciais, que podem causar desconforto em pessoas com distúrbios vestibulares. Nenhum player aplica isso por você. A documentação da Rive diz que não aplica o movimento reduzido automaticamente e sugere passar a preferência para o arquivo via data binding, com um caminho reduzido na máquina de estado. O README do lottie-web não fala disso, então é o seu código que decide se toca sozinho. Com CSS, é uma media query. Para uma logo, a versão reduzida mais simples é a logo parada.

Dê nome à logo uma vez só

Para tecnologias assistivas, um canvas é só um bitmap, então uma logo em Rive, ou em Lottie desenhada em canvas, precisa do nome num elemento contêiner (role="img" com aria-label) e do canvas oculto. O renderizador SVG do lottie-web pode acrescentar um título e uma descrição ao SVG que desenha, e o runtime web da Rive tem uma opção experimental que cria uma camada acessível sobre o canvas. O nosso guia de manual de marca cobre os limites de flashes e como registrar as regras de movimento, e o checklist WCAG 2.2 ajuda a testar o resto da página.

Como escolher

• CSS sobre SVG inline quando o movimento são deslocamentos, escalas e fades das partes da logo. Coloque o SVG no HTML para o CSS alcançar cada letra; carregado como <img>, o SVG é uma imagem só para a página e scripts dentro dele não rodam. Anime transform e opacity, que o navegador consegue resolver na etapa de composição, e use transform-box: fill-box para a letra escalar a partir do próprio centro, e não do centro do SVG. Animações CSS não precisam de JavaScript, e o navegador pode desacelerá-las em abas que ninguém está vendo.
• Lottie quando um motion designer monta a timeline no After Effects, exportada com o Bodymovin, ou nas ferramentas da LottieFiles, e a logo toca em vez de reagir. O lottie-web desenha em SVG, canvas ou HTML; o player completo tem 76 KB com gzip. Os arquivos dotLottie vêm compactados e podem reunir várias animações, temas e máquinas de estado, mas o player traz cerca de 500 KB de WebAssembly.
• Rive quando a logo tem estados ou reage: hover, toques, um estado de carregamento, um tema. Compensa mais quando o mesmo runtime toca outras coisas no site, como o fundo do hero da Gissi. Comece pelo canvas-lite se o arquivo não usa textos, layouts, áudio nem scripting do Rive.
• Vídeo quando o visual não pode ser desenhado com vetores e ninguém precisa interagir com ele.

Seja qual for a escolha, valem as mesmas cinco regras:

1. Publique primeiro o SVG estático, exatamente na pose em que a animação termina.
2. Carregue a animação depois do conteúdo principal e pule-a com movimento reduzido e Save-Data.
3. Pare de desenhar quando a logo sai da tela.
4. Mantenha o movimento automático abaixo de cinco segundos ou dê a ele um controle de pausa.
5. Dê nome à logo uma vez só para leitores de tela.

O que pedir a quem desenha a sua logo

• Um arquivo mestre em vetor em que cada parte que vai se mexer seja uma forma própria com nome, e cada furo seja um recorte, não um remendo na cor de fundo.
• A pose de repouso da animação, que também é a logo estática.
• Uma seção de movimento no manual de marca: durações, curvas de aceleração, o que se repete e o que nunca se mexe.
• Uma versão para movimento reduzido, quase sempre a logo parada.
• Endereços de arquivo versionados para a web. O /logo-mark.svg da Gissi ficava um dia em cache, então quem tinha visto a marca anterior continuou vendo-a na barra de navegação depois da troca; em 23 de outubro o endereço passou a levar um hash do conteúdo, como o do .riv já levava. O nosso checklist de lançamento de rebranding cobre os outros arquivos que pedem o mesmo cuidado.

Se a logo ainda vai ser encomendada, quanto custa uma identidade visual compara preços publicados; peça os arquivos para animação no mesmo briefing, porque separar as formas depois obriga a redesenhar.

Onde a Dardo entra

Desenhamos logos no serviço de criação de logotipo, construímos identidades completas em criação de marca e fazemos o trabalho de animação e WebGL em sites no desenvolvimento criativo. Se a sua logo precisa se mexer, conte para a gente onde ela vai ficar e o que deve fazer.