Fable 13 · Guide 04 · Jewellery e-commerce
The brief: a jewellery store with a product grid, cart flow and product page. The idea: a Viennese atelier whose signature ring you don't photograph — you draw it live, in the metal and stone the customer chooses.
The Signet No.1 is built from three.js primitives: a torus band, sphere shoulders, four
tilted prong cylinders, a collet cone, and a faceted stone merged from an eight-sided
pavilion, crown and table — a brilliant cut's silhouette in ninety lines. Materials are
MeshPhysicalMaterial with metalness 1 and per-metal roughness, lit by
RoomEnvironment through a PMREM environment plus a candle-warm key light and a
cool rim. Four metals × four stones = sixteen rings, all real-time, all draggable, with a
breathing sparkle sprite on the stone. Prices honestly change with the materials.
Bodoni Moda — a true didone with razor hairlines — carries the display voice; the italic candlelight is the whole brand gesture. Jost does quiet geometric labour underneath, letter-spaced into vitrine labels.
The configurator and the six vitrine pieces share one case (cart): a spring drawer with remove actions and a localStorage-persisted total, honest to the last line — “request this case” admits the atelier is fictional while the geometry is real. Drawer and option-chip patterns cross-checked on 21st.dev; photography from Unsplash (free license), curated for candlelit warmth. Motion (motion.dev) drives reveals, chip pulses and the drawer spring.
Process — three passes
"three" specifier); prongs — placed with lookAt — had rotated into
horizontal bars, rebuilt as tilted cylinders that actually hold the stone.