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.
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.
Live demo
Click through the working build — every form, filter and calculator runs in your browser.
Industry
Hospitality
Services
Website & Software Development
Delivery record
Showcase build · live demo
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.
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
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.
Visual evidence
Delivery timeline
Phase 1
Phase 1: Concept, art direction, type and colour, photo selection and plate illustration system
Phase 2
Phase 2: Motion system, pinned tasting menu, tabs, overlay menu, gallery and lightbox
Phase 3
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.