Skip to contentSkip to content
Expedition 03Hearthside WharfWood-Fired Restaurant ConceptWaxwing Landing, BC

Smokefall

The website is the restaurant's day board, and it knows what time it is.

6

Designed light states

26

Pages and routes

100

Accessibility, SEO, best practices

0

Templates used

smokefall-restaurant.vercel.app
Smokefall live site screenshot
Built for restaurants, cafes, and dining rooms

Every restaurant site gets asked two questions. Most fail both.

01

Are you open right now?

It is the most common question a restaurant site gets and the one most sites bury. Hours live on a contact page, holidays break them, and the customer standing on the sidewalk gives up and walks somewhere that answers faster.

02

The PDF menu is a closed door.

A PDF cannot rank for a single dish inside it, cannot be read properly by assistive technology, and turns a phone into a magnifying glass. The menu is the best sales copy a restaurant owns, and most sites lock it in a file format from 1993.

03

Template sites all taste the same.

A dining room with real atmosphere deserves better than the same hero-photo-and-hours layout as every other kitchen in town. When the website is generic, customers assume the food is too.

The approach

Built like a day board, lit like the room.

01

The site knows what time it is.

Six designed light states follow the actual clock, so a morning visitor sees coffee light and the morning board while an evening visitor sees coals and the dinner menu. The open-now chip is computed from the posted hours and changes its message through the day.

02

One interaction that proves everything.

Drag the sun across the hero sky and the entire site re-lights in real time. It is the three-second wow, and it is also just the site's real architecture made visible.

03

Atmosphere with a pulse.

A custom WebGL hearth scene reacts to the cursor with a glowing wake, sparks rise off the coals, and the dish deck deals food photography inside the firelight. No template can fake it, which is exactly the point.

04

The boring layer done perfectly.

Real HTML menu with Menu schema, Restaurant markup, reservations and private-dining lanes, a fourteen-entry journal for local search, and measured Lighthouse numbers that hold up under all the theatre.

The story

The thinking behind the build

Smokefall is a fictional wood-fired restaurant in Waxwing Landing, an invented lakeside town in the West Kootenay. One fire cooks everything: birch coals for dinner, a falling oven for the morning loaves, embers for the late crowd. The build answers the two questions every restaurant website gets asked and most fail: are they open right now, and what can I eat tonight. The site's answer is structural. It knows what time it is.

Restaurant websites fail at the front door. The customer has two questions, are you open right now and what can I eat, and the average site answers with a stale PDF menu and hours buried on a contact page. Smokefall was built so the site itself answers before anyone scrolls: the light of the page IS the time of day, and the open-now chip is computed from the posted hours, not pasted on.

The concept is the day board. Smokefall's kitchen runs one fire through a whole day, from morning loaves out of the falling oven to birch coals at dinner to a small embers menu at midnight, so the site runs the same arc. Six designed light states carry it: first light, bench light, golden hour, smokefall, embers, banked. Arrive at 8:30 a.m. and the page is cream and coffee. Arrive at 7 p.m. and it is coals and candlelight. Same page, different hour, different appetite.

The hero makes the system touchable. Grab the sun and drag it across the sky, and every surface re-lights in real time: the sky, the fire, the type, the menu board, the open-now state. It reads as a magic trick, but it is the site's actual architecture made visible, and it is the interaction that makes owners lean in when the phone gets handed across a table.

The atmosphere is a custom WebGL scene, not a template and not a library. Hearth smoke curls off the kitchen fire and reacts to the cursor with a glowing wake; sparks lift off the coals; a click breathes the embers brighter. Three food photographs are drawn inside that scene as a dish deck, with edges that breathe and smoke passing in front of the plates, and a click deals the next dish with its price. The food sits in the firelight instead of floating in a white grid.

The typography is the menu artifact. Besley is a Clarendon, the letterform family of fruit-crate labels, which is to say the lettering the 1912 packing shed on this wharf would have used for its own stencils. Dot leaders, tabular prices, hand-set line breaks: the board page is designed to be printed and framed, and it doubles as proof that a menu can be beautiful without being a PDF.

No PDF menus, anywhere, on principle. A PDF cannot rank for the dishes inside it, cannot be read properly by assistive technology, and makes a phone user pinch and squint. Smokefall's board is real HTML with Menu structured data, so every dish, section, and price is legible to Google, to answer engines, and to the person deciding dinner from the passenger seat.

Underneath the theatre, the numbers hold. Measured, not estimated: Lighthouse 97 desktop and 89 mobile on the homepage, 99 and 94 on the menu, 100 for accessibility, best practices, and SEO on every measured surface, with layout shift effectively zero. Every word ships as real server HTML; the experience layer never gates the content; reduced motion gets a designed still. The wow costs the visitor nothing.

The town, the people, and the menu are invented; the craft is real. Waxwing Landing does not exist, and the site tells you so itself. And the voice is a dial we set per client: Smokefall's is turned to destination dinner, but a pub, a diner, or a family cafe gets the same craft tuned to its own room. The lighting console, the open-now honesty, the HTML menu, and the search architecture transfer to any kitchen that wants its website to work as hard as its line does.

Why it converts

What a hungry customer feels in the first three seconds.

Answered in three seconds

Open or closed, what is on tonight, and how to book all sit in the first screen, in the right light for the hour the customer arrives.

A menu Google can read

Every dish and price ships as structured, crawlable HTML, so the board works as hard in search results as it does on the pass.

Fast under the firelight

The atmosphere layers never touch the content: measured performance in the green, zero layout shift, and a designed still for anyone who prefers reduced motion.

The system

Everything that shipped.

I built a full Next.js restaurant platform around a lighting console: six designed light states (first light, bench light, golden hour, smokefall, embers, banked) that re-light every surface of the site from the actual clock, with the open-now chip computed from the real posted hours rather than a widget. Over it sits a custom WebGL hearth-smoke scene stirred by the cursor, a dish deck rendered inside the shader itself, a letterpress menu page with Menu structured data, reservations and private-dining lanes, a sourcing story with invented farms, and a fourteen-entry journal aimed at real local dining searches.

Highlights

  • Six-state lighting console driven by the actual clock: first light, bench light, golden hour, smokefall, embers, banked
  • A draggable sun in the hero that scrubs the whole day and re-lights every surface in real time
  • Open-now chip computed from the real posted hours, changing its message through the day, never a third-party widget
  • Custom WebGL hearth-smoke scene, no template and no library: the cursor stirs it with a glowing wake, sparks rise off the coals, and a click breathes the embers
  • The dish deck: food photography drawn inside the shader scene with breathing edges, smoke and sparks passing in front of the plates, and a click that deals the next dish with its price
  • Typography as the menu artifact: Besley, a Clarendon in the lettering tradition of fruit-crate labels, with dot leaders, tabular prices, and a menu page designed to be printed
  • A real HTML menu with Menu structured data and no PDF anywhere: PDFs cannot rank, cannot be read by assistive tech, and punish phones
  • Restaurant schema, reservations path, private-dining lane, seasonal patio page, and gift cards
  • Fourteen journal entries targeting the searches locals and visitors actually make about wood-fired dining in the Kootenays
  • Designed 404 in the same world, llms.txt for AI answer engines, and every page shipped as real server HTML

Pages and surfaces

  • Home (the day board)
  • The board (full HTML menu)
  • Reservations
  • Private dining
  • Patio at Sorrel Lake
  • Sourcing
  • Our story
  • Gift cards
  • Visit
  • Contact
  • Journal hub
  • 14 journal entries
  • Privacy
  • Designed 404
  • llms.txt
Under the hood

Real code. Real routes. Production ready.

  • Custom WebGL hearth-smoke scene written from scratch: no three.js, no template, cursor-reactive with in-scene photography
  • Six-state lighting engine driven by the real clock, with any hour previewable via ?at=HH:MM on any URL
  • Measured Lighthouse: 97 desktop / 89 mobile on the homepage, 99 / 94 on the menu, 100 accessibility, best practices, and SEO on every measured surface, CLS effectively zero
  • Full HTML menu with Menu JSON-LD plus Restaurant schema: structured menu data almost no real restaurant site ships
  • 26 public sitemap URLs discovered from the live sitemap, all real server HTML, with a designed 404 and llms.txt
  • Open-now logic computed from posted hours with per-daypart messaging: morning board, fire being fed, dinner service, embers hours, banked

Stack

Next.jsReactTypeScriptTailwind CSSVercel

Built honestly

Smokefall is a fictional concept, and the site wears the label openly. Waxwing Landing, Sorrel Lake, the farms, and the fire are all invented; no real restaurant's name, reviews, or story appear anywhere. It is a working pattern, not a fake business. For a real kitchen, the same system gets wired to your real hours, your real board, and your real room.

Your dining room has atmosphere. Your website should too.

Smokefall is the proof, and the voice is a dial: destination dinner here, your room's own character on yours. No website yet? Start with a first build that answers open-now and shows tonight's board from day one. Already have one? The free check-up will show exactly where your current site is sending hungry customers somewhere else.

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 restaurant website design playbook.