Nocturne

About This Template

Nocturne is an ultra-luxury restaurant template for Michelin-tier dining rooms. Six pages cover the home narrative, the full menu, the room, the chef, reservations, and a styled 404. The homepage serves the tasting menu as you scroll: the stage pins and GSAP scrubs an active index through eight full-bleed food-macro courses, cross-fading each one while its gold Roman numeral and Bodoni name draw on in gold leaf and its macro drifts in parallax. That wipe is its own component — the text renders twice and a solid gilt layer is revealed left to right by animating a --wipe custom property with a luminous leading edge, never a gradient. The menu page typesets eight courses, six à la carte dishes with dietary marks and six wine pairings; reservations run a full date, time, party, seating and occasion picker with a live summary card and a validated request form.

Signature

The homepage serves the tasting menu as you scroll. On desktop the stage pins and GSAP scrubs an active index through eight full-bleed food macros, cross-fading each course while its gold Roman numeral and Bodoni name draw on in gold leaf — the text renders twice and a solid gilt layer is wiped left to right by animating a --wipe custom property with a luminous leading edge, so it reads as actual leaf rather than a gradient. Pinning is gated behind (pointer: fine), 768px and no reduced-motion preference, and the decision is deferred until after hydration to keep the first render identical to the SSR markup; on phones the same eight courses become a clean vertical stack.

Features

• 6 pages — Home, Menu, The Room, The Chef, Reservations, 404
• Pinned degustation — GSAP scrubs an active index through eight full-bleed courses, cross-fading each one as a side rail tracks the current dish
• GoldReveal gold-leaf wipe — text renders twice and a solid gilt layer is revealed by animating a --wipe custom property with a luminous leading edge
• Cinematic hero — full-bleed plated dish with light scrub parallax and a candlelight vignette that deepens into the degustation
• Menu page — eight tasting courses with gold Roman numerals, six à la carte dishes with gf/ve/df marks, and six wine pairings by course
• Reservation island — date, time, party size, seating preference, occasion and contact with a live summary card that rebuilds as you choose
• Field-level validation states on the reservation form (touched tracking, aria-invalid, focus to the first bad field) and a success confirmation on both forms — UI state only, no backend to wire up
• The Room — asymmetric editorial interior gallery with per-frame GSAP parallax across a lead frame, portrait pair and wide strip
• Full-bleed candle-flame video accent — muted autoplay loop with poster fallback and desktop-only parallax
• Private dining section — three packages (Cellar Room, Gallery, Full Exclusive) stacked beside a portrait frame in a deliberately off-balance 0.85fr / 1.15fr split, plus an inquiry form
• Chef page — portrait hero, philosophy pull-quote, provenance sourcing, and five awards with years
• Gold dot + trailing ring cursor that expands into contextual tags (Reserve / View / Select / Home), positioned via left/top so it never fights CSS centring
• Scroll reveals inside islands use native CSS animation-timeline: view() — no JavaScript observer required
• The degustation degrades to a static vertical stack on touch and reduced motion — the pin is gated behind (pointer: fine) and 768px, so no mobile dead zone
• Warm candlelight film-grain overlay, Lenis smooth scroll and Astro View Transitions; SEO with Restaurant JSON-LD, Open Graph, canonical URLs and sitemap
• 28 build-optimized images (AVIF + WebP via getImage) drawn from a 35-photo asset set; TypeScript strict with noUncheckedIndexedAccess — zero any

Deployment