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

Canonical: https://gsapvault.com/templates/restaurant-template
Live demo: https://gsapvault.com/demos/restaurant-template/index.html

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £5 |
| Difficulty | beginner |
| Plugins | ScrollTrigger |
| Techniques | cursor-effects, image-trail, hover-effect, scroll-reveal, parallax, stagger |
| Uses Lenis | Yes |

## Overview

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.

## Features

- 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

## Use Cases

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

## Integration Preview

How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.

### Quick Start

**1. Open `index.html` in a browser.** The template is fully self-contained; GSAP, ScrollTrigger, and Lenis load from CDN.

**2. Make it yours:**

- Replace the text content in `index.html` (restaurant name, menu, chef bio, hours, address)
- The hero wordmark is a row of `.char` spans inside `.hero-letters` so each letter can animate; change the letters and keep one span per letter. Update the `.sr-only` text alongside it, the `.nav-logo`, and the `.footer-wordmark`
- Swap the photography (see below)
- Change the palette by editing the custom properties at the top of `assets/style.css`: `--fir` (the ground), `--fir-deep`, `--candle` / `--candle-bright` (the accent), `--cream` / `--cream-dim` (text)

**3. Deploy.** Static files, no build step. Any host works: Netlify, Vercel, GitHub Pages, or a plain server. For production, swap `script.js` for `script.min.js` in `index.html`.

### Accessibility

- **Reduced motion**: `prefers-reduced-motion: reduce` renders the entire page static; the trail never initialises, course thumbnails remain visible, and nothing is hidden or moved
- **Keyboard navigation**: every course row is focusable; in trail mode, focus settles a single photograph beside the focused course, mirroring hover. Buttons and links have visible focus outlines
- **No JavaScript**: the page renders complete; hidden states are only ever applied by the script, never by CSS
- **Touch**: the trail is skipped on coarse pointers; each course keeps its static thumbnail
- **Screen readers**: the animated wordmark is `aria-hidden` with an `.sr-only` text alternative; trail images are `aria-hidden` decorative elements; real `<a>` elements for all actions

### Dependencies

**Required:**
- GSAP 3.12+
- ScrollTrigger plugin

**Optional:**
- Lenis (smooth scroll, included by default)

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/script.min.js`: minified production build
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium template. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Restaurant Template](https://gsapvault.com/templates/restaurant-template)
- [All-Access Bundle (£29 one-time, best value): every current and future effect and template](https://gsapvault.com/effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt