Rondist is a single-file HTML template for a diamond-cutting atelier that makes engagement rings to order, dressed as a fictional four-bench workshop in Antwerp's diamond quarter. The page follows one stone from rough crystal to finished brilliant, and the header counts its facets the whole way. It is set in a cool silver studio with technical facet drawings and one fluorescence blue. Everything is plain HTML, CSS and JavaScript with no framework, no build step and no photographs, and the Instrument Sans typeface is embedded in the file.
The diamond is ray-traced in one WebGL fragment shader. The stone is defined by its facet planes, so a cut is data: light bounces inside it by total internal reflection and splits into colour where it leaves, the rough faces and the girdle are frosted, and the cut facets are polished. When the loader lifts, a frosted rough is cut into a brilliant in under three seconds while the facet count runs to 57. Then it keeps turning, a light follows the cursor through its facets, flecks of spectral fire circle the studio wall, and scroll speed spins the stone.
Scrolling rewinds the cut to the rough and does it again in stages: the top sawn off and the girdle rounded, the main facets blocked one after another, then the stars and halves polished until the fire shows. The same planes draw exact facet diagrams in SVG, so a drawing and the stone never disagree. Below the story, three stones on the bench (round, oval and emerald cut) each turn in a live render beside their facet plot, the atelier copy sits on the studio wall beside the finished stone, and in the commission form choosing a shape redraws its diagram. An FAQ keeps one answer open at a time and a newsletter form closes the page. The forms validate and confirm in the browser only, so connect them to your own booking system before launch.
Dark mode follows the visitor's system setting, buttons and cards take bevelled corners where the browser supports them, and adding ?tune to the address opens sliders for the stone's refraction, dispersion, exposure, spin and fire. The download is a ZIP with the page as index.html and RECREATE.md, a build prompt for an AI coding agent. It sets out the concept, palette, type and copy rules, explains how the motion system works and what the accessibility pass covers, and ends with the full page source; that source links its fonts from Google Fonts, where index.html has them built in. Names, prices, stone grades and contact details are placeholders for your own.
Key Features
– Plain HTML, CSS and JavaScript in one file, with no framework, no build step and no image files
– Diamond ray-traced in WebGL with internal reflection, dispersion and a cursor-following light
– Hero that cuts a rough into a 57-facet brilliant, then keeps turning with spectral fire on the wall
– Scroll story through four cutting stages, with the live facet count in the header
– Round, oval and emerald-cut stones rendered live beside exact SVG facet diagrams
– Commission form whose shape choice redraws the facet diagram, with a date field and inline errors
– Dark mode, reduced-motion stills, facet diagrams where WebGL is unavailable and a native dialog menu
Ideal For
Diamond cutters, jewellers and engagement ring makers working to order.
Gem dealers and bespoke jewellery ateliers.
Studios pitching a luxury craft site with no photography to license.
