Warm Hearth — A Landing Page Built Around One Fire

Mohit — Mon, 17 Aug 2026 06:16:34 +0000

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing

What I Built

Warm Hearth — a landing page for a comfort food restaurant built around one idea: everything on the menu comes from the same wood-fired hearth in the back.

Instead of treating "comfort food restaurant" as a generic brief, I anchored the whole page to that single hearth:

An interactive hearth centerpiece. Right after the hero, there's a hand-drawn CSS/SVG fire pit you can click to "stoke." The flame flares, embers burst upward, and a small honest counter tracks how many times you've stoked it this visit — no fake global numbers, just a real, session-based response to your click.
Four dishes, each with real cultural identity. Ramen, warm pies, a cheesy pasta bake, and gulab jamun — each with its own hand-drawn SVG illustration and a border motif pulled from its own cuisine (a jade-and-gold double line for the ramen, a scalloped pastry edge for the pies, an Italian tricolor accent for the pasta, gold paisley tones for the gulab jamun) rather than one generic card style stretched across all four.
Living detail, not static photos. Steam rises off the ramen, pies, and pasta bake using the same wisp animation as the hero's hearth, so the whole page reads as one consistent "warmth" language. The gulab jamun gets a syrup shimmer and drip instead, since steam isn't the right detail for a syrup-soaked sweet.
Price tags that hang like real kitchen tickets — pinned by a string, swaying gently, and giving a small "flicked" swing on hover instead of sitting flat on the card.
Mira, an illustrated host in the corner who offers a rotating table tip when you click her — a small personal touch instead of a static "contact us" widget.
Built for actual use, not just to look good in a screenshot: keyboard-focusable tab filters, a skip-to-content link, aria-live regions on the interactive parts, and full prefers-reduced-motion support that disables every animation without breaking the page.

Demo

Journey

Since I opened the hearth question yesterday, I stopped treating this as "a comfort food restaurant" and started treating it as "a restaurant that runs on one hearth" — that reframe is what changed everything. The dish illustrations, the steam animation, the stoke-the-fire interaction, even Mira the host all trace back to that one fire instead of being separate decorations bolted onto a generic template.

The part I'm proudest of is probably the smallest one — the price tags. Real kitchen tickets hang from a pin and string and sway slightly; giving them that same physics (idle sway, plus a decaying "flick" on hover) took more tuning than I expected, but it's the kind of detail that makes the page feel handmade instead of templated.

What I'd do next with more time: add a couple more dishes so the category tabs have more to filter, and build out a proper "our hearth" story section with the history behind it.

DEV Community: Mohit

Warm Hearth — A Landing Page Built Around One Fire

What I Built

Demo

Journey