# Fine-dining restaurant website with motion and reservations

Cendre — a tasting-room site with a scroll-pinned nine-course menu, generated plate illustrations, a lightbox gallery and five-step reservations, in about 33 KB of gzipped code and no animation library.

> hospitality · 2026-10-06T21:40:06.181Z

Project overview

Cendre is a fictional twenty-two-seat tasting room we built as a showcase for fine-dining restaurants and chef-led concepts. The site tells the story the way a dinner unfolds: a quiet opening, a manifesto that lights up as you read, then the nine courses one at a time as you scroll — and ends in a reservation flow that handles experiences, seatings, pairings and dietary needs.

[Open the live Cendre demo](/demos/cendre/index.html)

Client context

  - Industry: Hospitality / fine dining

  - Client size / environment: Chef-led tasting room — showcase build, fictional brand

  - Primary stakeholders: Chef-owner, front of house, guests planning a special evening

Challenge

Fine-dining sites are expected to feel like the room — cinematic, slow, image-led — yet many become heavy page-builder pages with a PDF menu and a booking widget that looks nothing like the brand. The goal was award-level motion (text reveals, parallax, a pinned horizontal menu, stacked cards, marquee, overlay menu) that stays fast, works on a phone, respects reduced-motion settings and runs under a strict Content Security Policy.

Scope delivered

  - Scroll-pinned tasting menu: nine courses travel horizontally while the section holds, with a live course counter; becomes a swipe rail on phones

  - Nine plate illustrations generated in code (SVG) — no stock food photos for the menu, and nothing to license

  - Motion system without libraries: preloader, split-text reveals, scroll-lit manifesto, parallax, velocity-aware marquee, stacked sticky cards, ember particles, custom cursor and magnetic buttons

  - Pairings and bar in keyboard-accessible tabs, with an image preview that follows the pointer

  - Full-screen overlay menu and a gallery lightbox with arrow keys, swipe, focus trap and focus return

  - Five-step reservations: experience, guests and calendar (closed days, 30-day window), seatings with waitlist, details and dietary needs, review with GST + Manitoba RST and an .ics file

Before / after

  - Before: A typical fine-dining site: a slow page-builder template, the menu as a PDF, and a third-party booking widget in someone else’s design.

  - After: One fast page that feels like the dining room. The menu unfolds course by course as you scroll, and guests choose an experience, seating, pairing and dietary needs in five steps. About 33 KB of gzipped HTML, CSS and JavaScript, 11 requests on first load and zero third-party requests.

Mobile — 390px home screen and the full-screen menu
Desktop — the opening screen with ember particles and the arched hearth photo

Visual proof placeholders

  - 52 automated browser checks — preloader, pinned menu progress, manifesto, marquee, tabs and arrow keys, hover preview, stacked cards, overlay menu, lightbox keys and focus, reservation flow and totals, chef’s-counter limits, newsletter, mobile and reduced motion

  - No horizontal overflow at 390px; zero JavaScript errors on desktop, mobile and reduced-motion runs

  - Runs under the same strict Content Security Policy as this website — no inline scripts or styles, self-hosted fonts, no animation library

Delivery timeline

  - Phase 1: Concept, art direction, type and colour, photo selection and plate illustration system

  - Phase 2: Motion system, pinned tasting menu, tabs, overlay menu, gallery and lightbox

  - Phase 3: Reservation logic, mobile and reduced-motion passes, accessibility, automated QA and screenshots

Outcome

A restaurant site with the polish people expect from award-winning studios, built on plain HTML, CSS and JavaScript the restaurant owns. The reservation steps are ready to connect to a booking system, a payment provider for card holds, or a simple email to the host stand.

Technology stack

HTML5, CSS Grid and sticky positioning, vanilla JavaScript (IntersectionObserver, requestAnimationFrame, Canvas 2D, generated SVG), self-hosted fonts, WebP images, Playwright automated browser QA.

Visual evidence

Tasting menu — nine courses, each with a plate illustration generated in code
Gallery — editorial grid; every frame opens in a keyboard-friendly lightbox
Pairings & bar — tabs with a preview card that follows the pointer
Reservations — review step with pairing, dietary needs, taxes and card hold
Overlay menu — large serif links with a live preview of each section
Visit — weekly hours with today highlighted and an illustrated map

---
Source page: https://amensecurity.ca/en/projects/fine-dining-restaurant-website
Markdown version for AI agents · Amen Security
Email: info@amensecurity.ca
Phone: +1 (204) 514-3536