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.