How EMBER was designed and built

01 · Concept

The menu is the fire

EMBER is an eight-seat open-hearth tasting counter, and the page has one job: get bucket-list diners onto next month's list. The organizing idea is that the evening follows the life of a fire — so the menu isn't a list, it's a sequence: Kindling, Catch, Flame, Roar, Coals, Ember, Ash, Smoke. Structure encodes something true about the food.

The ember light is treated as illumination, not decoration: a particle field drifts up through every section like heat off a hearth, and it burns brighter as you approach the reservation call — the page literally warms up as you get closer to booking.

02 · Palette

Charcoal, smoke, bone, ember

Everything is dark and warm-neutral except the fire. Orange never appears as a flat UI accent — it shows up as gradient light: the hearth glow, the particle field, the fuse, the button.

03 · Typography

A flickering-steady contrast

04 · Techniques

How the ember field works

A single fixed <canvas> covers the viewport with mix-blend-mode: screen, so pure black is invisible and only light adds up — embers glow over photos and text without washing anything out. Each particle rises with buoyancy, wobbles on a sine path, flickers with two out-of-phase sines, and cools from amber to deep red as it dies:

function emberColor(t, heat) {      // t: 0 young → 1 dead
  var hue   = 38 - t * 26 + heat * 8;   // ~46° amber → ~12° red
  var light = 64 - t * 26 + heat * 12;  // bright young, dim old
  return { h: hue, s: 95, l: Math.max(light, 22) };
}

The field's intensity is driven by scroll: the closer the reservation section gets to the viewport, the more particles spawn and the faster they rise — the hearth being fed. The pointer is a draft: embers within 140 px scatter sideways, lift, and flare, so moving your hand across the page stirs the fire. A few rare sparks streak upward with a short tail, the way a real hearth spits.

var r = listSection.getBoundingClientRect();
var d = Math.abs(r.top + r.height / 2 - viewportH * 0.55);
var near = Math.max(0, 1 - d / (viewportH * 1.15));
intensity = Math.min(1, 0.35 + near * 0.65);

The second signature is the fuse: a hairline beside the eight courses that burns down as you read, tipped with a glowing dot. The course numerals sit on the rail like stations, and the tip ignites each one as it passes — scroll progress rendered as the thing the page is about. Both effects respect prefers-reduced-motion: the canvas draws one still, sparse frame and the fuse renders fully burned, every numeral lit.

05 · Iteration

Three passes over the fire

1. Correctness & composition. Screenshots showed the course numerals colliding with the fuse rail at both 1440 and 390 px — moved them onto the rail as stations, a charcoal chip parting the line. Added a reveal failsafe so the page lights fully even when it is printed or captured without scrolling, and dropped lazy-loading that left below-fold photos blank.
2. Elevation. Deepened the ember field: the pointer now acts as a draft that scatters, lifts and flares nearby embers, and rare sparks streak upward with tails. Wired the fuse tip to ignite each course numeral as it burns past, and brightened the numerals for legibility.
3. Taste. Chanel rule — removed the hairline dividers between courses so the fuse and its stations are the section's only line system; re-checked 390 px seat by seat; verified reduced-motion serves a calm, complete page with the fuse fully burned.

06 · Do this yourself

A recipe for a site of this caliber

1. Give Claude a subject with a built-in sequence (a fire's life, a tide, a fermentation) and ask for the page structure to encode it — structure is information.
2. Fix a four-color palette where the accent is light, not paint: ask for it only in gradients, glows, and illumination.
3. Demand a type pairing with named roles ("a ritual voice and a menu voice") so no face is generic.
4. Ask for ONE signature element in code — here, a blend-mode canvas particle field whose intensity is tied to scroll position — and keep everything around it disciplined.
5. Have Claude write real copy like a brand copywriter: specific nouns, plain verbs, one consistent vocabulary. Ban filler.
6. Screenshot, critique, fix — three times, mobile included. Tell Claude to read its own screenshots and criticize composition, not just bugs.
7. Finish with the Chanel rule: remove one accessory, then check reduced motion and keyboard focus before you ship.