# Logos animados: formas simples de dar vida a um logo [Canonical HTML page](https://gradiently.design/pt-br/guide/animated-logo) Uma animação de logo deve parecer o logo respirando fundo, e não cumprindo uma coreografia. Estas são as poucas técnicas que funcionam e as regras que as mantêm de bom gosto. ## The short version - Um logo animado é o logo de uma marca com um movimento curto acrescentado, como uma revelação, um traço que se desenha sozinho, peças que se montam ou uma cor que muda. - A maioria das animações de logo para aberturas e encerramentos funciona melhor com cerca de um a três segundos, terminando exatamente no logo estático. - Uma ideia por animação já basta, e o movimento deve combinar com a personalidade da marca, do mesmo jeito que as cores e a tipografia. - Sites podem animar logos com SVG e CSS ou com arquivos Lottie, enquanto vídeo precisa de MP4, e-mail precisa de GIF e edição precisa de um formato com transparência. - Todo logo animado precisa de uma versão estática, para tamanhos pequenos, impressão e pessoas que preferem movimento reduzido. Um **logo animado** é o seu logo com um movimento curto e intencional: ele se revela, desenha as próprias linhas, se monta a partir das suas partes, muda de cor ou respira suavemente em loop. Os melhores são breves, em geral de um a três segundos numa abertura, e sempre terminam exatamente no logo que as pessoas já conhecem. Pense nele como o logo chegando, e não se apresentando. ## Cinco formas de animar um logo Quase toda boa animação de logo é uma de cinco técnicas, às vezes duas combinadas. Escolha a que combina com a forma do seu logo e com o caráter da marca. | Técnica | O que acontece | Combina com | | --- | --- | --- | | Revelação | O logo surge com fade, cortina ou máscara | Qualquer logo; a escolha mais segura | | Traçado | As linhas se desenham sozinhas e depois se preenchem | Marcas feitas de linhas, monogramas, assinaturas | | Montagem | As peças deslizam ou crescem até o lugar | Logos feitos de formas distintas | | Deslocamento | Uma cor ou um gradiente percorre o logo | Logos com gradiente e logotipos ousados | | Loop contínuo | Uma respiração ou um brilho sutil e sem fim | Telas de carregamento, telas de palco, transmissões ao vivo | Comece por uma revelação. Só desça a lista quando a forma do logo der um motivo. ## Regras que mantêm uma animação de logo de bom gosto Uma animação de logo se repete muitas vezes: no início de cada vídeo, a cada carregamento de página, em cada evento. Qualquer coisa esperta cansa rápido. A contenção é o que permite às pessoas gostar dela pela centésima vez. Os [princípios de motion design](https://gradiently.design/pt-br/guide/motion-design-principles) explicam o raciocínio com mais profundidade. ### Evite - Animações mais longas que a mensagem que introduzem - Girar, quicar ou explodir o logo - Terminar numa pose que não é o logo de verdade - Movimento que contradiz o caráter da marca - Só uma versão, sem reserva estática ### Faça - De um a três segundos para aberturas e encerramentos - Uma ideia, bem executada - Terminar exatamente no logo estático e segurá-lo - Marcas calmas se movem devagar, marcas animadas podem se mover com energia - Manter um logo estático para tamanhos pequenos e impressão Combine o movimento com a marca do mesmo jeito que combina cores e tipografia. O logo de um escritório de advocacia pode surgir num fade de um segundo com uma suavização leve. O de um festival de música pode entrar num estalo, com um pequeno exagero. A [personalidade da marca](https://gradiently.design/pt-br/guide/brand-personality) ajuda a nomear primeiro o caráter, e a [suavização (easing)](https://gradiently.design/pt-br/guide/easing) o transforma em curvas. ## Como fazer uma animação de logo com traçado em SVG O efeito de traçado usa um truque bacana do SVG. Um traço pode ser desenhado como pontilhado, e se um segmento tem o comprimento do caminho inteiro, você pode fazê-lo entrar deslizando ao animar o deslocamento. Definir `pathLength="1"` no caminho simplifica as contas: o caminho conta como uma unidade de comprimento, seja qual for o comprimento real. ```html ``` Um monograma N como um único caminho. O nome acessível permanece no SVG, faça a animação o que fizer. ```css .draw { stroke-dasharray: 1; stroke-dashoffset: 1; /* hidden: the dash starts one full length away */ animation: draw 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards; } @keyframes draw { to { stroke-dashoffset: 0; } /* drawn */ } @media (prefers-reduced-motion: reduce) { .draw { animation: none; stroke-dashoffset: 0; } } ``` A linha se desenha sozinha em 1,2 segundo com uma suavização ease-in-out e simplesmente aparece para quem prefere movimento reduzido. ## Animando um logo com gradiente Logos com gradiente já têm um movimento embutido: deixe a cor viajar. Um deslocamento lento do gradiente por um logotipo ou ícone parece luz passando pela superfície, e mantém a forma totalmente parada, o que ajuda a legibilidade. O segredo de um loop limpo é um gradiente que termina na cor em que começa, para que a repetição não tenha emenda. Violeta, rosa, violeta: `linear-gradient(90deg, #6d28d9 0%, #db2777 50%, #6d28d9 100%)` Um gradiente simétrico. Deslocado para o lado exatamente pela própria largura, ele se alinha consigo mesmo, então o brilho se repete para sempre sem salto. ```css .wordmark { background: linear-gradient(90deg, #6d28d9 0%, #db2777 50%, #6d28d9 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; } @keyframes shimmer { to { background-position: 200% 0; } } @media (prefers-reduced-motion: reduce) { .wordmark { animation: none; } } ``` A cor percorre as letras a cada seis segundos, em velocidade constante, para que o loop nunca hesite. Texto com gradiente tem regras próprias de legibilidade; veja [texto com gradiente em CSS](https://gradiently.design/pt-br/guide/css-gradient-text). E garanta que o logo também exista numa cor chapada só, como explicam os [logos com gradiente](https://gradiently.design/pt-br/guide/gradient-logo). ## Quanto tempo um logo animado deve durar - **Aberturas e encerramentos de vídeo:** cerca de um a três segundos, e depois segure o logo pronto por um instante. - **Cabeçalho de site:** toque uma vez, rápido, na primeira visita; nunca a cada mudança de página. - **Telas de carregamento:** um loop contínuo lento, que não pareça impaciente. - **Telas de palco e transmissões:** um loop bem lento, já que pode ficar horas na tela. O logotipo Northlight centralizado num fundo de gradiente largo, como o quadro final de uma abertura de logo O último quadro de uma abertura deve ser o logo exatamente como aparece em todo lugar, sobre o fundo habitual da marca. ## Em que formato exportar um logo animado | Onde vai rodar | Formato | Observações | | --- | --- | --- | | Site ou app | SVG com CSS, ou um arquivo Lottie | Nítido em qualquer tamanho, arquivos minúsculos, pode respeitar o movimento reduzido | | Vídeo para redes sociais | MP4 | Colocado sobre um fundo; não precisa de transparência | | Edição de vídeo | Um formato com transparência, como ProRes 4444 | Para que editores possam colocá-lo sobre qualquer filmagem | | Assinatura de e-mail ou newsletter | GIF | Mantenha curto e pequeno; o primeiro quadro deve ser o logo completo | | Apresentações | MP4, ou a animação da própria ferramenta | Teste no computador que vai apresentar | Lottie é um formato de animação em JSON, muitas vezes exportado do After Effects, que roda em players web e de apps. Para saber mais sobre loops e tipos de arquivo, veja [GIF ou MP4](https://gradiently.design/pt-br/guide/gif-vs-mp4). E, seja o que for que você exportar, combine com um fundo que combine: um logo animado sobre um campo calmo e parado se lê melhor do que sobre uma filmagem carregada. [Colocar um logo sobre um gradiente](https://gradiently.design/pt-br/guide/logo-on-gradient-background) trata de contraste e posicionamento. ## FAQ ### Quanto tempo um logo animado deve durar? Em aberturas e encerramentos de vídeo, cerca de um a três segundos, terminando no logo estático e segurando-o por um instante. Loops contínuos para telas podem ser mais longos e lentos. ### Qual é a forma mais fácil de animar um logo? Uma revelação simples: um fade, uma cortina ou uma máscara que descobre o logo em cerca de um segundo. Funciona para qualquer logo e é difícil de errar. ### Em que formato deve ser um logo animado? SVG com CSS ou Lottie para sites e apps, MP4 para vídeo em redes sociais, um formato com transparência como ProRes 4444 para edição e GIF para e-mail. ### Como faço um logo se desenhar sozinho? Em SVG, defina pathLength como 1 no caminho, dê a ele um stroke-dasharray de 1 e anime o stroke-dashoffset de 1 a 0. ### Ainda preciso de um logo estático? Sim. Tamanhos pequenos, impressão, favicons e pessoas que preferem movimento reduzido precisam da versão estática, e toda animação deve terminar nela.