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.
| Elemento | Regra | Velocidade |
|---|---|---|
| Entrada de texto | Desliza pelo eixo de 8°, de baixo-esquerda para cima-direita. Sai pelo mesmo eixo. | Rápida |
| Transição de cena | Wipe pela diagonal de 8°, subindo para a direita. | Rápida, um pouco mais longa que a entrada de texto |
| Logo | Entra por opacidade e permanece. Nada além disso. | Muito rápida |
| Hover e foco | Só mudança de cor. Sem deslocamento, sem escala. | Muito rápida |
| Números | Aparecem inteiros, de uma vez. | Sem animação |
| Qualquer coisa | Teto do sistema: nada demora mais que isso. | Nunca mais que meio segundo |
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.
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.
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.
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.
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.
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.
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.
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.
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.
Cena limpa. Nenhum texto ainda: só a foto, o saguão, a pessoa recebendo a chave.
A promessa entra pelo eixo de 8°, em display itálico. Campo amarelo: é o que a Asa promete.
O wipe a 8° atravessa a tela subindo para a direita, bem rápido. É a virada de campo.
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.