Beverages · Light

Cask

A bottle standing still in the center while the world around it changes wood: background, liquid and label shift from amber to green and mahogany, with floating barrel shavings and a condensed italic serif.

Palette

--ambar#8f6420
state 1 background (light wood), where the text sits (4.5:1 with --texto-claro)
--ambar-luz#b6822e
halo of light behind the bottle in state 1
--verde#304833
state 2 background and the origin section
--mogno#543921
state 3 background and the shop
--escuro#24150b
process section
--creme#f0e4d0
tasting section, labels, footer wordmark
--texto-claro#f6eee1
headlines over strong colors
--texto-escuro#2a1a0e
text over cream
--texto-escuro-2#6b5643
secondary text over cream (5.5:1)
--acento-texto#8a5a2e
copper darkened for text over cream (4.7:1)
--acento#c9783a
copper: still line, active marker

Typography

Display: high-contrast condensed serif (didone/transitional), weight 400, mixed case; first line roman, second in italic; tracking -0.02em; clamp(2.6rem,5.5vw,5rem) — suggestions: Instrument Serif / Bodoni Moda.
Body: discreet grotesque 400, 10–13px — suggestions: Inter / Figtree.
Support/labels: grotesque 9–10px in mixed case for metadata (city · year), and large serif numerals (01–04, years, %).
Treatments: headlines always in the form "statement, italic"; giant serif wordmark cropped at the bottom of the footer; old-style numerals.

Sections

Nav — serif wordmark on the left, 3 center links, outline "buy" pill on the right.
Hero (pin) — bottle in the center; wood chips and staves floating around at different depths; 2-line title on the left (wood, age in italic); on the right, a short note and a vertical 3-dot selector; base with origin and "scroll to switch".
Process — dark background; 2-line title; 4 illustrated steps (cane, mill, still, barrel) linked by a copper line; large serif numerals + name + phrase.
Tasting — cream background; 2-line title; selector of 3 woods; radial aroma wheel with a glass in the center and cut-out ingredients in each slice.
Origin — green background; photo in an arch-shaped window; 2-line title; 2×2 grid of serif numbers with captions and dividers.
Shop — mahogany background; title; three bottles on a shelf; name, spec, price and "buy" pill in divided columns.
Footer — row of contacts and legal notice; giant cream wordmark, cropped.

Motion and interaction

Wood switch: scroll scrub with pin → background interpolates color, bottle liquid and label crossfade, title swaps, selector's active dot moves down.
Floating chips: scroll + cursor → parallax by depth (2.5D), slow continuous rotation; on switch, they spin 30–60°.
Copper line: scroll scrub → SVG path draws itself linking the steps; steps light up in sequence.
Aroma wheel: click/scroll → wheel rotates to the active wood; ingredients enter slice by slice.
Bottles on the shelf: entrance → rise with stagger; hover tilts 3°.
Tech: GSAP ScrollTrigger + Lenis; PNG layers (no real 3D).

Components

Outline pill: 1px --linha border, 9px text, 999px radius.
Vertical selector: 3 dots of 6px linked by a 1px line, active with a 10px ring, 8px label beside it.
Illustrated step: cut-out image, 40px serif numeral, 12px name, 9px phrase.
Aroma wheel: circle divided into 6 slices by 1px lines, 8px labels.
Number card: 44px serif numeral + 8px caption, 1px divider.
Product on the shelf: bottle PNG, 16px serif name, 9px spec, 11px price, outline pill.