DEV Community: Prodiam Admin

A practical diamond buying checklist for South African shoppers

Prodiam Admin — Sun, 28 Jun 2026 14:04:43 +0000

Buying a diamond is easier when you slow the process down and check the same basics every time. This short checklist is written for South African buyers comparing stones, certificates, and local service options.

Before the appointment

Decide whether your priority is size, cut quality, colour, clarity, or long-term value. A larger stone is not automatically the better buy if the cut is weak or the certificate is unclear.

Bring any existing valuation, grading report, or ring measurements. If you are comparing an engagement ring, ask to see the centre stone details separately from the setting.

During the appointment

Ask to see the diamond in more than one lighting condition. Store lights can make many stones look better than they will look in daily wear.

Check that the certificate number matches the stone and that the stated carat, colour, clarity, and cut are all clear. If the stone is already set, ask what can and cannot be verified without removing it.

For Johannesburg and Bedfordview appointments, visit prodiam to compare local diamond services and ask about certified natural diamonds, valuations, and bespoke engagement rings.

Context matters

A natural diamond also carries geological history. For buyers who want the story behind deep-time formation, see prodiam's interactive oldest diamond experience.

This post is general buyer education, not a guarantee of price or resale value. Always compare the paperwork, the stone, and the after-sale service before deciding.

A tiny WebGL diamond age visualiser for explaining deep time

Prodiam Admin — Sun, 28 Jun 2026 08:50:09 +0000

We built a small scroll-driven visualiser to make one fact easier to feel: a natural diamond can be billions of years old.

The piece uses a simple browser stack: Three.js/WebGL for the scene, GSAP for timeline control, and smooth scroll handling for the narrative pacing.

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

Source code: https://github.com/prodiamadmin/deep-time-diamond

For Prodiam Trading CC, the point is educational rather than transactional: a diamond is not just a product spec sheet. Age, formation, cutting, certification and provenance all matter when a buyer compares stones.

Main Prodiam site: https://www.prodiam.co.za

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

Prodiam Admin — 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)

Prodiam Admin — 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.