Restaurant Template Template
A complete one-page restaurant site with a candlelit dark art direction: full-bleed photo hero with a spaced-caps wordmark reveal, and a signature hover image trail that conjures dish photographs as the cursor moves across the tasting menu.
About This Template
A production-ready one-page site for restaurants, tasting menus, supper clubs, and private dining rooms, art-directed as a candlelit room: near-black green, candle gold, cream serif type, and moody duotone photography. The hero opens on a full-bleed photograph with a wide-tracked spaced-caps wordmark settling low in the frame, and the signature moment is the tasting menu itself: drawing the cursor across the courses conjures a trail of tinted dish photographs that follow the pointer. On touch devices, with reduced motion, or without JavaScript, every course shows a static thumbnail instead, so the menu always reads complete. Swap the placeholder photos, menu, and copy for your own and deploy anywhere as static files.
What's Included
- Complete deployable one-page site: nav, photo hero, philosophy, tasting menu, chef, private dining, reservations, and footer
- Signature hover image trail over the tasting menu, with a pooled set of reusable image elements so the DOM never grows
- Static per-course thumbnails as the touch, reduced-motion, and no-JS fallback
- Spaced-caps hero wordmark reveal with slow photo drift and a breathing candle glow
- Scroll-driven parallax drift inside every photo frame
- Staggered course-row reveals and gentle one-time scroll reveals throughout
- Bundled placeholder photography as optimised WebP files with the candlelit green and gold grade baked in, plus gradient tints and background-colour fallbacks
- Lenis smooth scrolling wired in and fully optional
- Accessible: reduced motion gets a complete static page, keyboard focus reveals each course's photograph
Perfect For
- Restaurant, bistro, and tasting-menu sites that need atmosphere
- Supper clubs, pop-ups, and chef residencies announcing a menu
- Private dining and events venues
- Cafes, wine bars, and bakeries wanting a photography-led one-pager
- A launch-ready starting point for hospitality client projects
How It Works
One script initialises each section inside a single gsap.context with gsap.matchMedia branches for fine-pointer, touch, and reduced-motion. The hero wordmark letters rise with a stagger while the photograph settles from a slow scale and later drifts on a scrubbed ScrollTrigger. The signature menu trail tracks pointer distance and, past a threshold, recycles an image element from a fixed pool, scaling it in along the direction of travel with gsap timelines before fading it out. On fine-pointer devices the script adds a class that hides the static course thumbnails; everywhere else the thumbnails remain, so the menu degrades to a complete static page. Keyboard focus mirrors hover by settling a single photograph beside the focused course.