Le Guide — how it was made

Anatomy of a glow

Maison Lumière is a fictional Parisian haute parfumerie, designed and built end-to-end by Claude (Fable 5) — concept, art direction, copy, code and AI-generated imagery. This page is the maker's log.

01

Concept

The brief: candlelit noir, liquid gold — a perfume house that behaves like a Vogue editorial. Slow, hushed, expensive. Everything on the page obeys one metaphor: light behaving like a liquid. The hero photograph ripples under the cursor, gold dust drifts up through the dark, and copy surfaces out of black like objects entering candlelight.

Italiana has the high-contrast, engraved elegance of a perfume label at 14rem; Cormorant italic carries the French asides; Jost's geometric lightness does the quiet administrative work — eyebrows, prices, coordinates — at 0.3–0.4em letterspacing.

02

Assets — GPT Image 2

Six images, generated with GPT Image 2 (quality: high), every one inspected before use — all six landed on the first take. Prompts were written like an art director's shot list: subject → materials → lighting → lens → palette → mood, with "no text, no watermark, no label" to keep the glass blank.

Hero flacon

1024 × 1536 · assets/hero-flacon.webp

"A dramatic chiaroscuro still-life photograph in the style of a Vogue editorial: a tall faceted rectangular glass perfume flacon filled with luminous liquid-gold amber perfume, unlabeled blank glass, standing upright on softly rippling black silk fabric, near-black charcoal background fading to pure darkness, a single warm candlelight beam from the upper left carving the bottle's bevelled edges in molten gold, a heavy cut-glass stopper catching one bright spark of light, faint golden caustic reflections pooling in the glossy silk folds beneath, 85mm lens, shallow depth of field, film grain, palette strictly of near-black, charcoal, deep amber and gold, hushed opulent candlelit-noir mood, no text, no watermark, no label"

Orb bottle — Jardin Minuit

1024 × 1536 · assets/bottle-orb.webp

"…a spherical smoked-glass perfume orb bottle with a black onyx stopper, filled with deep dark amber liquid with smoky depth… one narrow warm candle beam from the right rim-lighting the sphere's curve in molten gold, a wisp of incense smoke curling behind it…"

Fluted flacon — Aube Noire

1024 × 1536 · assets/bottle-flute.webp

"…a slender tall fluted glass perfume flacon filled with pale champagne-cream perfume liquid… a brushed gold collar and slim gold stopper, standing on rippling black silk beside a single fallen white jasmine blossom… candlelight from the upper left tracing the flutes in fine gold lines…"

Amber resin macro

1536 × 1024 · assets/macro-amber.webp

"An extreme macro photograph, editorial luxury style: rough chunks of raw amber resin and golden frankincense tears scattered across dark charcoal slate, backlit by warm candlelight so the resin glows from within like molten gold and honey… 100mm macro lens, razor-thin depth of field, film grain…"

Jasmine at night macro

1536 × 1024 · assets/macro-jasmine.webp

"An extreme macro photograph at night… white jasmine sambac blossoms and dark green leaves emerging from deep black shadow, petals moonlit with a faint warm candle glow from one side, fine dew droplets on the petals catching gold sparks…"

Grasse at dusk

1536 × 1024 · assets/grasse-dusk.webp

"A moody atmospheric landscape photograph: the hill town of Grasse in Provence seen from flowering jasmine and lavender fields at dusk… terracotta rooftops and a bell tower silhouetted against the last deep-amber band of sunset, thin violet haze, a few warm golden windows glowing…"

03

Techniques

• Liquid-gold displacement (raw WebGL). The signature moment — the hero photograph ripples like disturbed perfume under the cursor.
• Gold-dust particle canvas. ~130 twinkling motes drift upward on a fixed 2D canvas behind the whole page.
• GSAP ScrollTrigger choreography. Line-mask title reveals, card staggering, scrubbed parallax inside the macro imagery, French-formatted count-ups.
• Lenis smooth scroll, tuned to 1.25s — the "expensive" glide.
• Custom cursor — a gold dot with a lagging ring that blooms (and whispers Voir) over imagery.
• Slow marquee of fragrance notes, masked at the edges, paused on hover.
• Film grain — an animated SVG turbulence tile at 5% opacity over everything.

The displacement effect avoids a three.js dependency: a 128px offscreen 2D canvas is a flowmap that records the cursor's wake, fading each frame. The fragment shader displaces the photo along the flowmap's gradient, adds a whisper of chromatic split, and blooms gold where the liquid moves:

// each frame: paint the wake, fade it, feed it to the shader
fctx.globalCompositeOperation = 'destination-out';
fctx.fillStyle = 'rgba(0,0,0,0.045)';        // the wake heals itself
fctx.fillRect(0, 0, FLOW, FLOW);

// GLSL: bend the image along the wake's gradient
vec2 grad = vec2(fx, fy);                    // flowmap slope
vec2 uv   = coverUv(vUv + grad * 0.055 + idleBreath);
col      += gold * f * 0.10;                 // glow where it moves

If WebGL is unavailable — or the visitor prefers reduced motion — the canvas is never attached and the plain <img> underneath simply stays. Every heavy loop (dust, liquid) pauses when offscreen or when the tab is hidden.

04

Process — three passes

05

Ship it

Static files, no build step. Deploy the site directory as-is:

npx wrangler pages deploy . --project-name maison-lumiere