— Lab · 2026 · Three.js · WebGL2 · GLSL

Resonance

Uma experiência WebGL em tempo real em três cenas — uma paisagem raymarched, um campo de 340 mil partículas e uma nebulosa reativa ao som — cada uma reformando-se periodicamente no wordmark amplified®.

— Demo ao vivo
Todo o lab
Ano
2026
Stack
Three.js
WebGL2
GLSL
Web Audio API
No ar
Abrir demo ao vivo
Código-fonte
GitHub

Resonance é uma única experiência GPU com três estados de espírito e um truque recorrente: seja qual for a cena, a geometria junta-se periodicamente no wordmark amplified®, segura por um instante e volta a dispersar-se em movimento.

  • Dreamscape — um campo giroide raymarched que se atravessa a voar, iridescente com um brilho laranja no núcleo. O cursor conduz; ele deriva sozinho.
  • Field — cerca de 340.000 partículas movidas por fluxo de curl-noise. A cada poucos segundos a tempestade reagrupa-se no wordmark. Passa o rato para atrair, arrasta para repelir.
  • Nebula — uma nuvem reativa ao som. Um sintetizador interno de cinco faixas generativas (ou o teu microfone) controla o raio, o tamanho e a cor; as batidas fortes fazem piscar o wordmark.

O áudio é sintetizado ao vivo no navegador — osciladores, envelopes, um reverb por convolução e um pequeno sequenciador — por isso não há MP3s para licenciar nem links para apodrecer, e as visuais reagem ao sinal exato que produzimos. Tudo corre na GPU sem etapa de build: Three.js via importmap, GLSL puro, a Web Audio API. Mexe o cursor, troca de cena, ou carrega em AUTO e deixa-a alternar.

Melhor num computador com som ligado. Abre em ecrã inteiro abaixo, ou vê o código.

— Próximos passos

Conta-nos o que só existiu em palavras.

Iniciar projeto

ou escreve para info@amplifiedcreations.com · responde um membro sénior da equipa