VESSEL — Prestige Fragrance House
Bottled weather.
An editorial launch site for a prestige perfume house. A live React Three Fiber scene pins a frosted-glass bottle over a drifting, hand-written GLSL 'weather' smoke shader; as you scroll the top → heart → base notes, the smoke shifts hue and the amber liquid inside the bottle rises and swirls. A notes pyramid, a four-fragrance collection, an ingredient library and a discovery-set builder complete a static-export site.
Role · Design + front-end build (R3F bottle + custom GLSL, GSAP scroll choreography) · Updated Jul 2026
- 6+ page types: scroll-cinema home, collection, per-fragrance detail (×4), maison, notes library, discovery builder
- The R3F frosted-bottle scene + two hand-written GLSL shaders (liquid + weather smoke)
- Procedural bottle and botanical SVG art — zero image assets
- GSAP ScrollTrigger + Lenis motion foundation with a reduced-motion matchMedia gate
- Delivery
- 3–4 days
- Licence
- One-time licence · full source
- Support
- 14 days setup support
- Updates
- Free updates included
Backend · CMS / commerce
Fragrances, notes and copy are typed data; wire the discovery-set flow to any commerce backend and the content to a CMS.
Delivered as full Next.js source. Swap the fragrances and notes data, retheme per-family accents, and wire the discovery set to your commerce backend.
What makes it special
A bottle you can almost smell
A procedural frosted-glass bottle (React Three Fiber) holds an amber liquid rendered by a hand-written GLSL noise shader. Scroll changes the fill level and the swirl — the fragrance moves as you read it.
Scroll through the notes
As the cinema travels top → heart → base, a custom domain-warped 'weather' smoke shader behind the bottle shifts hue — citrus-green, then floral, then amber-wood — so the structure of the scent is something you watch unfold.
Every visual is drawn
Bottles, botanical glyphs, the notes pyramid and the collection are all procedural SVG/GLSL — no photography, no stock. Zero image weight, fully rethemeable per fragrance.
A complete house IA
Home cinema, a filterable four-fragrance collection, per-fragrance detail pages, a maison story, a nine-material ingredient library, and a capped discovery-set builder.
Luxurious and accessible
A hushed serif system with every scene behind prefers-reduced-motion — the reduced path shows a large, beautifully-lit static bottle (which doubles as the store card). Self-hosted fonts, no runtime external requests.
What’s included
- 6+ page types: scroll-cinema home, collection, per-fragrance detail (×4), maison, notes library, discovery builder
- The R3F frosted-bottle scene + two hand-written GLSL shaders (liquid + weather smoke)
- Procedural bottle and botanical SVG art — zero image assets
- GSAP ScrollTrigger + Lenis motion foundation with a reduced-motion matchMedia gate
- Full Next.js 15 / TypeScript source, static export, WCAG 2.2 AA intent
More Beauty & Skincare templates
Explore more collections
Frequently asked
- What do I get when I buy VESSEL?
- A one-time licence with the full, editable source code, including 6+ page types: scroll-cinema home, collection, per-fragrance detail (×4), maison, notes library, discovery builder, the r3f frosted-bottle scene + two hand-written glsl shaders (liquid + weather smoke), procedural bottle and botanical svg art — zero image assets. 14 days setup support and free updates included.
- What is VESSEL built with?
- It's a Next.js marketing site, built with Next.js 15, TypeScript, Tailwind v4, GSAP ScrollTrigger, React Three Fiber. You receive the complete source to host and extend anywhere.
- Can YantraCore customise VESSEL for my brand?
- Yes — buy it as-is for $4,300, or have YantraCore tailor it to your brand, content and requirements. Start from this page or commission a custom build.
- How fast is delivery?
- Delivery is 3–4 days after purchase.
Make VESSEL yours.
Buy it as-is, or have YantraCore tailor it to your brand and content.