An open-source, scroll-driven WebGL experience about the deep-time history of a diamond. It follows a natural diamond from its formation up to three billion years ago, 150km inside the Earth, through a volcanic ascent, a South African mine, and the cutter's bench, to a finished ring. The hero diamond morphs from a rough crystal into a polished brilliant as you scroll.
Live at https://www.prodiam.co.za/oldest/
npm install
npm run dev
Then open http://localhost:5180
npm run build # type-checks, then outputs static files to dist/
npm run preview
The build is self-contained and iframe friendly:
<iframe src="https://YOUR-DEPLOY-URL/" width="100%" height="720" style="border:0" loading="lazy" title="The Oldest Thing You'll Ever Own"></iframe>
- Three.js for the real-time diamond (refraction, dispersion, rough-to-polished morph)
- GSAP ScrollTrigger for the scroll choreography
- Lenis for smooth scrolling
- Howler.js for audio
- Vite + TypeScript
Made by ProDiam, a South African diamond cutting house. The science (formation depth, age, and kimberlite ascent) is sourced and fact-checked.
Reuse: released under MIT, so you can use the code, the films, and the imagery freely. If you do, a link back to prodiam.co.za is genuinely appreciated. Every video, the voiceover, and every image also carry ProDiam attribution and the site URL inside their embedded file metadata, so credit travels with the asset.
MIT. See LICENSE.