Live page · scroll inside

Premiumperfume · light · landing page · gsap · lenis · html

Essence

A perfume house site on ivory: a hero with a canvas of slow scent particles tinted by the chosen note (top, heart, base) and stirred by the pointer, a pinned note pyramid that unstacks on scroll while its ingredient lists light up and the particle tint follows, three fragrance cards with note bars, and a three-question chooser with a discovery-set offer.

Placeholder photos by Mohamed Nohassi, Rae Wallis and Benjamin Ngo on Unsplash. Replace them with your own before launch.

What's inside

01
Essence preloader
The drop falls 60 px with power2.in, two rings expand and fade, the name fades, the slab lifts.
02
Fixed bar
Turns translucent after 80 px; underlines draw.
03
Scent particle hero
Particles drift upward in a gentle noise field, 120 at a time, with the tint crossfading over 1.2 s when a chip is chosen; hovering a chip previews its tint; the pointer stirs the field (particles curve away from it); the h1 lines rise; the arch unrolls.
04
Note pyramid that unstacks
Scrolling 220 vh scrubs the layers apart: the top lifts 160 px and fades to 0.4, the base sinks 120 px, each layer's ingredient list slides in from its side as it separates and the particle tint in the hero's canvas is mirrored by a soft band colour; a timeline rail at the bottom moves a dot from '0 min' to '8 h'.
05
Three fragrances
Cards rise with a stagger; hovering a card grows its note bar and tints the hero particles to its dominant note.
06
Find your scent
Chips press; the result card crossfades after each answer and the matching fragrance card above gets a ring; the photo drifts.
07
Minimal footer
None.

Utility pages in the same file: 404 · Style guide · Password · Changelog

How to use it

From prompt to a live page.

01
Walk the page
The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.
02
Pick a palette
Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.
03
Pick your stack
Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.
04
Copy the prompt
It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.
05
Make it yours, then iterate
Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.

More templates

Free♥ 0

Abacus

Accountancy practice

Template

Premium♥ 0

Kittiwake Air

travel/regional airline

Template

Premium♥ 0

Laneline

sport/mobile app

Template

Free♥ 0

Beacon

Feature flags

Template

Loading…

Essence

Placeholder photos by Mohamed Nohassi, Rae Wallis and Benjamin Ngo on Unsplash. Replace them with your own before launch.

What's inside

Essence preloader

The drop falls 60 px with power2.in, two rings expand and fade, the name fades, the slab lifts.

Fixed bar

Turns translucent after 80 px; underlines draw.

Scent particle hero

Particles drift upward in a gentle noise field, 120 at a time, with the tint crossfading over 1.2 s when a chip is chosen; hovering a chip previews its tint; the pointer stirs the field (particles curve away from it); the h1 lines rise; the arch unrolls.

Note pyramid that unstacks

Scrolling 220 vh scrubs the layers apart: the top lifts 160 px and fades to 0.4, the base sinks 120 px, each layer's ingredient list slides in from its side as it separates and the particle tint in the hero's canvas is mirrored by a soft band colour; a timeline rail at the bottom moves a dot from '0 min' to '8 h'.

Three fragrances

Cards rise with a stagger; hovering a card grows its note bar and tints the hero particles to its dominant note.

Find your scent

Chips press; the result card crossfades after each answer and the matching fragrance card above gets a ring; the photo drifts.

Minimal footer

None.

How to use it

From prompt to a live page.

Walk the page

The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.

Pick a palette

Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.

Pick your stack

Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.

Copy the prompt

It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.

Make it yours, then iterate

Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.