Serti
Serti is built for fine jewelry and diamond craft, working from the idea that a diamond is a machine for returning light. A real WebGL2 ray tracer renders per-wavelength dispersion and conductor Fresnel reflectance at true-scale calibration, so the gemstone on screen refracts and fires light the way an actual stone would under study, not a generic sparkle shader. CSS scroll timelines pace the reveal, and the whole build runs with no third-party JS.
Open live preview ↗
Highlights
- The hero is a genuinely ray-traced round brilliant. 57 facets and a culet are built from published cutting proportions as half-space planes and intersected analytically; light refracts in by Snell’s law, totally internally reflects off the pavilion past diamond’s 24.4° critical angle, and every wavelength is traced separately across an index of 2.407–2.451 — so the colour breaking on the facet edges is computed dispersion, not a chromatic-aberration filter bolted on at the end
- Cut is a consequence, not an illustration. The front page runs two stones side by side, one held at Tolkowsky’s angles and one the visitor can spoil with real sliders, and the light each returns is MEASURED off the rendered frame with readPixels rather than quoted from a table. Take a couple of degrees off the pavilion and the number drops, because the rays genuinely stop coming back through the table
- Metal colour is derived, not picked. Complex refractive indices measured by Johnson & Christy (1972) go through the full Fresnel equations for an absorbing medium — not Schlick, which is derived for dielectrics and gets metals wrong — and every swatch ships with the reflectance curve that produced it drawn beside it, so the sphere and the graph are the same arithmetic and cannot disagree
- True scale: pieces are laid out in real millimetres, and the visitor calibrates their screen once by dragging a rectangle to match any bank card (ISO/IEC 7810 ID-1, 85.60 mm). After that a 6.5 mm stone occupies 6.5 mm of glass, on any display, which is the one thing a jewellery photograph can never tell you
- A layout archetype found nowhere else in the catalogue: the “hallmark rail”, after the marks punched inside a ring shank — a narrow spine of tracked-out metadata running beside every section instead of the usual centred stack
- Didone typography — Bodoni Moda over Archivo, self-hosted — on warm ivory and ink with a single restrained gold accent
- Not one third-party JavaScript library: no Three.js, no GSAP, no jQuery dependency. Both renderers are raw WebGL2 written for this theme. Entrances are native CSS scroll-driven animations declared only inside <code>@supports</code>, so the resting state of every element is visible with JS blocked and under reduced motion; capability tiers plus a live frame-time watchdog scale the tracer down, and canvases pause off screen
Overview
Serti is built for the trade that sells stones and settings: a high jewellery maison, a bespoke atelier, an independent bench taking commissions. It assumes what is being sold is a judgement about a material — how a stone returns light, and how big it actually is — rather than a photograph of one.
The signature is not a shader that looks like a diamond. It is a real ray tracer. The round brilliant in the hero is built from published cutting proportions as fifty-seven half-space planes plus a culet, and light is put through it: refracted on entry by Snell’s law, totally internally reflected off the pavilion past diamond’s 24.4° critical angle, and traced one wavelength at a time across a refractive index of 2.407 to 2.451, so the fire on the facet edges is dispersion the renderer computed rather than a filter applied afterwards.
Because the light genuinely takes the journey, the cut matters. The front page stands two stones side by side — one held at Tolkowsky’s angles, one the visitor can spoil — and reads the light each returns straight off the rendered frame with readPixels. The percentage under each stone is whatever the tracer actually produced, so it cannot drift away from the picture beside it the way a hard-coded figure would.
The same honesty runs through the rest. Metal swatches are rendered from complex refractive indices measured by Johnson and Christy in 1972, driven through the full Fresnel equations for an absorbing medium, with the reflectance curve that produced each colour drawn next to it. Pieces are laid out in real millimetres against a one-time screen calibration made with any bank card, so a 6.5 mm stone occupies 6.5 mm of glass.
The layout archetype is the hallmark rail, after the marks punched inside a ring shank: a narrow spine of tracked-out metadata beside every section. Didone typography, warm ivory and ink, one restrained gold. No third-party JavaScript is bundled at all, and every entrance is a native CSS scroll-driven animation inside @supports, so the page reads perfectly with scripts blocked.
Content types cover pieces, collections and metals, with the millimetre dimensions and cut proportions recorded per piece, plus a journal and a private enquiry inbox.
What's included
- Full theme source — every template, style sheet & script
- One-click demo importer (idempotent, no page builder)
- Live Customizer controls for copy, colours & content
- Translation-ready .pot file + RTL stylesheet
- HTML documentation + a CHANGELOG file
- Lifetime updates + 6 months support (renewable)
Specifications
| WordPress | 5.6 – 7.0 |
|---|---|
| PHP | 8.0 – 8.3 |
| Browsers | Chrome, Firefox, Safari, Edge (latest) |
| Layout | Fully responsive, mobile → desktop |
| Localization | Translation-ready · RTL included |
| Accessibility | Keyboard-navigable · prefers-reduced-motion |
| Page builder | Not required — native Customizer |
| License | GNU GPL v2 · single-site commercial |
Release
The complete, dated version history ships in the theme’s CHANGELOG file. Every purchase includes lifetime access to future updates.
