Pular para o conteúdo

Poucas velocidades, um só jeito de se mover, e uma lista do que nunca se move.

O movimento do sistema é curto e sempre no mesmo eixo. Não existe animação "de transição suave" genérica: ou o elemento entra pelo eixo de 8°, ou aparece inteiro. O teto é sempre rápido, nunca mais que meio segundo. Acima disso, a interface deixa de parecer rápida e passa a parecer lenta com estilo.

ElementoRegraVelocidade
Entrada de textoDesliza pelo eixo de 8°, de baixo-esquerda para cima-direita. Sai pelo mesmo eixo.Rápida
Transição de cenaWipe pela diagonal de 8°, subindo para a direita.Rápida, um pouco mais longa que a entrada de texto
LogoEntra por opacidade e permanece. Nada além disso.Muito rápida
Hover e focoSó mudança de cor. Sem deslocamento, sem escala.Muito rápida
NúmerosAparecem inteiros, de uma vez.Sem animação
Qualquer coisaTeto do sistema: nada demora mais que isso.Nunca mais que meio segundo
As três animações do sistema · recarregue para ver de novo
Entrada de texto
Seu carro já tá te esperando.
Rápida · movimento suave

O deslocamento segue o eixo de 8°, nunca a horizontal pura: 28px para a direita e 4px para cima, o mesmo trajeto da asa. Nada de fade isolado. O texto sempre chega andando pelo eixo.

R$ 189
Rápida · wipe a 8°

A troca de cena é o próprio vão passando pela tela, sem corte e sem fade. A borda que varre tem a mesma inclinação de todo recorte do sistema.

Asa Rent a Car
Muito rápida · só opacidade

O logo entra por opacidade e fica. Não gira, não desliza, não se monta traço por traço, não pulsa e não muda de escala. É o elemento mais protegido do sistema.

O que o sistema nunca faz.

Nunca Rotação

Nenhum elemento gira, em nenhuma circunstância. É por isso que o botão carregando usa três pontos em fade em vez de spinner: o spinner é o padrão mais comum da web e também a violação mais fácil de deixar passar.

Nunca Contador de número

4,7 e 9,4 aparecem inteiros. Um número subindo remete a dashboard de software; a prova social da Asa é reputação de gente, e reputação não é uma métrica que sobe na frente de quem olha.

Nunca Bounce, elástico, pulso

Nada de curva com overshoot, nada de escala que respira, nada de brilho em loop. O skeleton de carregamento é estático pelo mesmo motivo: um shimmer contínuo é um pulso disfarçado.

Nunca Fade isolado

Texto que só aparece, sem percorrer o eixo de 8°, perde a assinatura de movimento da marca. A exceção única é o logo, justamente porque ele não pode se mover.

Quem pediu menos movimento

Quando o celular ou o navegador da pessoa está configurado para reduzir movimento, o produto da Asa desliga todas as animações de uma vez só: nada de fade, deslize ou wipe. O botão carregando tem uma exceção: os pontos param de piscar e ficam em opacidade fixa, porque um indicador de carregamento não pode simplesmente sumir.

O ritmo de uma peça de 8 segundos.

Uma peça de vídeo tem estrutura de tempo fixa, a mesma em toda campanha: o equivalente temporal do vão. Promessa primeiro, entrega depois, assinatura por último.

0 a 1,5s · cena limpa 1,5 a 4,5s · promessa wipe 5 a 8s · preço, prova e ação
0 a 1,5s

Cena limpa. Nenhum texto ainda: só a foto, o saguão, a pessoa recebendo a chave.

1,5 a 4,5s

A promessa entra pelo eixo de 8°, em display itálico. Campo amarelo: é o que a Asa promete.

4,5s

O wipe a 8° atravessa a tela subindo para a direita, bem rápido. É a virada de campo.

5 a 8s

Preço, prova e ação no campo escuro: o que o cliente recebe. O logo entra por último, por opacidade, e permanece até o fim.

Anterior← 10 · Referência Próxima seção12 · App nativo →