voltar para o lab
Estudo de interação e motion em WebGL

Esfera Cromada: um objeto que se transforma no scroll

Three.jsGLSLGSAPLenis

2026

Esfera Cromada

Um único objeto no centro da tela que, conforme a rolagem, muda de natureza — de cromo líquido a wireframe, a nuvem de partículas, a vidro — e de forma, de quase-esfera a blob orgânico. Tudo dirigido pelo scroll, compartilhando a mesma deformação.

O que explora

  • Deformação de malha por ruído simplex no vertex shader, com a normal recalculada para o reflexo acompanhar a superfície.
  • Transição de estado (cromo → linhas → pontos → vidro) por cross-fade dirigido pelo scroll.
  • Reflexo grafite a partir de um environment escuro montado à mão; bloom só nos brilhos.
  • Scroll amanteigado com Lenis, pós-processamento (bloom) e refração de vidro sobre o texto.

Estados

Cromo reflexo grafite e deformação líquida sutil
Linhas wireframe do blob orgânico
Partículas a estrutura explode e se remonta
Vidro refrata o texto por trás
abrir experimento