01 / 03

Calm

Move the pointer over it.

Scroll to play

Motion / 3D Lablab.iamnaw.dev/blob06 · Liquid chrome

-- fps·-- ms

TECH SHEET · 06 / 06

Liquid chrome

A chrome surface that ripples, bulges toward the pointer and calms down as you scroll through it.

Three.js
GSAP

TECHNIQUE

Icosphere displaced along its normals by layered waves
The pointer adds a soft bulge in its direction
Scroll drives wave amplitude and frequency

PERFORMANCE · MEASURED LIVE

Draw calls: —
Triangles: —
Frame rate: —
Pixel ratio cap: 1.5
JS per frame: —

FALLBACK

Reduced motion: a still sphere, no ripples. Without WebGL: a still image of the sphere.

FROM THE SOURCE

const w = sin(nx * f * 2 + t * 1.3)
  * sin(ny * f * 2.6 + t * 1.1)
  * sin(nz * f * 1.7 + t * 0.8);
const bulge = max(0, dot(n, pointer)) ** 4 * 0.28;
const d = 1 + (amp * w + bulge) / 1.3;