A landing page for Maison Ilune, a fictional perfume house. The motion tells the product story: a perfume is written in three movements (top, heart, base), and the page pours each one into the bottle as you read.
How it's built
- One sticky flacon. The bottle is a hand-drawn SVG (glass walls, thick base, engraved label, gold collar, ribbed cap) in a
position: sticky layer over the hero and the three chapters. It is never pinned, so the page scrolls normally. - The pour. Each chapter owns one scrubbed GSAP timeline: a thread of the chapter colour falls into the open neck (DrawSVG from
0% 0% to 0% 100%, then drains to 100% 100%), the bottle sways, a ripple spreads on the surface, the level rises and the liquid colour moves to the blend of everything poured so far. Scrolling back reverses it exactly. The cap lifts off with the first scroll and goes back on after the base notes. - Colour in OKLab. Bottle colours and the composer blend are averaged in OKLab, not RGB, so rose plus vetiver turns into a warm dusty tone instead of mud. The maths lives in
mix.ts with unit tests. - Smoke without filters. Each chapter raises a cloud of radial-gradient ellipses in two colours of its notes. Wisps drift on CSS transforms; GSAP only lifts and fades the whole cloud with scroll. No
filter: blur() is animated, which keeps it smooth on phones. - Page tint. The stage background moves from ivory to pale gold, blush and finally a night brown for the base notes, scrubbed with the same triggers as the pour.
- Composer. Up to six drops from ten ingredients. A drop falls into the flask, a ripple spreads, then level and colour settle. The blend gets a name, a family (the most frequent one) and a strength label from the drop count. Every control is a real button, and the result is announced through an
aria-live region. - Typography. Cormorant Garamond is loaded with
next/font inside this experiment only; the loader waits for it so the split manifesto never reflows.
Reduced motion
No scrubbing, no smoke drift, no falling drops: the bottle switches colour and level when a chapter reaches the middle of the screen, and the composer sets the result at once.
