Perfumery · Dark

Midnight

An amber bottle in the blue pitch-black of the small hours: the video advances with the scroll in acts marked by time of day, the camera dives into the bubbles of the liquid, and extra-wide heavy grotesque titles interrupt the delicate narration.

Palette

--bg#02040A
pitch-black background, almost bluish black
--bg-2#0A1424
midnight-blue halo behind the bottle and the sections
--amber#C8742A
liquid, progress line of the ruler, active dot
--amber-deep#5A2A0C
shadows of the liquid in close-up
--text#F1F1F3
headlines and narration
--text-2#7D8494
captions, inactive items, mono labels
--line#1E2433
table and ruler dividers
--steel#8FA6C4
cold glass reflections and corner brackets

Typography

Display (narration): neo grotesque 300–400, normal case, tracking -1%, clamp(28px, 2.8vw, 44px), always in 3 short lines — suggestions: Inter Tight / Geist
Display (headline): extra-wide (expanded) grotesque 800–900, UPPERCASE, tracking 0, line-height .9, clamp(32px, 3.6vw, 60px), 2–3 lines — suggestions: Unbounded / Archivo Expanded Black
Body: grotesque 400 11–12px gray
Support/labels: mono 8–9px UPPERCASE tracking 0.15em for chapter/time, page counter and callouts — suggestions: JetBrains Mono / Space Mono
Treatments: alternation between thin narration and heavy wide headlines; "NN / NN" counter in the corner; numbered hour ruler; callouts with a numbered circle.

Sections

Opening — total darkness; the bottle appears small in the center, with a thread of blue light outlining it.
Pinned acts — the bottle video advances: approach, dewdrops, dive into the amber bubbles; on the left the act's text (mono label with a Roman numeral and time + 3 lines of narration); on the right a vertical index of 3 acts with the active one marked; note callouts attached to the bottle; counter in the bottom-right corner; mono spec strip at the base.
Anatomy — midnight-blue background; wide headline on the left; bottle that separates vertically into 4 pieces (cap, collar, glass, drop) with numbered callouts and guide lines.
On the skin — split: photo of a wet ingredient on dark stone on the left (swaps with each note); on the right a wide headline, ruler from 0 to N hours with amber progress and a list of 3 notes (active in white, the rest in gray).
Ritual — wide headline in gray over a wet-stone texture background.
Closing — centered 2-line headline, bottle behind at low opacity and a specification table with the value on the right; CTA.

Motion and interaction

Video by acts: scroll scrub with pin (~500vh), frames on canvas; each act takes 1/3; the side index moves the dot.
Narration: line-by-line entrance (y 100% → 0 with a mask), exit with a fade; the next act's narration only enters once the previous one has gone.
Note callouts: when the bottle is in close-up, numbered circles appear with a line that grows to the label.
Exploded view: scroll scrub → pieces move apart in y (cap -22vh, collar -10vh, drop +18vh), callouts appear in sequence.
Notes ruler: scroll → amber fill advances across the hours; the matching note lights up and the photo swaps with a crossfade.
Headline: words enter with a clip from below and a slight skew.

Components

Chapter label: "numeral · time · name" mono 8px.
Act index: 1px vertical line with 3 mono items and an amber dot on the active one.
Page counter: "NN / NN" mono 8px in the bottom-right corner.
Callout: 18px circle with a number, 1px line and a mono label + gray subtitle.
Hour ruler: 11 numbered marks, 1px line, 2px amber fill, start/middle/end labels.
Note row: mono index, 15px name, 9px gray origin, description on the right.
Specification table: 32px rows, mono label, value on the right, --line divider.