Como adicionar um logo animado ao cabeçalho do seu site

Qual formato usar no logo do cabeçalho?

O logo do cabeçalho é pequeno, aparece em todas as páginas e fica ao lado da navegação, então o formato precisa ser leve e o movimento, curto.

O GIF é limitado a uma paleta de 256 cores e a uma transparência do tipo tudo ou nada, então bordas suaves e sombras ficam serrilhadas em qualquer fundo que não seja exatamente aquele usado na exportação (MDN). Ele também é pesado: em um exemplo do web.dev, um GIF de 3,7 MB virou um MP4 de 551 KB e um WebM de 341 KB (web.dev).

Para vídeo com fundo transparente, o Safari precisa de HEVC com alfa, e o Chromium e o Firefox precisam de VP9 com alfa; o guia de vídeo com fundo transparente explica a codificação.

Por que meu logo em GIF aparece como imagem estática?

Normalmente porque algo entre o seu upload e a página o converteu. Muitos seletores de logo de temas e pipelines de imagem redimensionam os uploads e os recodificam em um formato estático, como JPEG, PNG ou WebP, mantendo só o primeiro frame. Confira a origem do <img> renderizado nas ferramentas de desenvolvedor do navegador: se a URL não termina mais em .gif ou inclui parâmetros de redimensionamento, a animação foi removida.

Outras causas comuns:

• O GIF foi exportado para tocar uma vez e terminou antes de você olhar. Recarregue a página para conferir.
• Um fundo em CSS ou um wrapper com object-fit está mostrando uma imagem alternativa no lugar do GIF.
• Uma configuração de movimento reduzido em alguns navegadores ou extensões pausa imagens animadas.

Em vez de brigar com o seletor de logo, coloque a animação você mesmo no markup do cabeçalho: um bloco de código personalizado, uma seção do tema ou o template do cabeçalho. Assim você também pode trocar para um vídeo ou arquivo Rive, que ficam melhores e pesam menos que o GIF.

Como tocar a animação do logo uma vez e depois deixá-lo parado?

Com vídeo, não use loop. Um vídeo que terminou fica no último frame, então faça desse frame o seu logo em repouso. Vídeos inline e sem som podem ter reprodução automática no Chrome e no Safari do iOS (MDN, WebKit), mas inicie-o via script para poder respeitar o movimento reduzido:

<a href="/" class="logo" aria-label="Acme home">
  <video id="logo-anim" width="160" height="40" muted playsinline preload="auto"
         poster="/logo-still.png" aria-hidden="true">
    <source src="/logo.mov" type='video/quicktime; codecs="hvc1"'>
    <source src="/logo.webm" type="video/webm">
  </video>
</a>

<script>
const v = document.getElementById("logo-anim");
if (!matchMedia("(prefers-reduced-motion: reduce)").matches) {
  v.play().catch(() => {}); // blocked: the poster stays visible
}
</script>

O poster é o logo parado, então quem usa movimento reduzido, tem a reprodução automática bloqueada ou está com conexão lenta vê um cabeçalho correto. O link mantém seu nome acessível por meio de aria-label.

Com Rive, use uma state machine cuja intro termina em um estado idle e mantenha o idle sutil ou totalmente parado. Você também pode tocar a intro só na primeira página vista pelo visitante, guardando um indicador em sessionStorage, para que o logo não se repita a cada navegação.

O conjunto do Charmotion inclui esse padrão: envie o seu logo e o .riv traz uma intro de abertura que toca uma vez e termina em idle, além de reações únicas como success, que você pode disparar em eventos como um cadastro concluído (o .riv está incluído em todos os planos pagos).

Mantenha a intro bem abaixo de cinco segundos. O critério de sucesso 2.2.2 da WCAG 2.2 exige um mecanismo para pausar, parar ou ocultar movimentos automáticos que duram mais de cinco segundos ao lado de outros conteúdos (W3C), e um logo de cabeçalho em loop se encaixa nessa categoria.

Como manter o logo do cabeçalho nítido e leve?

• Reserve o espaço. Defina os atributos width e height no vídeo ou no canvas, ou aspect-ratio no CSS, para que o cabeçalho seja montado antes de o arquivo carregar. Elementos que mudam de tamanho depois do carregamento causam deslocamento de layout, que as Core Web Vitals medem como CLS (web.dev).
• Exporte no dobro do tamanho de exibição. Um logo exibido em 160 × 40 pixels CSS precisa de cerca de 320 × 80 pixels para telas de alta densidade. Um vídeo quadrado de 1080 pixels é desperdício de banda aqui.
• Corte o clipe. De um a três segundos costuma bastar. Clipes mais curtos são menores.
• Ajuste o canvas do Rive à sua caixa. Chame resizeDrawingSurfaceToCanvas() em onLoad para que a arte vetorial seja renderizada com nitidez na densidade de pixels do dispositivo (Rive).
• Não bloqueie a página. Carregue o runtime do Rive de forma assíncrona; o poster ou um <img> estático ocupa o espaço até ele ficar pronto.

Teste o cabeçalho também na largura de um celular. Muitos sites reduzem o logo no mobile; se os detalhes da animação somem nesse tamanho, mostre a marca estática ali.

Como fazer o logo reagir ao passar o mouse ou a cliques?

Uma pequena reação ao passar o mouse ou clicar pode dar vida ao logo sem que ele fique se mexendo o tempo todo. Limite-se a uma reação única e curta que volta ao estado de repouso.

Para um logo em SVG, basta uma transição CSS em :hover e :focus-visible, como uma leve mudança de escala ou rotação usando transform. Para um logo em Rive, dispare um trigger a partir dos seus próprios event handlers em vez de depender dos listeners do Rive, para que o foco pelo teclado também possa acioná-lo:

const link = document.querySelector(".logo");
const reduce = matchMedia("(prefers-reduced-motion: reduce)");

function react() {
  if (reduce.matches) return;
  r.viewModelInstance?.trigger("success").trigger();
}
link.addEventListener("mouseenter", react);
link.addEventListener("focus", react);

A API de trigger mostrada é o Data Binding do Rive para web (autoBind: true); com inputs legados, chame fire() no input do trigger. Limite a frequência da reação, por exemplo uma vez a cada poucos segundos, para que passar o ponteiro pelo cabeçalho não a repita sem parar.

O critério de sucesso 2.3.3 da WCAG 2.2 (Animation from Interactions, nível AAA) pede que o movimento acionado por interação possa ser desativado, a menos que seja essencial (W3C). Verificar prefers-reduced-motion antes de disparar resolve isso na maioria dos sites. O guia de state machine do Rive explica os triggers em mais detalhes.

Como adicionar no Webflow, WordPress ou Shopify?

O princípio é o mesmo em qualquer plataforma: coloque a animação no markup do cabeçalho, e não pelo campo de upload do logo.

• O Webflow tem suporte nativo ao Rive. Envie o .riv para Assets e arraste o elemento Rive de Add > Media para a navbar. Depois, escolha o artboard, a state machine, o ajuste (fit) e a configuração de reprodução automática (Rive).
• WordPress: o bloco Vídeo nativo tem as opções Autoplay, Loop, Muted, Play inline e Poster, então você pode montar um vídeo de cabeçalho que toca uma vez, sem código, na template part de cabeçalho de um tema de blocos (WordPress.org). Para o Rive, cole o snippet do runtime web em um bloco HTML personalizado.
• O Shopify não tem seção nativa para Rive ou Lottie. Se o seu tema oferece uma seção Custom Liquid, você pode adicionar o markup do vídeo ou do Rive ali (Shopify); caso contrário, será preciso editar a seção de cabeçalho no código do tema.

Passo a passo por plataforma: Webflow, WordPress e Shopify.

Como adicionar um logo animado ao cabeçalho do site

1. Escolha o formato. Use SVG para movimentos vetoriais simples, um arquivo Rive para uma intro com reações, ou um par de HEVC .mov e VP9 WebM para um logo pré-renderizado com fundo transparente. Evite GIF.
2. Exporte no tamanho certo. Renderize com cerca do dobro do tamanho exibido em CSS, mantenha o clipe em poucos segundos e faça o último frame ser o logo em repouso.
3. Reserve o espaço. Defina width e height ou aspect-ratio no vídeo ou no canvas para que o cabeçalho não se desloque ao carregar.
4. Toque uma vez via script. Não use loop, adicione muted e playsinline e chame play() apenas quando o movimento reduzido não estiver ativado.
5. Mantenha um fallback estático. Use o logo estático como poster, mantenha um nome acessível no link para a página inicial e confira o cabeçalho na largura de celular.

Perguntas frequentes

O logo animado do cabeçalho deve ficar em loop?

Geralmente não. Um logo que toca uma vez e para chama atenção sem competir com a navegação. Movimento contínuo por mais de cinco segundos ao lado de outro conteúdo exige um mecanismo de pausar, parar ou ocultar segundo o WCAG 2.2 SC 2.2.2, o que é complicado de adicionar a um logo.

Posso usar um SVG animado no meu logo?

Sim, para logos vetoriais planos com movimento simples, como um traço sendo desenhado ou um fade. Anime transform e opacity sempre que possível e envolva o movimento em uma verificação de prefers-reduced-motion. Movimentos complexos de personagem são mais fáceis de criar e controlar no Rive.

Um vídeo de logo com reprodução automática toca no iPhone?

Sim, se estiver sem som (muted) e tiver o atributo playsinline. O Safari do iOS só reproduz automaticamente vídeos silenciosos ou sem som que estejam visíveis na tela. Se o play() for recusado, a imagem de poster continua visível, então use o seu logo estático como poster.

Um logo animado deixa a página mais lenta?

Não, se for leve e tiver o espaço reservado. Exporte no tamanho de exibição, mantenha o clipe curto, defina width e height para evitar mudanças de layout e carregue o runtime do Rive ou o vídeo sem bloquear o resto da página.

Respostas rápidas deste guia

• Como faço a animação do logo no cabeçalho tocar uma vez?

Fontes

• Image file type and format guide, MDN Web Docs
• Replace animated GIFs with video for faster page loads, web.dev
• Autoplay guide for media and Web Audio APIs, MDN Web Docs
• Understanding SC 2.2.2: Pause, Stop, Hide, W3C WAI
• Understanding SC 2.3.3: Animation from Interactions, W3C WAI
• Cumulative Layout Shift (CLS), web.dev
• Web (JS) runtime, Rive
• Rive is natively supported in Webflow, Rive