Live page · scroll inside

Premiumdistillery · dark · landing page · gsap · lenis · html

Barrel

A single-malt distillery site in near-black and amber: a pinned age scrub where scrolling ages the spirit in a tasting glass through a colour lookup while the year, stage copy and angel's share change, three expressions with tasting radars that draw on enter, a five-step process line and a tour booker with a live total.

Placeholder photos by Anastasia Zhenina on Unsplash. Replace them with your own before launch.

What's inside

01
Barrel preloader
The liquid rect rises inside a clipped glass over 1 s; the name fades; the slab lifts.
02
Fixed bar with a cask-mark
Turns translucent after 80 px; underlines draw.
03
Full-bleed warehouse hero
Photo settles from 1.08 scaled and drifts 12 % on scroll; lines rise; a thin rule grows from the top at the right.
04
Pinned age scrub
Scrolling 300 vh scrubs t 0→1 (21 years): the year counter ticks, liquid colour interpolates in RGB between six stops, the level lowers, the stage text swaps with a quick fade at each threshold, the angel's share counts up, and the cask end gains a 'YEAR' stamp.
05
Expressions with tasting radars
Cards rise; each radar draws on enter: rings fade in, axes extend, the polygon scales from the centre with back.out and its outline strokes in; hovering a card lifts it 6 px and pulses the polygon.
06
Five-step process line
The rule draws left to right as the steps enter; discs pop in sequence; the photo unrolls.
07
Tour booking
The photo unrolls; cards rise; picking an option animates the amber border and counts the total.
08
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…

Barrel

Placeholder photos by Anastasia Zhenina on Unsplash. Replace them with your own before launch.

What's inside

Barrel preloader

The liquid rect rises inside a clipped glass over 1 s; the name fades; the slab lifts.

Fixed bar with a cask-mark

Turns translucent after 80 px; underlines draw.

Full-bleed warehouse hero

Photo settles from 1.08 scaled and drifts 12 % on scroll; lines rise; a thin rule grows from the top at the right.

Pinned age scrub

Scrolling 300 vh scrubs t 0→1 (21 years): the year counter ticks, liquid colour interpolates in RGB between six stops, the level lowers, the stage text swaps with a quick fade at each threshold, the angel's share counts up, and the cask end gains a 'YEAR' stamp.

Expressions with tasting radars

Cards rise; each radar draws on enter: rings fade in, axes extend, the polygon scales from the centre with back.out and its outline strokes in; hovering a card lifts it 6 px and pulses the polygon.

Five-step process line

The rule draws left to right as the steps enter; discs pop in sequence; the photo unrolls.

Tour booking

The photo unrolls; cards rise; picking an option animates the amber border and counts the total.

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.