Design system / Motion

Efeitos do site

Cada efeito tem uma página, um gatilho, uma duração e uma alternativa para quem prefere menos movimento. Todos derivam da mesma ideia: peças que se juntam.

Logo a montar-se (vídeo WebM)

As cinco peças do símbolo chegam soltas, rodadas e pequenas, encaixam por ordem e o lettering sobe por baixo. Entregue em WebM 1080p sobre azul-noite e em WebM transparente 1080×1080.

Onde
Abertura do site, redes sociais, ecrãs de evento
Duração
4,6 s · 60 fps
Easing
ease-out-back nas peças, ease-out-cubic no lettering

Montagem interativa do símbolo

A mesma montagem em código, nítida em qualquer ecrã. No hero as peças afastam-se ligeiramente com o cursor, como blocos com profundidade.

Onde
Hero da Início, Sobre
Gatilho
Carregamento da página · movimento do rato
Duração
950 ms por peça, 170 ms de intervalo

Transição entre páginas em blocos

Cinco colunas nas cores da marca sobem e cobrem o ecrã; a nova página aparece quando descem. Lembra o símbolo modular.

Onde
Todas as mudanças de página
Duração
2 × 380 ms, 40 ms entre colunas
Sem movimento
Troca direta de página
CLIENTE 01
CLIENTE 02
CLIENTE 03
CLIENTE 04
CLIENTE 05
CLIENTE 06

Faixa de clientes

Logótipos a passar da direita para a esquerda, em ciclo contínuo. A velocidade acompanha o scroll e abranda ao passar o cursor.

Onde
Início, logo abaixo do hero
Velocidade
38 s por ciclo; até 4× com scroll rápido
Sem movimento
Grelha estática

Cartões de serviço que se enchem de cor

O bloco no canto de cada cartão cresce até cobrir o cartão ao passar o cursor. A cor identifica o pilar.

Onde
Grelha de serviços
Duração
550 ms ease-out

Rotas a desenhar-se

Rotas em rosa desenham-se no mapa e pontos amarelos (candongueiros) circulam por elas sem parar.

Onde
Olho na Rua (Início e página do serviço)
Duração
2,4 s de desenho; circulação contínua

Mapa de efeitos por página

EfeitoPágina / secçãoGatilhoDuração · easingMovimento reduzido
Montagem do símboloInício · hero; SobreCarregar página950 ms · cubic-bezier(.34,1.56,.64,1)Símbolo já montado
Parallax das peçasInício · heroMovimento do rato500 ms · ease-outDesligado
Transição em blocosTodasClique no menu2 × 380 ms · ease-outTroca direta
Faixa de clientesInícioContínuo + scroll38 s/ciclo · linearEstática
Palavras em contornoInício · entre secçõesContínuo + scroll30 s/ciclo · sentido inversoEstática
Foco por competênciaInício · "O rosto inteiro"Cursor / toque numa linha500 ms · ease-outSem escala, só opacidade
Cartão que enche de corInício · ServiçosHover550 ms · ease-outInstantâneo
Rotas e candongueirosOlho na RuaEntrar no ecrã2,4 s + contínuoRotas desenhadas, sem pontos
Contador 0 → 50.000Olho na Rua · númerosAbrir a página1,6 s · ease-outValor final
Linha do métodoInício · MétodoScrollLigada ao scrollEtapas todas ativas
Simulador de custoOlho na RuaControlosAtualização imediataIgual
Olho que segue o cursorOlho na Rua · heroMovimento do ratoSeguimento suaveOlho parado
Botão magnéticoCTAs principaisCursor perto do botão250 ms · ease-outDesligado
Entrada de secçõesTodasEntrar no ecrã900 ms · ease-out (só deslocamento)Sem deslocamento