SILLAGE is a fictional Grasse perfume house — sillage is the scent-trail a person leaves behind them. The whole page is built around one full-screen fluid-smoke shader that curls, rises, and warms toward your cursor, so the site literally has a trail.
You cannot render smell, so the site renders its most photographed proxy: vapour. Everything else stays powder-soft and centred — a perfumer's counter, not a nightclub — so the smoke is the only thing that moves. The copy teaches the real vocabulary (top/heart/base, sillage) instead of selling adjectives.
Cormorant — display. Whisper-thin serifs with long ascenders; the typeface of a bottle label engraved, not printed.
Manrope — body and the wide-tracked caps that name each act of the fragrance pyramid.
| Element | How it works |
|---|---|
| Smoke shader | Domain-warped fBm — noise warped by noise warped by noise (three passes) — scrolled upward on a slow clock so it reads as rising vapour rather than static cloud. Six octaves, each rotated to break axis alignment. |
| The wake | The eased cursor position adds a warm bloom the smoke curls around, plus a velocity-offset "wake" puff behind the direction of travel — move fast and you drag a comet of vapour. That is the sillage, made literal. |
| Readability | The shader outputs low alpha and fades toward the top, so it veils rather than obscures; density warms from powder toward amber only where it thickens or nears the cursor. |
| The pyramid | Top / heart / base rendered as three literally-stacked tiers of increasing width — the fragrance pyramid as an actual pyramid, each tier warming on hover. |
| Accessibility | Reduced motion freezes shader time to a still curl of smoke that still responds to the cursor. All content is real text. |
| You do | The page does |
|---|---|
| Move your cursor | The vapour warms and gathers toward it; a wake trails your direction |
| Move quickly | The trail stretches — the site's whole conceit in one gesture |
| Hover a pyramid tier | That act of the fragrance warms to amber |