Pular para o conteúdo

Quatro durações, um easing, 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 absoluto é 400ms: acima disso, a interface deixa de parecer rápida e passa a parecer lenta com estilo.

ElementoRegraDuraçãoToken
Entrada de textoDesliza pelo eixo de 8°, de baixo-esquerda para cima-direita: 28px para a direita e 4px para cima. Sai pelo mesmo eixo.240ms--asa-dur-default
Transição de cenaWipe pela diagonal de 8°, subindo para a direita.320ms--asa-dur-scene
LogoEntra por opacidade e permanece. Nada além disso.200ms--asa-dur-fast
Hover e focoSó mudança de cor. Sem deslocamento, sem escala.200ms--asa-dur-fast
NúmerosAparecem inteiros, de uma vez.0mssem animação
Carrossel (.asa-shelf)Seta é controle, não animação: desliza em até 400ms, desativada nas pontas. Indicador que pulsa é proibido.≤ 400ms--asa-dur-max
Qualquer coisaTeto absoluto do sistema.400ms--asa-dur-max
As três animações do sistema · recarregue para ver de novo
Seu carro já tá te esperando.

Retirada em 8 minutos, no saguão do aeroporto.

240ms · ease-out

O deslocamento é no eixo de 8°, não na 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. O H1 é o único texto em Registro 1 da cena; o lide chega 80ms depois, em Registro 2, sem sobretítulo.

R$ 189
320ms · wipe a 8°

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

Asa Rent a Car
200ms · 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 e não um 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, e é exceção justamente porque ele não pode se mover.

Quem pediu menos movimento
/* declarado na camada de tokens, não no fim da implementação: nenhum componente precisa lembrar de respeitar isso */ @media (prefers-reduced-motion: reduce) { :root { --asa-dur-fast: 1ms; --asa-dur-default: 1ms; --asa-dur-scene: 1ms; --asa-dur-max: 1ms; } }

Como toda duração do sistema sai de token, zerar as quatro na raiz desliga o movimento inteiro de uma vez. O botão carregando tem uma regra própria a mais: 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.

Peça de vídeo tem uma 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: é 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, em 320ms. É 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 · Tokens Próxima seção12 · App nativo →