back to the lab
[ A study in WebGL interaction and motion ]

Esfera Cromada: an object that transforms as you scroll

Three.jsGLSLGSAPLenis

[ 2026 ]

Esfera Cromada

A single object at the center of the screen that, as you scroll, changes nature — from liquid chrome to wireframe, to a particle cloud, to glass — and shape, from near-sphere to organic blob. All driven by scroll, sharing the same deformation.

What it explores

  • Mesh deformation via simplex noise in the vertex shader, with the normal recomputed so the reflection follows the surface.
  • State transition (chrome → lines → dots → glass) via a scroll-driven cross-fade.
  • Graphite reflection built from a dark environment assembled by hand; bloom only on the highlights.
  • Buttery scroll with Lenis, post-processing (bloom) and glass refraction over the text.

States

[ Chrome ] graphite reflection and subtle liquid deformation
[ Lines ] wireframe of the organic blob
[ Particles ] the structure explodes and reassembles
[ Glass ] refracts the text behind it
[ open experiment → ]