Showroom · Build notes

How Sillage was made

A maison de parfum with exactly one image: an AI-generated flacon study dissolved into the page ink. The luxury is pacing, and the perfumery underneath is real.

Enter the maison →

What it demonstrates

That scroll choreography works best when it is scarce. One reveal pattern — rise-and-fade, staggered by a tenth of a second — is the only motion on the page, so arriving at each section feels like a curtain, not a theme park. That one good product image, generated to match the palette and honestly labeled as AI-made, beats a drawn placeholder. And that fictional brands can carry true content: the etymology of sillage, extrait concentration, and the evaporation logic of the notes pyramid are all accurate.

Techniques, honestly named

Recreate it

Free sample
This site's prompt is one of the showroom's free samples — the same file the premium sites sell for $5. Copy it below, paste it into a capable AI coding tool, and iterate from what comes back.

Recreation prompt · sillage.md
# Sillage (maison de parfum)

Build a single self-contained `index.html`: a dark, gilded one-page site for a
fictional perfume house, "Sillage — Maison de haute parfumerie", presenting one
extrait, "Encre Dorée" (golden ink). The luxury is restraint: ink-black stage,
one gold, long silences between sections. The only image on the page is the
flacon — a single AI-generated product shot you supply (image prompt included
below), staged into the ink with CSS and disclosed as AI-generated in the fine
print. No libraries.

## Fonts and palette

Google Fonts: **Cormorant Garamond** (300/400/500 + italics — the italic is
the voice of the brand) with **Jost** (300/400/500) for small caps labels at
wide tracking (`letter-spacing: 0.42em`, uppercase, 0.7rem).

- ink `#141110`, raised ink `#1C1815`, hairline `#35302A`
- cream `#EFE7D8`, dim cream `#C9BFAC`
- gold `#C5A24E`, dim gold `#8A7136`
- Gold `::selection`, gold focus rings.

## Scroll choreography (the hero technique)

Sections carry `data-reveal`; their children start `opacity: 0;
translateY(26px)` and transition in (0.9s, gentle cubic-bezier) when an
IntersectionObserver sees the section (threshold ~0.18, unobserve after).
Stagger children ~120ms apart via `nth-child` transition delays. Gate the
initial hidden state behind BOTH a `html.js` class added by JavaScript and
`@media (prefers-reduced-motion: no-preference)` — with JS off or reduced
motion on, everything is simply visible. Nothing else on the page animates.

## Sections, top to bottom

1. **Hero** — near-full-viewport, centered: label "Maison de haute
   parfumerie", the word *Sillage* in italic light at `clamp(4.8rem, 16vw,
   13rem)`, tagline "What remains of you, after you have gone.", a small
   "Descend ↓" cue.
2. **Lexicon** — dictionary-entry panel on raised ink: the real etymology
   (French for a vessel's wake in water; in perfumery, the scent trail along
   the wearer's path), pronunciation "see-YAZH".
3. **Flacon** — two-column grid: a portrait product shot of the bottle,
   staged into the page. Generate the image with any capable image model;
   the prompt used for this build:

   > Editorial product photograph, portrait orientation: a rectangular
   > amber-glass perfume bottle with a wide faceted gold cap and a blank
   > matte-black label plate, standing on polished black marble. Behind it,
   > a slab of dark veined marble and one tall column of warm gold light on
   > the right. Low-key cinematic lighting, deep shadows, a soft reflection
   > on the marble floor, amber-and-gold palette on near-black.

   Ask for a background already close to your page ink, resize to web size
   (≤1200px wide, webp/jpg, ~100–300 KB), then dissolve the rectangle in
   CSS: put the `<img>` in a relatively-positioned `<figure>` (width
   `min(400px, 92%)`, centered) and paint an `::after` overlay with two
   linear-gradients running page-ink → transparent from every edge (16%
   from the sides, 14% from the top, 20% from the bottom) plus a soft
   radial corner darkening — the photo's edges melt into the ink and the
   flacon sits on the page as an object, not a pasted rectangle. A gentle
   `filter: sepia(.05) saturate(1.05) brightness(.97)` pulls the shot onto
   the palette. Honest `alt` text describing the actual bottle. Beside it,
   the composition copy (saffron opening, iris heart, labdanum and
   sandalwood base) and a `<dl>`: concentration (extrait de parfum, near
   thirty percent — keep the perfumery honest), flacon (50 ml, amber glass,
   faceted gilded stopper — "staged above in an AI-generated study, not a
   photograph"), édition ("a fiction, faithfully labeled — the maison
   exists only on this page").
4. **Olfactory pyramid** — interactive: an SVG pyramid of three polygons
   (Tête / Cœur / Fond) plus three toggle buttons with `aria-pressed`; both
   select a tier. The active polygon fills translucent gold. A panel
   (`aria-live="polite"`) shows the tier name, three notes with one-phrase
   descriptions (top: saffron, bergamot, pink pepper; heart: iris, jasmine
   sambac, cedarwood; base: labdanum, sandalwood, white musk), and an
   accurate sentence about that tier's volatility and duration.
5. **La maison** — a short essay, "Perfume is architecture in time": top
   notes are the most volatile and briefest, the heart carries the character
   for hours, the base (resins, woods, musks) lasts into the next day; the
   pyramid describes evaporation rates, not marketing.
6. **Footer** — "Sillage is a fictional maison; the flacon imagery is
   AI-generated. The perfumery above it is real." plus build-notes and home
   links.

## Quality bar

All interactive elements keyboard-reachable with visible gold focus rings;
the tier panel updates via `aria-live`; dim-cream body text stays AA on ink.
No horizontal scroll; at ≤800px both two-column grids stack and section
padding tightens. Serif at 300 weight only at display sizes — body text at
400. One `h1`. No motion under `prefers-reduced-motion`, no content hidden
without JavaScript. Disclose the AI-generated flacon imagery in the fine
print — never present it as photography.