Hearth

Screenshots

Signature effect

A canvas of rising embers and sparks behind a heat-haze wordmark, and a booking flow that lets guests pick their exact seats on a plan of the room

Changelog

1. v1.0.02026-09-29
   • HTML edition: a dependency-free restaurant page that opens straight from disk, with a settings block for every effect (the canvas fire and its heat-haze wordmark, the story odometer, the plate-by-plate menu etchings, the probe gauge, the producer radar, the seat-map booking flow) and the opening days in one place (SCHEDULE in util.js).
   • React edition: the same page as a Next.js 16 static export (React 19, TypeScript, Tailwind CSS 4, Motion), with copy, prices, demo data and the opening days in content/site.ts, one CSS Module per section and each effect's settings as typed props.
   • Pages: home, 404, privacy.
   • One codebase, not one file. The concept was a single HTML file. The page is now index.html plus tokens.css, main.css, fonts.css, kit.css, kit.js, util.js, main.js and one file per effect in assets/js/effects/ (hero-fire, heat-haze, story, plate-art, fire-gauge, producers, seat-map), each with a CONFIG block at the top.
   • Self-hosted fonts. Gloock and Work Sans ship in assets/fonts/ under the SIL Open Font License, with licences. The concept loaded them from Google Fonts; no request now goes there.
   • Brand tints follow the tokens. Translucent colours (hairlines, glass, glows, shadows) are color-mix() of --cream, --ember, --flame, --charcoal and --ash instead of raw rgba(). The hero and section background gradients, the flame's hot-white core, the spark ramp's deep red, and the voucher ticket's paper and wax seal keep their own colour stops, like illustrations.
   Show all notes

   • The focus outline is a token. --focus is --flame (9.1:1 on the page) instead of a fixed colour. The concept's palette is otherwise unchanged; no colour value was altered.
   • The opening days are one setting. SCHEDULE in assets/js/util.js holds the service days, the time the fire is lit and banked, the last booking time, the number of nights shown and the restaurant's time zone. The hero status line, the "tonight" card, the footer clock and the booking calendar all read it, instead of the dates and hours being scattered through the concept's script.
   • Canvas colours read the tokens. The spark canvas takes --flame, --ember and --ash from tokens.css (six-digit hex values), so a rebrand carries through.
   • Both forms have their own handler. The booking form (#res-form) and the "Letters from the fire" form (#letter) carry no data-form attribute, because kit.form would bind a second handler on top of theirs and submit twice. Both work in demo mode and post to a data-endpoint when you add one.
   • Booking posts the whole choice. With a data-endpoint, the booking form sends the night, arrival, guest count, seats, pairing, estimated total and a reference alongside the name, email and notes.
   • Complete without JavaScript. The hero and reveals are hidden only under .js, the timeline and chapters read as plain text, and the pieces that are drawn by script (the gauge and the producer radar) are hidden without it. The letters form and the voucher chips and button are hidden without script (they are demos), and the "tonight" label reads plain "Tonight" until script fills the date. Online booking shows a <noscript> line with the phone number and email. The nav links stay in the bar because the mobile sheet cannot open.
   • A failsafe for slow or blocked scripts. If main.js has not started after 3.5 seconds the head script adds .failsafe and the hero, headings and reveals show anyway.
   • The producers filter dims the rows it hides. The scroll reveal's opacity: 1 used to win over the filter's dimming, so only the radar points faded; .prod.off now wins.
   • Hero parallax settles at its end state, so a fast jump down the page cannot leave the headline half faded.
   • Reduced motion. The hero lights at once with no strike, the sparks draw one still frame, the heat haze is a faint fixed ripple, plate etchings appear drawn, the marquee stops and the voucher tilt is off.
   • New pages and delivery details. Added 404.html and privacy.html (in the same nav and footer), a full SEO head (Open Graph, Twitter card, a canonical placeholder, JSON-LD Restaurant), a favicon, a touch icon, a web manifest and robots.txt.
   • The hero canvas is the only continuous canvas loop. It stops when the hero is off-screen or the tab is hidden, and is capped at 2× pixel ratio. The heat-haze filter also pauses off-screen and in a hidden tab.
   • Availability in the booking flow is generated, not real. It is the same for a given night every time. Replace takenFor() in seat-map.js (HTML edition) or lib/booking.ts (React edition) with a lookup against your booking system before you take real bookings.
   • All prices, producers, quotes, reviews, addresses and phone numbers are made up. Replace them before launch.
   • In the React edition the booking and letters forms take their endpoint from endpoints in content/site.ts or from NEXT_PUBLIC_BOOKING_ENDPOINT / NEXT_PUBLIC_LETTERS_ENDPOINT (read at build time). The scroll reveals (Motion) are hidden inline, so a <noscript> rule in the layout shows them for visitors without JavaScript.

Questions

Related

• 

  Aurel

  Brand

  A quiet, clay-and-bronze skincare template for a Copenhagen barrier-repair brand: a raymarched WebGL serum drop that bulges toward the cursor in the hero, a three-step ritual with CSS-rendered bottles, an ingredient list with generated molecule diagrams, a draggable before/after hydration map, clinical-result stat cards and a working shop with size pickers and a bag.

  Bodoni Moda / JostFrom $29
• 

  Ferro Type

  Studio

  A loud, orange-and-black type foundry site built around one variable font: a hero word that bends its weight and width under your cursor, a live type tester that writes its own CSS, an axis-by-axis tour, a keyboard-driven glyph inspector and a licence configurator with a working cart.

  Roboto Flex / Roboto MonoFrom $29
• 

  Meridian Expeditions

  Travel

  A quiet, topographic-survey take on an expedition operator's site: two procedurally-drawn contour maps that redraw themselves as you switch between four real routes, an interactive elevation profile you can scrub with a pointer or the arrow keys, a pinned hour-by-hour walkthrough of a day on the ice, and a bookable 2027 departures table.

  Cormorant Garamond / ManropeFrom $29