Restaurant 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.
Read the full template overview
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
Structure and hero
One script initialises each section with a single setup and teardown path and one motion branch covering 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 menu image trail
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.
Pointer and keyboard fallbacks
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.
Questions about this template
What happens to the hover image trail on a phone?
It is replaced, not disabled. Touch devices get a static thumbnail beside each course instead, so the dish photography is still there, it just is not cursor-driven. The same fallback covers reduced motion and no-JavaScript, and keyboard focus reveals each course's photograph in turn.
Does it take reservations?
No. The reservations section is a designed block with no backend behind it. Point it at OpenTable, ResDiary, SevenRooms or a form handler, or just put the phone number in, which is what a lot of independent restaurants genuinely prefer.
My food photos are bright and white-plated. Will they fit?
Not without a decision. The template is deliberately candlelit: the bundled photography has a green and gold grade baked in, and bright daylight shots will look pasted on top of it. Either regrade your photos toward that warmth or retune the palette tokens to suit your room, but do not mix the two.
Can I use it for a cafe or wine bar rather than a tasting menu?
Yes, with one change. The menu section is built as courses in sequence, which suits a set menu; for an all-day cafe you would repeat that block per section (breakfast, lunch, cakes) instead. Everything else, the hero, philosophy, chef and private dining, transfers unchanged.
How many courses can the menu hold?
As many as you write. Each course is a row with its own photograph, and the image trail pools a fixed set of reusable elements rather than creating one per course, so a twelve-course menu costs the same in memory as a five-course one.
