Fable 13 · Guide 01 · Restaurant
The brief: a restaurant site with a menu showcase, online reservation, and a food photography grid. The idea: a fourteen-seat Hudson Valley dining room where everything is cooked over one oak fire — so the whole site is organised around the life of that fire, from first flame to last coal.
Restaurant menus usually list dishes; CINDER's lists stations in the fire's life.
Every course carries a hearth-station tag (hearthstone, ember ash, coals, hanging,
grate, cast iron, last coal) and a four-bar fire meter showing how hot the hearth
runs when the plate meets it. The vertical "spit" line beside the menu fills as you
read — powered by Motion's scroll() with the menu itself as the scroll target —
so reading the menu feels like the evening passing.
Char, not black — the background carries a whisper of brown, the way a hearth room never reads as pure darkness. Flame orange is spent only where heat lives: the fire meters, the reserve button, one word of the headline. Wine handles the quiet accents so the orange never has to shout.
Young Serif for display — a warm, chunky serif whose ink-trap curves feel hand-thrown, set enormous in the hero. Hanken Grotesk carries body copy lightly, and Spline Sans Mono does the labour: station tags, hours, step labels — the kitchen's clipboard voice.
Built on Motion (vanilla ESM). inView() drives
every reveal with an expo-out ease; the hero staggers in with stagger(0.12);
the reservation stepper switches panels on a spring(220, 26); option chips
pulse on selection; the confirmation flame draws itself via
strokeDashoffset. The hero's heat is a canvas: a breathing radial hearth-glow
plus forty-two rising motes, all of which hold still under
prefers-reduced-motion.
A three-step client-side stepper — party, night & seating, confirm — with the week's nights generated from today's date (Mon–Tue correctly disabled: the fire rests). The slot-picker layout was informed by booking-form patterns on 21st.dev (sectioned inputs, pressed-state chips), rebuilt from scratch in CINDER's own language.
Food and room photography from Unsplash (free license), curated for low, warm light so the plates look fire-lit, downloaded and self-hosted. Captions tie each frame back to its course numeral.
Process — three passes
display:flex defeated the
hidden attribute — the classic; added [hidden]{display:none!important}.