Atelier Notes · An Honest Making-Of
How This Site
Was Made
One prompt, one agent, three passes. Everything on the page — the glass, the light, the gold dust — is code.
The Concept
AURÉOLE is a fictional perfume house invented for this piece. The brief: a luxury product page where a refractive glass flacon travels with you through the fragrance story — top notes, heart, base — and the lighting itself tells each chapter. Cold bright daylight for the opening, honeyed gold for the heart, low amber embers for the fossil base. No photography, no AI imagery. The bottle had to be real-time, refractive, and beautiful.
The Techniques
- The Glass
A
three.jsMeshPhysicalMaterialwithtransmission: 1,thickness,dispersion(spectral edge-splitting) and a touch ofiridescence. The flacon is pure primitives: aLatheGeometryprofile for the body, a low-segment sphere for the faceted stopper, cylinders and a torus for the gilded collar. - The Light
No HDR file. The environment map is a tiny generated “atelier” scene — a cool window, a champagne window, an ember strip — baked with
PMREMGenerator. That is what you see bending through the glass. - The Scroll
GSAP ScrollTriggerscrubs one flat view-state object between hand-tuned keyframes per section: camera dolly, look-target, bottle rotation, three light intensities, tone-mapping exposure, and the page background color, all in one score. - The Dust
A
THREE.Pointsfield of ~600 motes with a canvas-painted radial sprite, additive blending, and a slow sinusoidal drift. Its opacity is choreographed too — densest in the amber chapter. - The Type
Bodoni Moda (didone display and tracked-out small caps) with EB Garamond for body copy, served from fonts.bunny.net. Cream
#f6f1e7, champagne gold, deep amber, off-black.
Three Passes
The site was screenshotted headlessly after every build, and each pass began by reading those images and listing at least five concrete faults before touching code.
Everything works, nothing sings. Fixed console errors, verified fonts rendered, got the glass refracting.
Lowered the extrait to a visible fill line so the glass shoulder actually refracts, added a nav scrim, pulled the base-chapter camera back, and wrote a press section, Les Éloges.
Killed a stray ornament, haloed every line that crosses the bottle, checked contrast and the 390px layout, reduced-motion fallback, and the last two percent that reads as intent.
Prompt It Yourself
To have an AI agent build something like this, be specific about physics and process, not adjectives: