Guide · Site 01 of 25

How Maison Lumen was made

A fictional haute parfumerie, built to prove that "luxury" is a set of concrete, learnable techniques: restraint, choreography, and one good shader.

The concept

Luxury perfume houses sell an atmosphere, not a product — so the site is built around atmosphere as engineering. Deep umber and champagne tones, one serif pushed hard (Cormorant Garamond at weight 300), enormous whitespace, French copy fragments, and a pace that refuses to hurry. The aesthetic school is French editorial: Hermès patience, Aesop restraint.

Technique 1 — the WebGL silk hero

The hero background is a single fragment shader, hand-written in raw WebGL — no three.js, no library. It's domain-warped fractal Brownian motion: noise fed through itself twice, which is what makes it billow like fabric rather than boil like static.

vec2 q = vec2(fbm(uv + T), fbm(uv - T*.7));
vec2 w = vec2(fbm(uv + q*1.7 + T*.6), fbm(uv + q*1.7 - T*.4));
float f = fbm(uv + w*2.4);   // noise warped by noise = silk

The color ramp maps that noise through umber → amber → gold → champagne, a fake "sheen" term adds directional highlights, and the pointer position leans the fabric gently. It renders one triangle, caps device-pixel-ratio at 1.75, and pauses when scrolled away or when the tab is hidden. If WebGL is missing or the visitor prefers reduced motion, a static radial-gradient fallback fades in instead.

Technique 2 — the horizontal collection

The four extraits ride a scroll-hijack-free horizontal gallery: the section is 420vh tall, its inner viewport is position: sticky, and vertical scroll progress maps to a translateX on the card track. You keep native scroll physics; the page just chooses to spend that scroll sideways for a while. A hairline progress bar shows where you are.

Technique 3 — bottles with zero images

Each flacon in the collection is pure CSS — a bordered box with a gradient "fill line" for the liquid, an inset box-shadow for glass thickness, a colored drop shadow as the liquid's glow, and a skewed white gradient that sweeps across on hover like light down a bottle. Changing one custom property (--liq) recolors the whole bottle.

Technique 4 — the choreography

• Hero lines rise from behind overflow: hidden masks, staggered 180ms apart — the classic editorial entrance.
• Scroll reveals use one IntersectionObserver and a single .reveal → .in class; every easing on the page is the same curve, cubic-bezier(.2,.7,.2,1), which is most of what "feels expensive" means.
• The muse portrait drifts on a slow parallax (±34px, computed from its position in the viewport, not a library).
• A film-grain overlay — an inline SVG feTurbulence texture stepped through 10 positions — keeps the dark areas alive.
• The gold dot cursor is 8 lines of lerp; it grows over anything interactive and is disabled on touch devices.

The photography

The two photographs (the decanter on silk, the muse in the fragrance mist) were generated with Higgsfield Soul 2 from written art direction — "chiaroscuro, light raking through venetian blinds, quiet opulence" — then delivered as ~150KB WebP files. Total media cost for the page: under one credit.

How it was made

Written by Claude (Fable 5) as one hand-authored HTML file — vanilla HTML/CSS/JS, no framework, no build step, no template. Part of the Fable 25, a 25-site showcase in which every site uses a different aesthetic school and technique set, deployed on Cloudflare Pages.

Steal this

• One easing curve everywhere. Pick a good one (cubic-bezier(.2,.7,.2,1)) and delete every other transition timing in your CSS.
• Domain-warp your noise. fbm(uv + fbm(uv)) is the difference between lava-lamp and silk. It's 3 extra lines.
• Sticky + translateX gives you horizontal storytelling without hijacking the wheel.
• Mask-and-rise entrances: wrap each line in overflow:hidden, translate the inner span 110% down, animate up with a stagger.
• Spend your color budget on one accent. This whole site is umber + champagne + a single gold.