Three.js Scroll Color Morph — GSAP Distortion Blob on Scroll

The Three.js Scroll Color Morph snippet takes a smooth sphere and, as the visitor scrolls, churns it into a spiky organic blob while sweeping its colour and the page background through a hue range — the scrollbar controls both the distortion strength and the colour directly, not a timer — using Three.js normal displacement and GSAP's ScrollTrigger plugin, both loaded from a CDN.

Displacement along vertex normals

The morph is pure geometry: a high-detail IcosahedronGeometry (subdivided 48 times for a dense, smooth sphere) has every vertex pushed outward or inward along its own surface normal. Displacing along the normal — rather than in a fixed direction — is what keeps the shape looking like a coherent inflating/deflating surface instead of a smeared mess. The push distance comes from a noise function evaluated at each vertex's original position, so neighboring vertices move by similar amounts and the surface stays continuous.

Scroll controls amplitude, time controls churn

Two inputs drive the look, cleanly separated. The scroll-scrubbed value m (0 to 1) scales how far every vertex is displaced — at 0 the sphere is perfectly smooth, at 1 it's a dramatic spiky blob. Independently, a real-time clock feeds the noise so the surface keeps churning and boiling even when scroll is paused. Scrolling sets *how extreme* the blob is; time keeps it *alive*.

Original positions and normals stored once

Copies of the pristine vertex positions and normals are taken at startup, and every frame the displacement is computed from those originals — never from the previous frame's displaced state. This prevents error accumulation that would otherwise inflate the blob into garbage over time, and it means at m = 0 the geometry is always exactly the original clean sphere, making the morph perfectly reversible.

Normals recomputed each frame for correct lighting

After displacing the vertices, computeVertexNormals() is called so the churning surface is lit correctly frame to frame — spikes catch highlights and valleys fall into shadow, which is what gives the blob its liquid, three-dimensional read. Skipping this step would leave the lighting flat and the morph would look like a texture rather than real geometry.

Colour and background sweep with the morph

The same m value drives an HSL hue sweep applied to the material colour, its emissive tint, and even the CSS background of the stage — so as the blob spikes up it also shifts hue and the whole scene's mood changes together. Tying colour to the identical scrubbed value that drives the geometry keeps form and colour in perfect lockstep and gives the scroll a strong sense of transformation.

scrub: 0.6, pinned, fully reversible

A numeric scrub smooths both the distortion and the colour against noisy input, and because everything derives from the one scrubbed m, scrolling back up returns the blob to a calm smooth sphere in its original colour. This shares its displacement engine with the morphing blob and liquid metal sphere snippets; here scroll is the control. Pair it as a centerpiece with a depth parallax field around it.