Mode
Theme
Language
PTEN
← LabExperiment 1 of 4

Lab

Esfera Cromada

An object that transforms as you scroll

Intent
A study in WebGL interaction and motion
Tools
Three.jsGLSLGSAPLenis
See it live ↗
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
back to the lab
A study in WebGL interaction and motion

Esfera Cromada: An object that transforms as you scroll

Three.jsGLSLGSAPLenis
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 →

Built by a design lead who still likes to code.

more about me →