A forma vira dado
A palavra e o símbolo são desenhados num canvas invisível. Depois o código lê os pixels com getImageData e guarda cada ponto opaco como uma coordenada. A tipografia deixa de ser imagem e vira uma lista de alvos.
A marca se monta em poeira na sua frente, se desfaz em milhares de pontos e depois se reagrupa formando outro símbolo. Zero biblioteca, zero CDN. Canvas 2D puro, com a rolagem no lugar do relógio: você controla a cena com o dedo.
01 / 03
Cada ponto na tela é um pixel opaco lido da tipografia. Role a página para desmontar a palavra.
role para desmontar
Como é feito
A palavra e o símbolo são desenhados num canvas invisível. Depois o código lê os pixels com getImageData e guarda cada ponto opaco como uma coordenada. A tipografia deixa de ser imagem e vira uma lista de alvos.
Assim que a cena aparece, um núcleo aceso explode em arco e floresce na marca, com uma faísca no instante em que cada ponto encaixa. Parada, a forma continua respirando: micro oscilação por ponto e uma rajada de vento que atravessa a palavra.
A rolagem interpola cada partícula entre a forma A, uma posição dispersa em 3D e a forma B. O sorteio usa semente fixa, então a cena é idêntica em toda visita, e um desvio senoidal próprio impede que alguém ande em linha reta.
A cada quadro medimos o quanto o ponto andou na tela. Quem corre fica menor e mais apagado, quem chega ao lugar fica cheio e aceso. É esse detalhe que dá sensação de energia, não o número de partículas.
Sobre desempenho: a cena usa só transform e opacity no CSS, respeita o devicePixelRatio, reduz a quantidade de pontos sozinha no celular e congela o laço quando a cena sai da tela. Nada de suavização por passo fixo: rastro, inércia e dose de luz são calculados pelo tempo real do quadro, então a cena tem a mesma velocidade e o mesmo brilho em 60Hz e em 120Hz. Com preferência por movimento reduzido, o mesmo código entrega a forma final parada, legível, sem animação nenhuma.
Por que mostrar isso
Um site que se monta, se desmonta e se remonta na frente do cliente segura a atenção por segundos que nenhum banner segura, e prende a marca na cabeça de quem viu. A ROO3 faz isso escrevendo a técnica, não instalando plugin: menos peso, mais controle, e nada quebra quando uma biblioteca de terceiro muda de versão.
Esta peça pesa poucos kilobytes e roda offline. É um arquivo único, pronto para virar seção de um site de verdade.