Most perfume sites feel like catalogs. Nocturne needed an editorial experience — scroll-pinned bottle motion, a nine-formulation ledger, and a quiet matching ritual — without sacrificing commerce clarity on mobile.
Lead with one composition: a cream-plate hero and a bottle that docks into the product grid. Layer Collections, The Distiller, and an apothecary spec sheet as focused overlays so the homepage stays calm while deeper tools stay one tap away.
Built in React and Vite with GSAP ScrollTrigger and Lenis for the hero path, Motion for drawers, and localStorage for the Scent Vault. Tuned native scroll and fixed pinning on touch so the bottle animation stays smooth on mobile, and compressed bottle assets for faster first paint.
A complete interactive storefront: three flagship cards, nine color-shift formulations, Distiller matching, product specs, simulated checkout, and a vault for secured batches.