Linguagem visual
Motion
Movimento com intenção, continuidade e respeito ao contexto.
O movimento orienta atenção e estabelece continuidade sem competir com o conteúdo.
Princípio
Movimento deve explicar
antes de impressionar.
Caráter
Princípios de movimento
Continuidade
O movimento preserva a relação entre o estado anterior e o próximo.
Hierarquia
Elementos principais conduzem; elementos secundários acompanham.
Direção
O deslocamento reforça a estrutura da composição, nunca acontece ao acaso.
Ritmo
Elementos relacionados compartilham tempo e comportamento.
O mesmo elemento mantém uma referência entre os dois estados.
220ms · Movimento naturalUma sequência curta revela relação, não cria suspense.
180ms + intervalo curto · Entrada controladaTempo
O tempo acompanha distância, área e importância visual. O conteúdo não deve esperar por uma transição para ficar disponível.
Feedback e pequenas mudanças.
Entradas, transições e mudanças de estado.
Composições editoriais e movimentos de maior escala.
Easing
As curvas descrevem comportamento, não uma coleção de efeitos. Use uma aceleração natural e uma chegada controlada; bounce e overshoot não fazem parte da linguagem.
Começa rapidamente e termina suavemente.
Acelera e desacelera ao deslocar entre estados.
Pode ser ligeiramente mais rápida depois que o elemento foi compreendido.
Entrada e saída
Entradas comuns combinam opacidade e um deslocamento discreto. Saídas são mais curtas e não devem prolongar um conteúdo que já foi lido.
Opacidade e 12px de deslocamento vertical revelam o bloco sem teatralidade.
200ms · Entrada controladaElementos gráficos
Formas podem revelar, expandir ou atravessar o enquadramento. O movimento preserva a geometria e o frame, como extensão da regra de recorte.
A forma entra por uma máscara direcional e permanece contida pelo enquadramento.
320ms · Movimento padrãoTipografia
Anime blocos, linhas ou grupos — nunca letras isoladas. A tipografia mantém peso, proporção e legibilidade durante toda a transição.
O texto aparece por linha, com clip reveal e pequeno deslocamento vertical.
240ms · Entrada controladaLogo
A assinatura pode entrar ou sair como uma unidade. Sua geometria interna permanece intacta: símbolo e wordmark não são separados; não há morph, rotação ou animação de paths.
O SVG oficial completo entra por opacidade e pequeno deslocamento.
200ms · Entrada controladaFotografia
Em fotografia, motion é ainda mais discreto: crossfade, reveal ou mudança de recorte quando houver uma razão de leitura. Zoom contínuo e parallax não são padrão.
A área reservada à fotografia revela o conteúdo sem aplicar filtro ou movimento contínuo.
240ms · Movimento padrãoInterface
Campanhas, conteúdo editorial, apresentações e transições institucionais.
Pode ter um pouco mais de expressão.Estado, feedback, navegação, hierarquia e continuidade espacial.
Prioriza eficiência e contexto.Reduced motion
Quando a preferência de movimento reduzido estiver ativa, esta página elimina deslocamentos e encurta transições. Mudanças de estado permanecem perceptíveis sem loops ou animações decorativas.
Faça / Evite
Curto, direcional e com hierarquia preservada.
220ms · Movimento naturalEvite bounce, rotação desnecessária e movimentos concorrentes.
220ms · Exemplo a evitar