Kestrel
& Facet
A concept site for an invented jeweller, where the ring is made in 3D as you scroll: the stone is cut, the band closes and the claws grip, in step with the page.
A concept by KTS Pro Solutions. Kestrel & Facet is not a real business: there is no workshop, and nothing on it can be booked or bought.
A small business,
nothing held back.
Kestrel & Facet is made up on purpose: an independent jeweller who makes bespoke engagement rings, one at a time. Inventing the business meant the site could go as far as the idea allowed, a page that looks like it cost a fortune with the ring made in 3D as you scroll, while still passing the same quality gate as my client sites.
A Diamond in Real 3D
A brilliant-cut stone turning in the hero, with light breaking into colour as it turns.
The Ring, Made on Scroll
The stone is cut, the band forms, the claws close and the finished ring turns, in step with the scroll.
Night, Then Day
Once the ring is made, the page turns from graphite to warm stone for the bespoke process.
Words That Arrive
Headlines rise into place word by word as you reach them.
A Collection to Handle
The real 3D ring in a case: drag it to turn it, and choose the piece and the metal colour.
Plainly a Concept
Said on every screen, with a switched-off form and nothing a real jeweller would have to stand behind.
Still Fast
The whole page, 3D included, is under 500 KB.
The ring is made
as you scroll.
Scroll down and the ring is made in front of you: a rough crystal is cut into a brilliant, a line of molten metal closes into a band, four claws rise and grip the stone, and the finished ring turns in the light.
None of it is video, and there is no 3D library. It is a small ray tracer written in WebGL2 for this page. The stone is stored as its 57 facet planes rather than a mesh, so every edge is as sharp as the screen allows, and light bounces inside it and splits into colour as it leaves, as it does in a real diamond. The band, claws and rail are one solid, so a paused frame shows no seam, gap or floating claw.
I · The stone
II · The band
III · The setting
IV · The ring
Made in the dark,
told in the light.
Once the ring is finished, the page turns from graphite to warm stone for the bespoke process, so the brighter half arrives as part of the story rather than as a change of theme.
Headlines rise into place word by word, and the four steps, from the first conversation to the fitting, tell themselves as you scroll. The scroll motion is transforms and opacity only, and it stops for anyone whose device asks for reduced motion.
The collection,
in your hand.
Three collection pieces sit in a dark case on the light page, and the ring in it is the real 3D, not a photograph. Drag it, or use the arrow keys, to turn it, and switch the piece and the metal colour live.
It is the same renderer as the scroll story, moved into the case when the case comes on screen, so the collection downloads nothing extra.
Convincing,
never pretending.
A site this convincing has to say what it is. A line across the top of every screen says Kestrel & Facet is a concept by KTS Pro Solutions and not a real business, and the page says it again beside the appointment form, in the footer and in its title and share card.
The form is switched off and sends nothing. There are no reviews, prices, contact details or claims a real jeweller would have to stand behind, and the page is kept out of search results.
All of that,
under 500 KB.
The whole page, 3D included, comes in under the 500 KB budget my client pages are held to. The 3D loads after the page, so the words and a still of each stage are there first, and the render takes over when it is ready.
In Lighthouse it scored 97 for performance on a phone and 100 on a desktop, with 100 for accessibility and best practice.
A still for every stage
Each step of the ring has a still image, drawn by the same 3D code, shown until the render is ready.
It steps aside when it should
Reduced motion, Save-Data or a device without proper graphics support gets the stills instead of the 3D.
Smooth on a slower device
The render lowers its own resolution when frames run long, rather than stutter.
Nothing from anyone else
Instrument Serif and Geist are served from the page itself, and it loads nothing from another company.
Tech Stack
Everything on the page was written for it: no framework and no 3D library.
Build
Static HTML, CSS and JavaScript
3D
WebGL2 ray tracer written for the page
Motion
Scroll motion on transforms and opacity; off for reduced motion
Type
Instrument Serif and Geist, self-hosted
Weight
Under 500 KB with the 3D
Want a site with this kind of wow?
The same care can go into a real business: motion that earns its place, built to load fast and to work for everyone. Tell me what you have in mind.
Website packages and prices