Craft Brewery Template
A one-page brewery and taproom site where a draggable spinning can is the hero: the only saturated object on an industrial gunmetal shell, and picking a beer retokens the whole page.
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.
What's Included
- 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
- 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
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 gsap.ticker loop keeps the momentum going after release and decays it exponentially. 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 triggers an elastic.out tween 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 with fromTo tweens via ScrollTrigger.batch. 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.