FUNDAMENTOS · 05 · MOTIONSeis movimentos, e nada além deles. Cada um está rodando de verdade aqui, com o token de duração e a curva anotados ao lado. Se um efeito não está nesta página, ele não entra no projeto.
05.0 · CONTROLE DA DEMONSTRAÇÃO// o laço existe só nesta página de referência, para o espécime poder ser observado. No site, cada movimento roda uma vez por elemento, no primeiro encontro com a viewport.
05.1 · VOCABULÁRIO PERMITIDOCoreografado, curto, físico. A curva padrão é ease-out, porque entrada rápida com saída lenta é o que o olho lê como peso.
F1Budget ParamétricoF3Levantamento QuantitativoF5Planejamento de ObrasF7Acompanhamento de PrazosEntrada de bloco e de irmãos em lista. Uma vez por elemento, disparada por IntersectionObserver, e nunca de novo.
Número sobe do zero no primeiro encontro com a viewport. Em mono tabular a largura não muda, então a linha não pula.
A linha do ciclo, a curva S e as réguas se desenham em vez de aparecer. O marco laranja de hoje entra junto com o traço que passa por ele.
Sombra, hairline, zoom interno de 1.05 e seta de 4px. O card em si nunca translada nem escala: ele sairia de baixo do cursor e o hover ficaria piscando.
deslocamento atual · x 0,0 px · y 0,0 px
Aproxime o cursor do botão dentro da moldura. O botão inclina até 6px na direção da mão e volta sozinho, e a seta desliza 4px.
rolagem 0 px · navbar transparente
Do terreno à entrega, uma solução para cada fase do ciclo de incorporação.
rolagem 24 px · navbar ganha blur e hairline
O Budget Analytics reúne EAP, composições, insumos e medições na mesma base.
Contrato, compra e cronograma passam a falar a mesma língua.
continue rolando
O desvio aparece na semana em que acontece, não na conciliação três meses depois.
Onze anos de mercado e mais de 737 projetos entregues.
rolagem interna · 0 px · estado transparente
Role a moldura acima. Depois de 24px o fundo ganha paper translúcido com blur e a hairline inferior aparece. Nada de encolher altura nem de esconder a navbar.
05.2 · PREFERS-REDUCED-MOTIONMovimento é enfeite de leitura, nunca condição de leitura. Com prefers-reduced-motion: reduce nenhuma informação some: o que muda é só a forma de chegar. Ligue o interruptor no topo da página para ver os seis espécimes no modo reduzido.
| Movimento | Comportamento padrão | Fallback reduzido |
|---|---|---|
| Rise-in | opacity e translateY 14px, 420ms, stagger de 70ms | fade simples de 150ms, sem deslocamento e sem stagger |
| Count-up | 0 até o valor final em 1400ms | o valor final renderiza direto, sem contagem |
| Line-draw | stroke-dashoffset de 1 até 0 em 800ms | traço e marcos já desenhados no primeiro frame |
| Hover de card | sombra, hairline e zoom interno em 180ms | sombra e hairline em 150ms, zoom interno desligado |
| CTA magnético | deslocamento de até 6px seguindo o cursor | magnetismo desligado, só troca de cor no hover |
| Navbar ao rolar | fundo e hairline entram em 180ms | estado rolado aplicado sem transição perceptível |
A preferência é do sistema operacional, não do site: não existe botão para desligá-la, e a página nunca insiste. O interruptor de simulação existe apenas nesta referência, para o time conferir o fallback sem mexer nas configurações da máquina.
05.3 · PROIBIÇÕESNenhum destes entra, mesmo que fique bonito na demonstração isolada. Cada um deles cobra pedágio em desempenho, em leitura ou nos dois.
Camada rolando em velocidade diferente embaralha a hierarquia e trava o scroll em máquina fraca.
Brilho passando por cima de botão ou card. Vocabulário de anúncio, não de instrumento de medição.
Biblioteca de scroll aplicada a cada elemento da página. Quando tudo entra animado, nada tem ênfase.
Conteúdo que se move sem pedido tira o controle de quem lê e quebra a leitura por teclado.
Só o marquee de logos, que pausa no hover e congela em prefers-reduced-motion. Nada mais roda em laço.
Card que translada ou escala sob o cursor sai da área de clique e faz o estado piscar.