Run Rob Run: Construindo um Goo Reativo à Música com Three.js e WebGPU | Codrops

Run Rob Run é um portfólio de uma página construído em torno de movimento, som, tipografia e interação. A cena principal é um objeto gosma personalizado que se comporta como um material digital: ele fica inativo, reage à música, responde ao passar o mouse e se transforma através da rolagem de uma bolha orgânica em um cubo estruturado.

O projeto surgiu de um longo ciclo de construção, demolição, reconstrução e nunca senti que a obra estava pronta para me representar adequadamente. Durante anos, continuei reiniciando ideias de portfólio antes que elas tivessem a chance de serem concluídas. Esta versão não pretende chamar o site de perfeito. Trata-se de finalmente alcançar algo com o qual eu possa sentar, compartilhar e continuar construindo.

Esse sentimento moldou muitas decisões de design. Eu queria que o site parecesse pessoal, sem se tornar muito polido ou distante. O movimento precisava ter peso. A tipografia precisava parecer direta. A gosma precisava se sentir viva o suficiente para transmitir a emoção da página, mas controlada o suficiente para que ainda funcionasse como uma interface.

Esta análise se concentra na gosma: como ela é estruturada, como a rolagem a empurra da bolha para o cubo e como a reação da música é moldada para que o movimento pareça musical em vez de caótico.

A cena usa Three.js/WebGPU para a experiência principal, com geometria em camadas, lógica de deformação personalizada, comportamento reativo à música, estado de rolagem e alguns detalhes de superfície, como leituras de foco e poeira animada.

Conceito

O objetivo não era fazer uma animação de fundo. Eu queria que a cena parecesse um objeto com presença. Algo tátil, imperfeito e responsivo. A gosma se tornou o centro emocional do local: uma concha refrativa em torno de um núcleo laranja, mudando constantemente entre suavidade e estrutura.

O design foi construído em torno do contraste:

• Movimento orgânico suave contra um cubo estruturado final.
• Uma concha refrativa transparente em torno de um denso núcleo laranja.
• Comportamento ocioso sutil contra impulsos musicais mais fortes.
• Detalhes divertidos de foco que só aparecem quando o usuário investiga a superfície.

Isso significava que o sistema técnico precisava ser flexível. A gosma não poderia ser uma única malha fazendo uma coisa. Precisava de camadas, canais de reação separados, amortecimento, controle de rolagem e limites de desempenho.

Implementação

Estrutura da cena

A gosma é construída a partir de algumas malhas em camadas que compartilham a mesma lógica de deformação básica, mas usam materiais e configurações de resposta diferentes.

• O invólucro externo fornece a aparência refrativa de vidro.
• O núcleo laranja dá peso e identidade ao objeto.
• Uma camada externa fina adiciona brilho e detalhes à superfície.
• A rolagem reduz gradualmente a deformação orgânica e empurra a forma em direção a um cubo.
• As interações flutuantes adicionam detalhes temporários da superfície, como leituras de grade e poeira animada.

Em um nível alto, cada quadro calcula o estado de rolagem, lê os valores atuais de reação à música, facilita-os e depois os passa para a função de deformação para cada camada.

###PRE_dd7e52a190f2299f7de8da8ed9270a37###

Scroll Morph

A transição de rolagem move o objeto de um estado orgânico suave para um cubo mais estruturado. O sistema de deformação combina duas ideias:

• Uma bolha orgânica baseada em direção, com lóbulos e ruído de superfície.
• Uma projeção de cubo, onde cada vértice é puxado em direção à face do cubo mais próxima.

###PRE_f5729f15fe43561dd057e3dfbef44f9b###

Quando a mistura do cubo aumenta, cada ponto é gradualmente puxado em direção à sua posição de cubo.

###PRE_5e44c6a9d11c57dfda3f4cfb80e6eb8d###

Isso permite que a cena mantenha seu caráter goo-like no início, enquanto ainda pousa em um estado de cubo final limpo.

Reação musical

A reação musical é intencionalmente seletiva. A gosma não reage igualmente a todos os sons. As primeiras versões respondiam de maneira muito uniforme a toda a faixa, o que fazia as músicas ocupadas parecerem barulhentas e fazia com que pequenos sons transitórios, como chimbais, criassem movimentos muito grandes.

O sistema final avalia a resposta em direção a eventos rítmicos mais fortes: chutes, palmas maiores e batidas de bateria de quatro no chão. Transientes menores de alta frequência ainda adicionam energia, mas são amortecidos, de modo que não acionam a forma principal.

###PRE_10d0599ba1754eb931d1d1848a5f7803###

O sistema procura batidas graves dominantes, mas o baixo por si só não deve inflar constantemente o núcleo. A resposta do bumbo é reduzida quando a pista está lotada ou quando os agudos estão muito ativos.

###PRE_38e6eabb2ce61c5cf8b39e655314b0cd###

Palmas e batidas médias maiores são tratadas separadamente dos detalhes de alta frequência. Isso significa que uma batida de palmas ainda pode mover o núcleo, enquanto chapéus rápidos se traduzem em movimentos de superfície mais leves.

###PRE_b483d44a1746c4afdc606b1951f10f5d###

Essas leituras de áudio são então convertidas em canais de movimento separados.

###PRE_817e0e8f3cffcf07520eb02224d21fc0###

Amortecimento e retorno

O movimento também precisava de peso. Se a gosma retornasse muito rapidamente após uma batida, ela parecia nervosa e digital. O impacto pode atacar rapidamente, mas a liberação é mais lenta.

###PRE_8c964047d6fd4414b0fe9b88bd0b80ec###

A resposta do membro tem seu próprio amortecimento de liberação. Movimentos maiores são resolvidos mais lentamente, o que dá ao núcleo uma sensação física mais pesada.

###PRE_2f17b8e8117ed457e97d6ead0078ecf4###

Aplicando a reação

O invólucro externo e o núcleo interno não recebem a mesma reação. O invólucro obtém uma resposta mais suave, permanecendo claro e refrativo. O núcleo laranja recebe mais movimento físico.

###PRE_bdbe048b753895ca5b666b9d35856d25###

O núcleo obtém o movimento maior, mas é preso para que não possa empurrar para fora da casca externa transparente.

###PRE_730e6199d47c228d2c9d66cfd1c0e6ed###

Refinamento

Depois que o comportamento principal estava funcionando, a maior parte do tempo era ajustado. O objetivo era manter a cena expressiva sem deixá-la barulhenta ou cara.

Detalhes da superfície flutuante

As interações flutuantes são separadas do sistema de música. Eles são concebidos como comportamentos superficiais temporários, em vez de efeitos permanentes.

A leitura da grade aparece ao passar o mouse, mostra valores ativos e desaparece quando a rolagem começa, para não interferir na transformação.

A poeira funciona de maneira semelhante. Ele aparece sob o cursor, mas a própria textura da poeira é animada por meio de quadros de ruído pré-computados, semelhantes à camada de ruído de todo o site. Isso faz com que a poeira pareça viva sem recalcular ruídos caros a cada quadro.

###PRE_ab29ba786b8969a7f9909c2c35ebbeba###

Notas de desempenho

A principal lição foi que a qualidade visual veio tanto da restrição quanto da complexidade.

• Ruído caro foi pré-computado sempre que possível.
• As atualizações normais são escalonadas entre as camadas.
• A resposta da música é suavizada antes de tocar a geometria.
• Os efeitos de foco são desativados durante a rolagem para que a metamorfose permaneça limpa.
• A versão WebGPU possui caminhos alternativos para dispositivos que não podem executar a cena principal.

A cena também evita tratar todas as camadas da mesma forma. O invólucro externo, o núcleo e o revestimento são atualizados com diferentes níveis de intensidade, o que mantém a composição legível e ajuda o material transparente a permanecer transparente.

Acessibilidade

Como o projeto depende muito de movimento e som, a experiência precisa de algumas proteções.

• A cena ainda pode ser explorada sem reprodução de música.
• A reação da música é controlada pelo usuário em vez de reproduzida automaticamente.
• Os detalhes de foco são melhorias e não são necessários para navegação.
• Em dispositivos de ponteiro grosso, as camadas de foco da área de trabalho são desativadas.
• A renderização de fallback está disponível para dispositivos que não podem executar a cena WebGPU.

Para produção, eu também continuaria melhorando o suporte de movimento reduzido. A história de rolagem ainda pode funcionar com deformação mais calma, menos pulsos automáticos e movimento menos reativo para usuários que preferem movimento reduzido.

Conclusão

O sistema final é um equilíbrio entre direção de arte e contenção. Ouve a música, mas não obedece a todos os sons. Chutes e palmas maiores criam empurrões mais fortes, enquanto os detalhes de alta frequência geram menor energia superficial. A rolagem puxa o formulário de orgânico para estruturado, e as interações flutuantes revelam pequenos traços do sistema subjacente.

O que mais aprendi ao construí-lo foi que a qualidade não vem da adição de mais movimento. Surgiu da decisão de qual movimento importava e, em seguida, do amortecimento, da fixação e da separação das reações até que o objeto parecesse ter massa, memória e resistência.

Recursos e ferramentas

• Texturas geradas por tela
• Mapeamento de estado reativo de áudio
• Three.js
• WebGPU
• GSAP / ScrollTrigger