Perfumery · Dark

Nightbloom

A cinematic descent through a photographic night garden, guided by a thread of golden light that runs down a root to a pool of water, and that ends in a giant mint-green word lit like neon.

Palette

--bg#0A0A0B
main background, almost neutral black
--bg-moss#1C2A24
greenish shadow of the garden scenes and vignettes
--text#F2F3EF
titles and light buttons
--text-2#9BA19D
paragraphs and metadata
--accent#8FC2B8
mint green of the final word, water glow, bullets
--glow#E6C27A
golden thread of light of the root and amber reflections

Typography

Display: neo grotesque in a light weight (300–400), normal case, tracking -0.02em; titles on 2 short lines, clamp(32px, 4vw, 56px); final word at ~40vw — suggestions: Instrument Sans / Switzer (Fontshare)
Body: same family at 400, 13–15px, line-height 1.6, greenish gray
Support/labels: 10–11px with a green circular bullet before it ("● label"), normal case, for section overlines
Treatments: hero keyword wrapped in an outlined glass pill; giant word in the footer with a mint gradient and a mirrored reflection below; small step numbers "01–04" over the cards

Sections

Nav — small logo with an icon on the left, 3 central links, white pill with a bag icon and counter on the right.
Hero — full-bleed photo of a night garden with a bottle in the center; 2-line title centered at the top with one word highlighted in a glass pill; two pill buttons (light + ghost) and a proof line below.
Descent — the background keeps descending into the earth; a vertical root with a thread of light links the bottle to the rest of the page; 2-line title on the left.
Composition — title on the left and notes (top, heart, base) as labels that light up along the root. 4b. Bottle — close-up of the bottle with a 2-line title on the left over the glass, metal and stone of the cap (the root continues behind).
Atelier — scene of a still and laboratory flasks on the earth, large title on the left.
Process — 4 glass cards side by side with number, title and text, over the scene; the root crosses behind and plunges into a well of light.
Collection — 3 product cards with a bottle photo at the top, name + price, description and tags; water ripple in the center.
Sample kit — wide glass card: text and price/shipping list on the left, photo of the box on the right, light button.
Testimonials — 3 quotes in glass cards at the top, large title below with roots of light descending.
Scarcity/CTA — title about a limited batch, thin progress bar, two buttons.
Footer — 4 columns of links/info and a giant mint-green word that lights up, with a reflection in the "water".

Motion and interaction

Logo intro: load → centered logo appears and disappears in ~1.2s before revealing the hero (fade + blur).
Garden descent: scroll scrub → photo layers (front, middle, back) in parallax with speeds 1.25 / 1 / 0.7; GSAP ScrollTrigger + Lenis.
Thread of light: scroll scrub → root SVG with stroke-dashoffset from 100% to 0 and a glowing dot traveling along the path (MotionPath), glow via a blur filter.
Notes that light up: scroll → when the tip of the thread passes a point, the note label fades in and the point pulses.
Water well: scroll → concentric ellipses (ripple) expand from the point where the root touches the water, 2.4s loop.
Glass cards: scroll → enter with y 40px and opacity 0, stagger 0.1s; hover brightens the border.
Final word: scroll scrub → opacity 0.2→1 and glow (mint text-shadow) growing; mirrored reflection with a gradient mask.

Components

Highlight pill in the title: 1.5px white border at 50%, white 8% background, 999px radius, padding 0 .25em.
Primary button: 34px white pill, 12px dark text with an icon on the left.
Ghost button: pill with an rgba white 8% background, --line border, light text.
Glass card: --glass background, backdrop-filter blur(14px), 1px --line border, 14px radius, 20px padding.
Product card: 4:5 photo at the top, 16px name + right-aligned price, 10px pill tags.
Overline: 6px --accent dot + 11px --text-2 text.
Batch bar: 1px --line track, --text fill, 10px caption.