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

A natural diamond can be up to three billion years old. Older than trees, older than bones, older than the oxygen in the air. I wanted that fact to feel like something, so I built a scroll-driven WebGL piece that goes from a rough crystal forming 150km underground, up through a volcanic eruption, to a finished ring.

Live: https://www.prodiam.co.za/oldest/

Source (MIT): https://github.com/prodiamadmin/deep-time-diamond

The stack

• 
  Three.js (r184) for the hero diamond: MeshPhysicalMaterial with transmission, ior 2.42 and dispersion, plus a morph target.


• 
  GSAP ScrollTrigger scrubbing one master timeline off scroll position.


• 
  Lenis for smooth scroll.


• A transparent WebGL canvas layered over DOM scenes, so the diamond floats above the art and film.

Rough to brilliant

The diamond starts as an octahedral rough crystal and morphs into a round brilliant as you scroll, driven straight off the timeline, so the cut happens at the cutter's-bench scene.

Two things that bit me

1. 
   EffectComposer killed transparency - bloom routed through it made the canvas opaque and hid the DOM scenes. Dropped the composer, rendered directly with alpha:true plus setClearColor(0,0,0,0).


2. 
   Multiple instances of Three.js - addons pulled a second copy and the renderer died on frame one. resolve.dedupe ['three'] in Vite fixed it.

Performance

Five background films tanked it playing at once, so each scene's video only plays while active.

Open-source under MIT. Feedback welcome.