# Motion branding: como uma marca se move, não só como ela parece

[Canonical HTML page](https://gradiently.design/pt-br/guide/motion-branding-guide)

Duas marcas podem ter a mesma fonte e a mesma cor e ainda assim não ter nada em comum quando se movem. O movimento é a parte da identidade que a maioria das marcas deixa ao acaso.

## The short version

- Motion branding é o conjunto de regras para o modo como o logo, a tipografia, os fundos e a interface de uma marca se movem.
- As decisões centrais são ritmo, easing, direção e quais elementos podem se mover.
- O movimento de uma marca deve combinar com o seu caráter: marcas calmas se movem devagar, com easing suave; marcas enérgicas se movem mais rápido, com mais overshoot.
- As regras de movimento são mais úteis quando escritas como poucas durações e curvas de easing nomeadas, que designers e desenvolvedores compartilham.
- Um bom motion branding sempre inclui uma versão de movimento reduzido para quem pede aos seus dispositivos menos movimento.

O **motion branding** é a parte de uma identidade que descreve como a marca se move: com que rapidez as coisas acontecem, como aceleram e desaceleram, em que direção viajam e o que pode se mover. Um logo que encaixa de repente diz algo diferente de um que flutua até o lugar. Registrado como um punhado de regras, o movimento faz todo vídeo, story, site e app parecer a mesma marca, mesmo quando as cores e os layouts mudam.

## Por que o movimento pertence à identidade de uma marca

A maioria dos manuais de marca para no logo, na cor e na tipografia, porque foram escritos para a mídia impressa. Hoje as pessoas muitas vezes encontram uma marca em movimento: num Reel, num story animado, num destaque de site, numa interface de produto. Se ninguém decide como essas coisas se movem, cada designer e cada ferramenta decide por conta própria, e a marca passa a se comportar como várias empresas diferentes.

Até uma marca quase sempre estática se beneficia. Uma única regra, como “as palavras chegam subindo com suavidade, nunca girando”, evita muito trabalho fora da marca antes mesmo de começar. Se a sua marca nunca se moveu, [motion graphics para marcas](https://gradiently.design/pt-br/guide/motion-for-still-brands) é um começo tranquilo.

## As quatro decisões do motion branding

1. **Ritmo.** Quanto tempo as coisas levam. Durações curtas parecem eficientes e animadas; as longas parecem calmas, ponderadas ou luxuosas.
2. **Easing.** Como o movimento acelera e desacelera. Um ease out suave parece natural; um leve overshoot parece divertido; o linear parece mecânico. Veja [easing](https://gradiently.design/pt-br/guide/easing) para as curvas.
3. **Direção e comportamento.** As coisas sobem, deslizam, mudam de escala, aparecem aos poucos ou se revelam? Escolha dois ou três comportamentos e use-os de forma consistente.
4. **O que se move.** Decida quais elementos podem se mover: o fundo, as palavras, o logo, as fotos. A contenção aqui é a maior diferença entre premium e carregado.

| Caráter | Ritmo | Easing | Comportamento típico |
| --- | --- | --- | --- |
| Calmo, premium | Lento, 400 a 700 ms | Ease out suave | Fades, subidas lentas, cor à deriva |
| Confiante, editorial | Médio, 250 a 400 ms | Ease out firme | Wipes, deslizes limpos, cortes no tempo da música |
| Divertido, simpático | Rápido, 200 a 350 ms | Ease out com overshoot | Pops, quiques, entradas com escala |
| Técnico, preciso | Rápido, 150 a 250 ms | Ease in out marcado | Deslizes retos, texto estilo máquina de escrever |

Pontos de partida para o movimento de interface e de texto. O movimento de fundo e ambiente é bem mais lento, medido em segundos.

As ideias de base, como tempo, hierarquia e follow through, são tratadas em [princípios de motion design](https://gradiently.design/pt-br/guide/motion-design-principles). O motion branding é o ato de escolher entre elas e se comprometer.

## Escrevendo regras de movimento que designers e desenvolvedores compartilham

Diretrizes de movimento falham quando são escritas com adjetivos. “Suave e confiante” significa algo diferente para cada pessoa. Dê nome a algumas durações e algumas curvas de easing, entregue-as a designers e desenvolvedores com as mesmas palavras, e a marca se move do mesmo jeito num editor de vídeo e no código.

```css
:root {
  /* Pace */
  --motion-quick: 180ms;
  --motion-base: 320ms;
  --motion-calm: 600ms;
  --motion-ambient: 12s;

  /* Easing */
  --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);   /* soft ease out */
  --ease-move: cubic-bezier(0.65, 0, 0.35, 1);    /* ease in out */
  --ease-leave: cubic-bezier(0.7, 0, 0.84, 0);    /* ease in */
}

.headline-enter {
  animation: rise var(--motion-base) var(--ease-arrive) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .headline-enter { animation: none; }
}
```

O movimento de uma marca como tokens. Três durações, um ritmo ambiente e três curvas nomeadas cobrem quase tudo.

Repare na última regra. Algumas pessoas se distraem ou passam mal com movimento e pedem ao dispositivo menos dele. Uma marca em movimento completa define o que acontece então, em geral um fade simples ou nenhum movimento. [Movimento reduzido](https://gradiently.design/pt-br/guide/reduced-motion) explica como.

## O movimento nos materiais de uma marca

| Material | O que definir | Exemplo de regra |
| --- | --- | --- |
| Logo | A entrada, o estado de repouso, quanto tempo fica parado | Se desenha em 800 ms, fica parado, nunca repete |
| Tipografia | Um ou dois estilos de entrada | Títulos sobem; linhas de apoio aparecem um tempo depois |
| Fundos | Velocidade, direção, se repetem | A cor flutua devagar e repete a cada 12 segundos |
| Transições | Como uma cena ou página substitui a outra | Wipe no sentido da leitura, nunca um giro |
| Interface | Hover, pressionar, abrir e fechar | Painéis abrem na duração base e fecham mais rápido |

Uma linha por material basta. Se uma regra precisa de um parágrafo para ser explicada, provavelmente é complicada demais.

O logo costuma receber mais atenção e aparece menos vezes. Fundos e tipografia ficam na tela muito mais, e é aí que a consistência compensa. Para o próprio logo, [logo animado](https://gradiently.design/pt-br/guide/animated-logo) percorre as principais abordagens.

Design vertical com um título editorial sobre fazer as coisas devagar, sobre um degradê que flutua suavemente

Uma marca calma: durações longas, cor à deriva, palavras que aparecem aos poucos e ficam.

Design vertical de lançamento de produto com o texto Chegou, em cores vivas e layout ousado

Uma marca divertida: ritmo mais rápido, palavras que surgem com overshoot, movimento mais vivo no fundo.

## Fundos que se movem como a sua marca

O movimento mais visível na maioria dos conteúdos de marca é o fundo: a cor em movimento atrás de um story, de um Reel ou de um destaque. É também o movimento que as marcas mais pegam emprestado de bancos de imagens, o que significa que não pertence a ninguém. Um fundo cujas cores, luz, grão e movimento são todos seus faz mais pelo reconhecimento do que uma animação de logo elaborada vista uma vez.

Um campo de cor da marca: `radial-gradient(110% 80% at 70% 30%, #a7f3d0 0%, #10b981 35%, #065f46 70%, #022c22 100%)`

Um fundo assim, movendo-se devagar e do mesmo jeito todas as vezes, torna-se tão reconhecível quanto um logo.

É assim que os Marks funcionam na Gradiently. Um Mark é uma receita de cores, materiais, luz, grão, movimento e uma voz tipográfica, então o seu movimento faz parte da sua identidade, e não é um efeito que você acrescenta. Todo design que o veste, de um story a um slide, se move do mesmo jeito e, como cada Mark é único e tem um só dono, o conteúdo de mais ninguém se move exatamente como o seu. [Sistemas de degradê de marca](https://gradiently.design/pt-br/guide/brand-gradient-system) mostra como construir a cor em torno dele.

### Movimento fora da marca

- Cada designer escolhe as próprias transições
- Todos os elementos animam ao mesmo tempo
- Fundos em movimento de banco de imagens
- Diretrizes escritas só com adjetivos
- Nenhum plano para movimento reduzido

### Motion branding

- Dois ou três comportamentos nomeados, usados em todo lugar
- Uma coisa se move por vez, em ordem
- Um fundo que pertence à marca
- Durações e curvas nomeadas em tokens compartilhados
- Uma alternativa definida, parada ou em fade

## FAQ

### O que é motion branding?

Motion branding é o conjunto de regras para o modo como uma marca se move: ritmo, easing, direção e quais elementos podem se mover. Ele faz vídeos, posts, sites e apps parecerem uma só marca.

### O que as diretrizes de movimento de uma marca devem incluir?

Algumas durações nomeadas, algumas curvas de easing, dois ou três comportamentos de entrada, regras para o logo, a tipografia, os fundos e as transições, e o que acontece quando alguém prefere movimento reduzido.

### Qual deve ser a velocidade das animações de uma marca?

O movimento de interface e de texto costuma ficar entre cerca de 150 e 700 milissegundos, mais rápido para marcas enérgicas e mais lento para as calmas. O movimento de fundo é bem mais lento, medido em segundos.

### Uma marca pequena precisa de motion branding?

Uma versão curta ajuda qualquer marca que publica vídeos ou stories. Até uma regra sobre como as palavras entram e um fundo em movimento mantêm o conteúdo consistente.