Brewery Template

£20 or the whole Vault, £99

One-page site for any drinks brand whose range maps to a colour per flavour: beer, cider, kombucha, canned coffee. A draggable spinning can is the hero, the only saturated object on an industrial gunmetal shell, and picking a product retokens the whole page. Shown as a craft brewery and taproom.

ScrollTrigger Lenis advanced

5 more details

draggablemomentuminfinite-loopscroll-revealtoken-theming

This template reads better at your own screen size than in the frame below:

Open the template in a new tab

Updated 2 September 2026

About this template

A complete one-page site for an independent craft brewery and taproom, built like the building it brews in: a cool gunmetal shell with stencilled mono labels, hairline structure and a raw-concrete band, against which the cans are the only saturated objects on the page. The hero is the signature itself: an oversized, brightly labelled can front and centre on the quiet industrial field, draggable to spin, with the display headline running beside and partly behind it and the four-beer switcher within reach. Every piece of imagery is designed SVG in the brand's hand, the can labels, the taproom floor plan, the lot, so there is no photography to source, license or replace.

Read the full template overview

Drag the can sideways and its label strip spins behind the rounded mask like a real cylinder, with momentum after a flick, a liquid-slosh tilt against the drag, a specular highlight sweeping the metal and motion streaks at speed, before an elastic wobble settles it upright. Tap the can, press Enter on it, or pick a beer from the hero tabs or the menu, and the label art swaps while the page's live accent animates to match, recolouring the headline, buttons, chips, tank drawings and process numerals, never the ground.

Four beers ship with distinct SVG label compositions in gold, mint, sky and lilac, and each is a template element with an accent colour attached: add a fifth beer by drawing one more label and adding one tab and one menu row. The rest of the page is a ruled beer menu, a raw-concrete taproom section with a drawn floor plan and real hours, a deep process ribbon with oversized overlapping numerals, and a visit footer whose giant wordmark crops off the bottom of the page.

Making it yours is a token edit: the palette lives as CSS custom properties with RGB triples, the fictional brand is confined to copy and the label art, and every section's script guards its own markup so sections can be deleted independently. Works as a plain readable document with JavaScript disabled, and presents a designed static page under reduced motion.

Brewery Template - website template preview

What's included

8 items

Draggable hero can with flick momentum, wrapping label strip, tilt, sweeping specular highlight and motion streaks at speed
Brew switcher in the hero (mirrored in the menu) that swaps SVG label art and animates the page's accent tokens so every section answers the chosen beer
Four distinct SVG can-label compositions plus a drawn taproom floor plan, no photography or stock assets anywhere
Elastic settle on release: the can wobbles back upright instead of snapping
Industrial art direction where the cans are the only saturated objects, with a measured contrast table shipped in the stylesheet
Scroll reveals with pre-hidden CSS gates, reduced-motion restore and a no-JS plain-document fallback
Touch-safe drag: vertical swipes on the can scroll the page, taps advance the beer, keyboard gets the same switch
Sections initialise independently, so any of the five can be deleted without breaking the rest

Perfect for

5 use cases

Craft breweries and taprooms that want a site as loud as their label art
Cider makers, kombucha brewers and coffee roasters with canned products to show off
Any drinks brand whose product range maps to a colour-per-flavour identity
Bars and bottle shops that want an illustrated, photography-free site
Product pages where one hero object should respond to a variant picker

How it works

5 sections

The can spinner

The label is a wide SVG strip translated behind the can body's rounded overflow mask, wrapping at one label width so it reads as a rotating cylinder. Raw pointer events feed drag distance and a smoothed velocity; a per-frame loop keeps the momentum going after release and decays it smoothly. The can tilts against the drag direction, its cast shadow shifts and stretches with speed, a specular gradient sweeps at half the label speed, and a streak overlay fades in as fake motion blur. Release springs the can back to upright.

Brew theming

Each beer lives in a template element holding its SVG label art plus data attributes for its accent colour and RGB triple. The hero tabs and the menu rows both carry data-brew-select, so either swaps the can's art, and a GSAP tween interpolates a proxy through the RGB values, writing --brew and --brew-rgb on the root each frame. Because the stylesheet resolves every accent use from those two tokens, the headline, buttons, chips, floor-plan tanks and process numerals all recolour together while the industrial ground stays put.

Touch and keyboard

The can is a real button with touch-action: pan-y, so a vertical swipe starting on it scrolls the page while horizontal movement is claimed for spinning only after the gesture proves more horizontal than vertical. Nothing commits on press, taps are detected by net pointer displacement, and a tap or Enter press pours the next beer, which also gives keyboard users the full show: the switch whips the can into a fast spin and swaps the label under the blur.

Scroll reveals

Reveal targets are pre-hidden in CSS under a has-js class added synchronously in the head, then animated in batches by ScrollTrigger as they enter view. The process section's oversized numerals slide across their panels a beat after each panel fades up. The page ends with the giant footer wordmark rising into its cropped position letter by letter, scrubbed to scroll so it replays naturally, with a brew-accented full stop landing last. A reduced-motion media query restores everything the gates hide, and the JS reduced-motion branch sets the same final state.

Without JavaScript

The markup is a complete readable document: all four beers, hours, prices and copy are plain text, and the default can renders from inline SVG. When GSAP cannot load, the script removes the gating class so nothing stays hidden; the spinner simply becomes a still illustration.

Plugins ScrollTrigger

Difficulty Advanced

Smooth scroll Lenis integration

Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this template's demo, from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility: 100
Best practices: 100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Questions about this template

Do I need photographs of my cans?

No. Four distinct SVG can-label compositions ship, plus a drawn taproom floor plan, with no photography or stock assets anywhere on the page. Your own label art would be redrawn as SVG to spin correctly, which is design work rather than a file drop.

What does picking a beer change?

The whole page. The brew switcher swaps the SVG label art and animates the page's accent tokens, so every section answers the chosen beer rather than just the hero. It is mirrored in the menu, so a visitor can switch from either place.

Can someone scroll past the can on a phone without spinning it?

Yes. A vertical swipe on the can scrolls the page, a tap advances to the next beer, and the keyboard gets the same switch. The drag is deliberately not allowed to claim vertical gestures, which is the usual way a hero object like this traps scroll.

Does it sell beer?

No, there is no shop or basket. It is a brewery and taproom site: the range, the taproom and the floor plan. Point buyers at your existing webshop or the trade list. If you need a working basket for a small range, the coffee roaster template in the catalogue has one.

Coffee Shop Template

Would it suit a drink that isn't beer?

Yes, if your range maps to a colour per flavour. Cider makers, kombucha brewers and canned coffee all fit the same shape, and more broadly any product page where one hero object should respond to a variant picker.

Paid template

Purchase to unlock the code.

Buying Brewery Template opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£20 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £99, one payment.

Documentation

Quick Start

1. Upload the files

Deploy the folder as-is to any static host. No build step.

Code snippet omitted: it ships with the download.

2. Swap in script.min.js for production (optional)

At the bottom of index.html:

Code snippet omitted: it ships with the download.

3. Make it yours

Brand name and copy: all in index.html, nowhere else.
Colours: the token block at the top of assets/style.css (see Palette).
Beers: the <template data-brew-art> blocks at the bottom of index.html (see The Beers below).
Smooth scroll: delete the Lenis <script> tag to scroll natively, or set data-smooth="off" on <html>. It is off automatically under reduced motion.

The Hero Can

The can is the hero. Drag it sideways to spin it; flick it and the momentum carries with a visible motion streak before decaying. The can tilts against the drag and wobbles back upright on release. A tap (or Enter, it is a real button) pours the next beer, and the switcher tabs sit directly beneath it.

Tuning lives at the top of initSpinner in assets/script.js:

Constant	Default	What it does
`DECAY`	`0.28`	Momentum retained per second after release. Lower dies faster; `0.5` spins noticeably longer.
`MAX_TILT`	`7`	Degrees the can leans against a drag. Past ~10 it reads as falling over, not sloshing.
kick in `spinnerKick`	`3400`	Spin speed (px/s) a beer switch adds.
streak divisor	`2600`	Speed at which motion streaks reach full strength.

The label strip wraps at the width of one label copy, so any label art works as long as it fills the 440 x 560 viewBox.

The Beers

Each beer is one <template data-brew-art="slug"> element holding its label SVG, one .brew-tab button in the hero, and one <li class="brew"> in the menu. To add a fifth beer:

1. Copy a template block, give it a new slug, draw the label (keep the 440 x 560 viewBox and the .lbl-name / .lbl-mono text classes), and set its accent:

Code snippet omitted: it ships with the download.

2. Copy a hero .brew-tab button and a menu <li class="brew"> row, set data-brew-select (and the row's data-brew-item) to the same slug, set their chip colour (style="--chip: #FFB37A"), and bump the row's .brew-index numeral. The hero switcher is a 2x2 grid; a fifth tab simply starts a third row.

That is the whole job: the switcher, the can swap, the accent animation and the tap-to-cycle order all read from those attributes. Deleting a beer is the same blocks in reverse. Check any new accent against the gunmetal for contrast (see Palette); the four that ship all clear 8.9:1 there.

Sections

Every section initialises independently; delete any <section> (or the hero, or the nav) and the rest keeps working.

Section	id	Notes
Hero	`#top`	The signature: the draggable can, the switcher tabs, the stencil label and the painted floor line. Removing the `.hero-stage` leaves a working type-led hero; the menu rows still switch the accent.
The beer menu	`#lineup`	A ruled list wired to the same switcher; the active beer is highlighted here too. Removing it leaves the hero tabs as the only switcher.
Taproom	`#taproom`	The raw-concrete band. The floor plan is an SVG; edit its labels and shapes directly, or replace the whole `<svg>`. Hours are plain markup in two places: the table here and the short line in Visit.
Process	`#process`	The numeral ribbon on the deeper band. Steps are `<li>`s; add or remove freely, numbering is in the markup.
Visit / footer	`#visit`	The giant cropped wordmark is `aria-hidden` text; change it with the brand name. As the page ends it rises into place letter by letter, scrubbed to scroll, with a brew-accented full stop arriving last; to remove the animation, delete `initWordmark` in `script.js` (the wordmark then just sits in its cropped position). The email link is a `mailto:`.

Palette

The whole scheme is the token block at the top of assets/style.css. Every colour ships as a hex plus an RGB triple (--ground / --ground-rgb), and every translucent value in the stylesheet resolves from the triples, so a reskin is editing the pairs in that block, never hunting rgba() literals. There is no palette picker; repaint the tokens.

The system in one sentence: dark industrial surfaces (--ground, --ground-deep, --panel) carry --chalk type, the concrete band carries --ink type, and all saturation lives in the four beer accents and the live --brew token.

Constraints to keep when repainting (the measured table in the stylesheet header has the full numbers):

Each surface has exactly one type colour: chalk never lands on concrete, ink never lands on the gunmetal.
The beer accents sit at ~1:1 against the concrete, so on the floor plan an accent is only ever a fill inside a 3px ink outline; the outline carries the shape.
Keep the shell dark and quiet: lightening --ground past #3A4045 starves the accents' glow, and the whole design is the distance between the shell and the cans.
--plum and --cream belong to the can artwork and to type sitting on an accent fill; they are not page colours.
--brew / --brew-rgb are live tokens the script animates. Their rest values should match your default beer's accent.

Accessibility

No JavaScript: the page is a complete plain document; every beer, price and opening hour is real text, and the default can renders from inline SVG. If the GSAP CDN is blocked, the script removes the gating class so nothing stays hidden.
Reduced motion: reveals are restored by CSS, the can presents a designed still (posed tilt, parked highlight), and the beer switcher still works, instantly and without spin.
Keyboard: the can is a <button>; Enter pours the next beer with the full spin. The switcher tabs and menu buttons carry aria-pressed. Focus states are visible on both the dark and concrete surfaces.
Touch: vertical swipes starting on the can scroll the page; only a clearly horizontal drag spins it. Taps are detected by net displacement.
The label art and the can itself are aria-hidden; everything they say is in the menu text.

Dependencies

GSAP 3.15.0 (core)
ScrollTrigger 3.15.0
Lenis 1.3.17 (optional smooth scroll; delete its tag to drop it)
Google Fonts: Passion One, Gantari, Xanh Mono

All loaded from CDNs in index.html; no build tools, no packages.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.