Brewery · Dark

Foam

An illustrated can as a jewel in a black studio: water becomes packaging in the opening, and the scroll swaps each flavor's "backdrop" for a full landscape, with giant chrome titles and a whispered interface in spaced mono.

Palette

--bg#000000
studio background, absolute black across almost the entire page
--surface#0B0B0C
transition bands and footer, ingredient cards
--accent#CB362A
red logo dot, form submit button, can sun
--text#F2F2F0
chrome titles (gradient base) and highlight text
--text-2#8C8C8C
descriptions, inactive flavor labels, nav links
--line#2A2A2A
outline of pill buttons, dividers, underlined input
--warm#35280E
amber tone of the landscapes/beer that bleeds into the flavor sections

Typography

Display: medium-condensed neo grotesque, weight 400–500, UPPERCASE, tracking -1%, enormous size (clamp(64px, 11vw, 180px)), filled with a vertical metallic gradient (white → 55% gray → white) — suggestions: Archivo (Expanded/Condensed via the wdth axis) / Familjen Grotesk
Body: neutral grotesque, 400, normal case, 22–34px in manifesto blocks with opacity increasing line by line — suggestions: Inter Tight / Geist
Support/labels: grotesque 10–11px in UPPERCASE with wide tracking (0.3em) for nav, flavor names, ABV/IBU and ingredient labels — suggestions: Space Grotesk / Geist Mono
Treatments: giant title split into two words with the can occupying the gap between them; spaced flavor names under each can; numeric spec line (ABV · IBU · ml) aligned right on a single line.

Sections

Intro/loader — black screen with a droplet/spiral of water that twists and solidifies into the central can (canvas frame sequence); the nav enters only afterwards.
Hero — can centered over a pool of water with concentric ripples; two-word title split to the left and right of the can; suspended droplets around it.
Flavor lineup — three cans side by side (the central one highlighted, the sides at 40% opacity), spaced name and spec under each; short phrase on the left and a circular CTA with an arrow on the right.
Full-screen flavors (pinned) — for each flavor, the can stays in the center while the background becomes a themed landscape (volcano/red, valley at dusk, night sea); giant chrome flavor name at the bottom left, small description above, spec and "buy" button on the right.
Manifesto — black background, short chrome title at the top left and a large paragraph that lights up line by line with the scroll.
Process — horizontal video/photo strip (grain being poured) and, below, three ingredient columns with a cut-out photo on a dark background, mono label and a one-line description.
Where to find — title on the left, postcode form with an underlined input and a red button; on the right the three cans on a reflective counter.
Footer — columns of links in minimal uppercase, email and social, "back to top" pill button.

Motion and interaction

Water becomes can: load → ~90-frame sequence drawn on a canvas, 2.5–3 s, ending on the still can; then the nav fades in over 400 ms. Likely a sequence of pre-rendered images.
Title that opens: scroll (start) → the two words slide out from behind the can to the sides (x ±18vw) with opacity 0→1, scrub.
Two drops, new flavors: scroll scrub → the side cans are born from falling drops that mold into cans (second frame sequence), then desaturate to 40% when focus returns to the central one.
Landscape swap: pinned section per flavor → clip-path inset from bottom to top reveals the landscape behind the can; chrome name rises 60px with a fade; Lenis smoothing (lerp ~0.08).
Lit-up manifesto: scroll scrub → each line goes from opacity 0.15 to 1 with blur 6px→0.
Ingredients: entrance → photos rise 40px and the cut-out opens, stagger 120 ms. GSAP ScrollTrigger.

Components

Outlined pill button: 1px --line, 32px height, 10px uppercase text tracking 0.25em.
Circular CTA: 40px outlined circle with an arrow, two-line label beside it.
Flavor card: cut-out can + spaced name + mono spec (ABV · IBU · type).
Chrome title: text with background-clip:text and a metallic gradient.
Ingredient card: photo on a black background, uppercase label and a one-line description.
Postcode form: underlined input + solid red pill button.