How this was made

NÉBULEUSE is one of fifty showcase sites designed and built autonomously by Claude (Fable 5). This page documents the method so you can reproduce it.

1 · Concept & brief

The brief asked for a haute-perfumery maison told as cinematic scroll storytelling: a full-bleed looping mist video hero, a scroll-pinned "notes pyramid" revealing top / heart / base notes in sequence, an iridescent palette (base #0D0D11, gradient stops #C7C9D3 → #E8D5F0 → #B8E0E8 → #F0E6C8), and Fraunces (with its SOFT/WONK variable axes) paired with Inter. Mood: intoxicating, dreamlike. The copy was written to match — a perfume "built like weather," with each note tier framed as an altitude of one storm.

2 · Technique stack

• Full-bleed video hero — a provided 5s ink-mist clip in a <video autoplay muted loop playsinline> with a poster frame extracted via ffmpeg, under a two-layer radial + linear dark veil for text legibility.
• Scroll-pinned notes pyramid — a 340vh section with a position: sticky stage; a single GSAP ScrollTrigger timeline (scrub: 0.6) blurs/fades each tier in and out in sequence while an iridescent progress bar scales from Tête to Fond.
• Iridescent gradient text — the signature trick: a 4-stop gradient clipped to type with background-clip: text, oversized to 220% and slowly shimmering via background-position.
• Atmosphere — drifting blurred orbs (filter: blur(90px) circles on infinite ease-in-out keyframes) and an animated film-grain overlay built from an inline SVG feTurbulence data URI.
• Reduced motion — one media query plus a JS branch that un-pins the pyramid and lays the notes out statically.

The signature trick, in full:

.irid{
  background: linear-gradient(100deg,
    #C7C9D3 0%, #E8D5F0 28%, #B8E0E8 58%,
    #F0E6C8 82%, #C7C9D3 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 9s ease-in-out infinite alternate;
}
@keyframes shimmer{
  from{ background-position: 0% 50% }
  to  { background-position: 100% 50% }
}

And the pinned pyramid sequencing — one timeline, three tiers, each entering at i * 3:

const tl = gsap.timeline({ scrollTrigger: {
  trigger: '.notes', start: 'top top',
  end: 'bottom bottom', scrub: 0.6 }});
notes.forEach((n, i) => {
  tl.fromTo(n, { autoAlpha:0, y:90, filter:'blur(14px)' },
    { autoAlpha:1, y:0, filter:'blur(0px)' }, i * 3 + 0.4);
  if (i < notes.length - 1)
    tl.to(n, { autoAlpha:0, y:-70, filter:'blur(14px)' }, i * 3 + 2.4);
});

3 · Imagery & video

The hero mist clip was provided with the kit. The two flacon photographs were generated with MiniMax image-01 and compressed with ffmpeg to under 150 KB each. Example prompt:

sculptural perfume bottle of thick faceted glass, iridescent light
refractions splitting into lavender lilac and pale gold across the
glass, dark charcoal studio backdrop, dramatic single soft light,
editorial luxury product photography, shallow depth of field,
drifting mist wisps, ultra premium, moody

The first wide shot came back with off-palette red smoke; it was regenerated with explicit color constraints ("soft lilac lavender, pale powder blue and warm cream champagne tones only, no red no magenta") — palette discipline extends to the prompt.

4 · Iteration

The site was deployed after the first draft, then critiqued against live screenshots (Playwright, desktop + full-page + 390px mobile) for a minimum of three passes — checking hierarchy, spacing rhythm, gradient legibility, whether the pinned sequence lands mid-scroll, and console errors. Each pass ended with fixes and a redeploy.

5 · Credit

Designed and built autonomously by Claude (Fable 5) — part of the FABLE 50 experiment.