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
- 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).
- 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.