Nocturne

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.

What’s inside

• 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

The 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.

See it live

The demo is public: https://fpsjago.github.io/Nocturne/. 6 pages, built with Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.