# Loud Kettle, a free brewery website template

> Website for a craft brewery and taproom: beers on tap, events and table booking. One HTML file with GSAP scroll animations, no build step, MIT license. Made by 8B (https://8b.com/).

A one-page site for a small craft brewery with a taproom in an old tram shed: the tap list, a flight builder, brew day, events and a booking form. Near-black ground, cream tags and loud condensed capitals; an amber disc behind the hero pint floods the second screen, the beer cards fill with colour like glasses as they step down, and the brew-day steps turn on a wheel as you scroll.

- Page: https://8b.com/templates/loud-kettle/
- Live demo: https://8bsite.github.io/brewery-website-template/
- Repository (GitHub template): https://github.com/8bsite/brewery-website-template
- Download ZIP: https://github.com/8bsite/brewery-website-template/archive/refs/heads/main.zip
- Size: 96 KB, 24 photos (Unsplash), fonts: Bricolage Grotesque and Onest
- Motion: GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll

## Use it with an AI coding agent

Download the files into the project (Windows PowerShell: `curl.exe`):

```bash
curl -LO https://raw.githubusercontent.com/8bsite/brewery-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/brewery-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/brewery-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/brewery-website-template/main/CREDITS.md
```

Then:

```text
Read AGENTS.md, then edit index.html. Use this template as the base for a site for <your brewery, taproom or bar: name, city, what's on tap with styles and prices, opening hours, address, events, how to book>. Keep the layout, the motion and the single-file format; replace the brand name, copy, beers, prices, hours, events, quotes, photos, links and contacts, and recolour it through the CSS variables if needed.
```

Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/brewery-website-template my-site`.

## Design

Loud Kettle is a brewery website template for a small craft brewery with its own taproom; it also works for a brewpub, a beer bar or a cider house. The look is dark and loud: condensed capitals, cream tag labels and one colour per beer.

- Palette: #120c07 (near-black brown background), #f5e4c7 (cream text, tags, buttons, date stubs), #e3a43c (amber hero disc, IPA card, button hover), #2a221a (dark brown flight panel and stout card), #f15a26 (orange pale ale card), #c21d24 (red ale card), #f19656 (peach sour card), #b4a387 (muted tan secondary text)
- Fonts: Bricolage Grotesque (headings, tags, buttons: extra-bold, condensed, uppercase, some outlined), Onest (body and small tracked labels)

Cream tag labels with two punched holes top dashed-border cards on a near-black ground. Photos are cut into circles and tall pills, giant outlined words fill the width, beer cards step down a staircase, and events read as tickets.

## Sections and motion

- **Navigation** (navigation): top bar: two-line wordmark, section links, Book a table button; phone menu overlay
- **The kettle's loud. The beer's louder.** (opening): two-screen hero: headline, product photo on a brand-colour disc with three orbiting photos, then a manifesto sentence on the brand colour (demo: a pint and ingredients). Motion: Smooth scrolling runs page-wide. Round photos orbit the pint on a loop; on scroll the amber disc floods the screen, the pint lifts away and photo chips pop into the text.
- **Four things that never go in the kettle** (no-shortcuts): column of four hanging tag-cards (principles or features) among floating round photos. Motion: Tied to scroll, the four tag-cards drop in turn and swing to rest while round photos float up at two speeds.
- **What's pouring** (on-tap): giant outlined word over five product cards in a staircase, each in its own colour (demo: the beers on tap). Motion: On desktop the five cards step down the staircase as you scroll, each filling with colour like a poured glass.
- **Build a flight of four. $14** (flights): interactive picker: choose four items into round slots, then save (demo: a beer flight). Motion: A tapped beer drops into the next round slot, filling it with its colour from the bottom; tap a slot to clear it.
- **From grain to glass** (brew-day): five numbered process steps that turn on a big wheel as you scroll (demo: brew day from grain to glass). Motion: Pinned: the five numbered steps sit on a huge dashed wheel that turns one step at a time as you scroll.
- **The tram shed** (taproom): the venue: heading, lead, one wide and two small photos, three fact cards (demo: hours, dogs, food truck). Motion: The title rises line by line, and the three fact cards swing down on an elastic hinge as they arrive.
- **Overheard** (overheard): testimonials: giant outlined word and a slow scrolling row of six quotes on tag-cards. Motion: The outlined word's letters ripple in a wave that settles as it scrolls up; the quote cards below roll sideways, pausing on hover.
- **Ask the bar** (faq): questions and answers (native <details>), sticky heading on desktop. Motion: The heading rises line by line on arrival and stays beside the questions on desktop as you read.
- **Loud nights** (events): list of dated events as ticket rows: date stub, title, text, price and time. Motion: Tied to scroll, the ticket rows start stacked and tilted on the first one and deal out into a list.
- **Come thirsty** (visit): contact: photo of the venue, address, hours, phone and email cards, and a booking request form (placeholders). Motion: The Come thirsty heading rises line by line and the three fact cards swing down on their hinges.
- **Join the Kettle Club** (footer): width-filling outlined wordmark, links, newsletter signup, social icons, copyright and the Design: 8B credit

## Good for

- craft brewery or brewpub
- taproom, beer bar or cider house
- distillery, winery or coffee roaster with a tasting room
- any small venue with a menu of products, events and bookings

## Questions

**Does the flight builder save or send orders?** No. Pick four beers and Save shows the list to read out at the bar; nothing is stored or sent. Beer names and colours are set in the HTML.

**Do the booking and newsletter forms work?** Both check their fields and show a confirmation line, but neither sends anything until you connect a form service such as Formspree or Netlify Forms.

## Before publishing

Replace: social preview image, favicon, map, phone number, email address, contact form (sends nothing yet) and social media links, plus the invented demo facts (prices, dates, addresses).

## License

Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. The "Design: 8B" footer link is optional.