Skip to contentSkip to content
Expedition 16Turbine Hall RoadCraft Brewery ConceptDynamo, BC

Breaker Room Brewing

A beer board that changes the room, and a website that keeps its promises.

100

Accessibility, measured mobile

0.000

Cumulative layout shift

8

Room states on one beer board

breaker-room-brewing.vercel.app
Breaker Room Brewing live site screenshot
Built for breweries, wineries, cideries, and distilleries

Most producer sites pick brand or usefulness. The visitor needed both.

01

The tap list is the page that rots

The one page every beer drinker checks is the one page most brewery sites let go stale, and a stale board reads as a closed sign. Breaker Room makes the board the centre of the site, so keeping it alive is the point, not a chore.

02

Brewery templates all pour the same

Wood grain, a hop icon, a mountain photo, and the same three sections in the same order. When every taproom site looks identical, the road-tripper picks by distance. A world nobody else has is a reason to drive further.

03

Age gates that punish everyone

Most gates are a full-screen wall that annoys humans and starves search engines. This one is a single remembered confirmation, keyboard operable, that leaves the story pages crawlable and never asks twice.

04

Personality that buries the practical

A loud brand usually costs the visitor the hours, the parking, and the way home. Here the status board answers what is pouring, when the hall opens, and what is on next, one glance from the top of the page.

The approach

One artifact, carried all the way down.

01

Derive everything from one artifact

The 1920s control room supplies the palette, the type, the beer taxonomy, the page names, and the interactions. When the whole site comes from one place, nothing feels bolted on and nothing needs decorating.

02

Make the signature keep a promise

The copy says the board changes the room, so the board changes the room. The porter cuts the lights for real. A signature interaction that proves the site's own claim is worth ten that are merely pretty.

03

De-template every interior room

Panel codes and painted stencil words give all sixteen page types their own signage from the same system. Cohesion without repetition is what separates a world from a theme.

04

Measure, then say only what held

Accessibility 100, CLS zero, performance 94, all measured on mobile against the live build. The one metric that missed its anchor is documented in the case study instead of hidden, because the numbers are part of the craft.

The story

The thinking behind the build

Breaker Room Brewing is a fictional brewery in Dynamo, an invented BC hydro town, built to prove one thing: a taproom website does not have to choose between personality and usefulness. The whole brand is derived from a single artifact, the control room of a 1920s powerhouse, so the tap list becomes a switchboard, the beers become circuits, and the practical answers a road-tripper needs, hours, food, rides home, stay one glance from the top of every page.

Brewery websites usually fail in one of two directions. Either the brand does all the work and the visitor cannot find the hours, or the site is a dutiful information sheet with all the personality of a tax form. The brief for Breaker Room was to refuse the trade: build the loudest brewery concept in the range, and make it answer a road-tripper's practical questions faster than a plain site would.

The concept is one artifact carried all the way down. A decommissioned 1920s hydro powerhouse gives the brewery its entire visual language before a colour is chosen: switchboards, gauge dials, warning paint, copper conduit, concrete ribs. The beers are circuits with panel codes. The events page is the night shift. The FAQ promises no mystery switches. Nothing on the site needed generic mountain-brewery decoration, because the building already had a world.

The signature is the beer board. Eight switches sit on a wall beside one live panel, and throwing a switch changes the room: the palette, the pressure, the can art, the tasting notes, the food lane. Four beers go further and change the room's behaviour. Blackout Porter kills the lights, the whole section dropping to near-black with a brass lamp radial. Floodgate Sour opens the valve in magenta and teal. Breaker IPA tapes the section edges in hazard stripes. Turbine Hazy fogs the sweep. The homepage promised the porter cuts the lights, so the porter cuts the lights.

Every state change is a hard cut, on purpose. Breakers do not fade, and the room-state readout on each panel, lights out, valve open, slow burn, reports the change like an instrument would. It is the kind of detail nobody asks for and everyone remembers, and it turns the tap list, the one page every beer drinker checks, into the reason people show the site to a friend.

The interior pages refuse to be stamped from one template. Each hero carries its own hall signage: a panel-code placard and a giant painted stencil word, ROUTE on the visit page, LORE on the story, HALL on the taproom, bleeding off the wall like the building's original paint. The de-templating pass came from the toughest note in the independent review, and it is the difference between a site with a strong homepage and a world you can walk around in.

The practical layer holds the same standard. The age gate is a single remembered confirmation that works by keyboard and leaves the story and visit pages fully crawlable. The visit page groups address, parking, transit, and the ride plan into cards a phone can skim. Contact is three fields. The tap specs on every beer page render as instrument cards. And the copy never breaks the safe-service line: adults only where alcohol is served, no health claims, the ride home sorted before the second round.

The numbers are measured, not estimated: mobile accessibility 100, best practices 100, SEO 100, cumulative layout shift zero, and a 94 mobile performance median with the hero art still opening full-bleed. The full-route contact sheet, the overflow probe at five widths, and the keyboard pass all ran before ship, and the one number that missed its anchor, a 2.9 second mobile largest paint on a poster-sized hero, is documented instead of gamed.

The brewery, the town, and the beers are invented; the system is real. For a real producer the same build gets wired to a staff-editable tap list, an age-gated bottle shop, and a club signup, with the switchboard doing for their taps exactly what it does here: making the one page everyone checks the one page nobody forgets.

Why it converts

What the road-tripper feels before the first pour.

The practical answers stay in reach

Hours, the live board, and the next event sit in the hero. Visit logistics are cards a passenger can skim. Contact is three fields and a tap-to-call. The world never gets in the way of the visit.

The responsibility line never breaks

Adults only where alcohol is served, no health claims anywhere, and the ride home written into the visit ritual itself. A licensed producer's site has to be fun and defensible at the same time.

It works the way it demos

Keyboard through the whole board, reduced motion honoured, screen-reader-readable specs, and an overflow probe across every route and width before ship. The loud parts are built on a quiet, verified base.

The system

Everything that shipped.

I built a full Next.js brewery platform in a vintage hydro-poster register: a homepage where you pour the flagship yourself, holding a photographed brass tap over a WebGL pint, a CSS-driven beer board where each of eight beers throws the room into its own state, eight can labels drawn as one poster series, a journal of eight guides answering the questions Kootenay taproom visitors actually search, a practical age gate that remembers the choice and stays out of search's way, and safe-service copy throughout, with rides home planned before last call.

Highlights

  • The Pour: hold the tap lever, fill a WebGL pint, release inside the etched band for the perfect pour, and the poured beer goes live on the board
  • A beer board built as a switchboard: eight switches, eight room states, colour, pressure, and attitude changing per pour
  • Four states change behaviour, not just palette: lights out, flood, hazard tape, and fog, each with a room-state instrument readout
  • Eight can labels drawn as one hydro poster series: flat colour fields, halftone grain, copper linework, one signal colour per beer
  • Interior heroes carry painted hall signage: a panel-code placard and a giant stencil word unique to every page
  • Hero meters, a status board, and a moving ticker that keep the powerhouse world alive past the first screen
  • An age gate that appears once, remembers the choice, works by keyboard, and never blocks the story pages search needs
  • Eight journal guides answering real visitor searches: reading a beer menu, taproom expectations, buying local beer in the Kootenays
  • Tap-to-call and a three-field contact form, with visit logistics grouped for the phone in someone's passenger seat
  • Safe-service posture throughout: adults only where alcohol is served, no health claims, and the ride home planned before the first round
  • A mobile panel-door menu styled as switch rows, verified by keyboard and by capture before ship

Pages and surfaces

  • Home (the switchboard)
  • Beer board hub
  • 8 beer circuit pages
  • Taproom
  • Events
  • Tours and private bookings
  • Where to find
  • Our story
  • Journal hub
  • 8 field-note guides
  • Visit
  • FAQ
  • Contact
  • Privacy
  • In-world 404
  • Age gate
Under the hood

Real code. Real routes. Production ready.

  • The pour engine mounts only on real interaction intent, keeping the load window text-first: devtools-throttled LCP 1.8s with CLS 0
  • The room-state engine is CSS-first: one data attribute drives eight palettes and four behavioural states, with reduced motion honoured throughout
  • Hidden board panels are display none until summoned, cutting seven eager poster downloads and taking mobile LCP from 6.2s to 2.9s
  • Measured mobile medians: accessibility 100, best practices 100, SEO 100, CLS 0.000, performance 94
  • Tap-spec numbers size from their card via container queries, not the viewport, so half-screen windows can never clip them
  • An overflow probe walks all 28 URLs at five widths flagging any element that spills its parent; it ships clean
  • 28 sitemap URLs with JSON-LD, unique titles per route, and an llms-ready information layer, all fiction-safe

Stack

Next.jsReactTypeScriptCSS custom propertiesVercel

Built honestly

Breaker Room Brewing, Dynamo BC, and every beer on the board are invented, and the site says so on the page. No real brewery's marks, no borrowed reviews, no numbers I cannot reproduce. It is a working pattern, not a fake business. For a real producer, the same system gets wired to your real taps, your real licence, and your real story.

Your taproom has a world too. Pour it.

Breaker Room is the proof. The same switchboard thinking can be built around your brewhouse, your labels, and the page your regulars actually check. Start with a free website audit and I will show you where your site is reading as a closed sign.

Builds like this start at $2,000, or Own It Monthly from $189/mo, yours outright at the end.

In this industry yourself? Read the craft brewery and winery website design playbook.

More work

16 / 16