Scroll as a timeline: a 3-billion-year diamond story in WebGL (GSAP + Lenis)

prodiamadmin — Mon, 01 Jun 2026 07:32:45 +0000

I open-sourced a scroll-driven WebGL piece that scrolls you back three billion years, to the moment a diamond formed, then forward to a finished ring. As you scroll, the stone is cut in front of you, rough crystal to brilliant.

Live: https://www.prodiam.co.za/oldest/
Source (MIT): https://github.com/prodiamadmin/deep-time-diamond

My first post covered the diamond itself. This one is about the part that makes it feel like a film: scroll position IS the timeline.

One timeline, scrubbed by scroll

Everything (camera moves, the diamond rotating, era cross-fades, the copy, the cut) lives on a single GSAP timeline. ScrollTrigger scrubs it, and Lenis smooths the scroll that feeds it:

const lenis = new Lenis({ lerp: 0.08, smoothWheel: !reduced });
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((t) => lenis.raf(t * 1000));

const tl = gsap.timeline({
  scrollTrigger: { trigger: scrollEl, start: 'top top', end: 'bottom bottom', scrub: 1.2 }
});

Because it is one scrubbed timeline, the whole story is reversible: scroll up and the diamond un-cuts itself. No scroll listeners firing callbacks, no state machine. Just a timeline you drag with the wheel.

Acts get weight, not pixels

Each act of the story needs a different amount of room. The deep-time montage (older than the pyramids, older than the first flower) has to breathe; the transitions can be quick. So each act gets a weight, and the page height is the sum:

const WEIGHTS = [1.1, 3.6, 1.4, 1.4, 1.3, 1.7, 1.5];
const total = WEIGHTS.reduce((a, b) => a + b, 0);
scrollEl.style.height = total * 100 + 'vh';

The deep-time act gets about three times the scroll distance of any other beat, so it lands instead of flashing by. Tuning the pacing becomes editing one array.

The cut is one tween

The diamond is a single procedural mesh with a rough-crystal morph target. The entire rough-to-brilliant reveal is one tween that drops the morph influence to zero and turns the optics on at the same instant:

tl.to(diamond.morphTargetInfluences, { 0: 0, duration: w, ease: 'power2.inOut' }, cut)
  .to(material, {
    roughness: 0, transmission: 1, dispersion: 1.25,
    clearcoat: 1, thickness: 2, envMapIntensity: 2.2,
    duration: w, ease: 'power2.inOut'
  }, cut);

Reduced motion

If the visitor prefers reduced motion, I drop the Lenis smoothing and the scrub, so it degrades to a plain, honest page scroll:

const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
// new Lenis({ smoothWheel: !reduced }) and scrub: reduced ? false : 1.2

Why

It was built for ProDiam (https://www.prodiam.co.za), a natural-diamond cutting house in South Africa, to show the three billion years before the ring. The code is MIT, so the same scroll engine works for any deep-time or how-it-is-made story. Fork it and point it at your own story. Feedback welcome, especially on the scroll performance.

How we built a diamond's 3-billion-year journey in WebGL (Three.js + GSAP)

prodiamadmin — Sun, 31 May 2026 18:55:36 +0000

We open-sourced a scroll-driven WebGL piece that traces a single natural diamond from its birth about 150 km down in the mantle, across three billion years, up to a finished ring. As you scroll, the stone is cut in front of you, from a rough octahedral crystal into a round brilliant.

Live: https://www.prodiam.co.za/oldest/
Source (MIT): https://github.com/prodiamadmin/deep-time-diamond

Here is how it is built.

Stack

Three.js r184 for the diamond and all 3D
GSAP + ScrollTrigger so every animation is driven by scroll position
Lenis for inertial smooth-scroll that the timeline reads from
HTML5 audio for the voiceover and ambient bed

The diamond is procedural, not a model

There is no .glb. The brilliant is generated from rings of vertices: a table, a table ring, girdle top and bottom, and one culet point at the bottom, stitched into facets. Flat shading means each facet catches light on its own, like a real cut stone:

function makeBrilliant(N) {
  const rg = 1.0, rt = 0.56, ht = 0.36, gd = 0.05, pd = 0.92;
  const v = [0, ht, 0];                 // table center
  for (let k = 0; k < N; k++) {         // table ring
    const a = k / N * Math.PI * 2;
    v.push(Math.cos(a) * rt, ht, Math.sin(a) * rt);
  }
  // ...girdle top, girdle bottom...
  v.push(0, -(gd + pd), 0);             // culet
  // index facets, computeVertexNormals(), flatShading: true
}

The cut is a single morph target

The rough raw crystal is a second set of vertex positions on the same geometry, an irregular octahedron (apex, a jittered wide equator, apex). It starts at full influence, so the very first thing you see is a raw stone:

geo.morphAttributes.position = [new THREE.Float32BufferAttribute(roughPos, 3)];
diamond.morphTargetInfluences = [1]; // 1 = fully rough

During the cutting-bench scene, one GSAP tween drives that influence to 0 and turns the optics on at the same instant. That single tween is the entire rough-to-brilliant reveal:

tl.to(diamond.morphTargetInfluences, { 0: 0, duration: w, ease: 'power2.inOut' }, benchStart)
  .to(material, {
    roughness: 0, transmission: 1, dispersion: 1.25,
    clearcoat: 1, thickness: 2, envMapIntensity: 2.2,
    duration: w, ease: 'power2.inOut'
  }, benchStart);

Fire, without a path tracer

The material is a MeshPhysicalMaterial with ior: 2.42, the real refractive index of diamond, plus transmission and dispersion for the rainbow fire. Reflections come from a PMREM-prefiltered RoomEnvironment, and the canvas is transparent (alpha: true) so the 3D floats over DOM era-art and film. Tone mapping is ACES Filmic. It holds 60fps on a phone and still reads as a diamond.

Scroll is the timeline

One GSAP master timeline owns everything: camera dolly, rotation, era cross-fades, copy, and the cut. ScrollTrigger scrubs it, and Lenis feeds scroll into the GSAP ticker so the scrub stays smooth:

const lenis = new Lenis({ lerp: 0.08, smoothWheel: !reduced });
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((t) => lenis.raf(t * 1000));

Each act gets a weight, not a fixed height. The deep-time montage (older than the pyramids, older than the first flower) gets about three times the scroll room of any other beat so it actually lands:

const WEIGHTS = [1.1, 3.6, 1.4, 1.4, 1.3, 1.7, 1.5];
scrollEl.style.height = WEIGHTS.reduce((a, b) => a + b, 0) * 100 + 'vh';

Performance and accessibility

Only the active scene's <video> plays; the rest are paused as you scroll past.
devicePixelRatio is capped at 2.
prefers-reduced-motion drops the smooth-scroll and the scrub, degrading to plain page scroll.
A ?static flag exposes window.__shot(progress) to render any single frame on demand, which made deterministic QA screenshots trivial.

Why

ProDiam is a natural-diamond cutting house in Bedfordview, South Africa (https://www.prodiam.co.za). They buy rough, cut it in-house, and sell the finished stone, so we wanted to show the part nobody usually sees: the three billion years before the ring.

It is MIT-licensed. Fork it, tear out the diamond, and point the same scroll engine at your own story. Feedback welcome, especially on the dispersion look and the scroll performance.

DEV Community: prodiamadmin