# Seasonal Menu Index

> A complete seasonal restaurant menu led by a tactile draggable fan of substantial food photographs, with elastic tilt and spring settling.

Canonical: https://gsapvault.com/sections/seasonal-menu-index-section
Live demo: https://gsapvault.com/demos/seasonal-menu-index-section/index.html

| Property | Value |
|----------|-------|
| Type | section |
| Tier | paid |
| Price | Included only in the Vault |
| Difficulty | intermediate |
| Plugins | Core GSAP only |
| Techniques | draggable, elastic-fan, velocity-tilt, keyboard-navigation, progressive-enhancement, container-queries |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo, 1 October 2026. A measurement of the demo as shipped, not a promise for your page.

| Category | Score |
|----------|-------|
| Accessibility | 100 |
| Best practices | 100 |

No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live.

## Overview

Seasonal Menu Index is a complete restaurant menu led by a broad fan of overlapping food photographs. Drag a print to spread the photographs, sweep through the dishes and spring the selected plate to the front. The full menu, prices and dietary notes remain readable beneath the fan.

Alder Table’s fictional autumn lunch pairs beetroot, hake and pear photographs with complete starters, mains and puddings. Large rotated photographic prints provide the signature composition on desktop and mobile, with native choices as a keyboard alternative.

## Features

- Complete three-course restaurant menu with editable prices and dietary notes
- Substantial photographic prints in a visibly rotated, draggable fan
- Generous serif heading and ruled menu typography
- Direct touch and pointer choreography with velocity tilt, elastic settling and native keyboard choices
- Functional table enquiry link with an editable example destination
- Root-scoped colour, typography, spacing and image crop controls
- Readable content without JavaScript or GSAP
- Independent instances with mounting and reversible teardown

## Use Cases

- Seasonal lunch and dinner menus for neighbourhood restaurants
- Bakery menus with photographed signature pastries
- Wine bar small plates with a table enquiry action
- Café menus that keep pricing and dietary notes easy to scan

## Vibe-Code Ready Setup

This website section includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

Drag any exposed photograph horizontally to lift it, sweep the front print and spread the remaining photographs. On release the fan reorders around the chosen dish and springs to rest. Native choices and arrow keys provide an alternate path. Reduced motion, missing GSAP and no JavaScript show every photograph in ordinary readable flow. All figures, captions and choices derive from semantic markup.

## Documentation

How this website section works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### Quick Start

Keep `index.html` beside `assets/` and serve it through your usual local/site server. For an existing page copy the complete `section.smi-section`, then include:

_Code snippet omitted: it ships with the download._

Adjust the paths for your page. GSAP core is the only animation dependency. The standalone HTML's `body { margin: 0; }` belongs to the preview; the section CSS uses scoped selectors and root-local variables.

### Make it yours

Edit restaurant name, headline, hours, courses, dishes, descriptions, prices and dietary information directly in the HTML. Replace the `.smi-enquiry` example `mailto:hello@aldertable.example` with your booking page, contact or anchor. A reservation backend is not included. Replace the fictional disclosure when supplying your own content, while preserving disclosures appropriate to your imagery.

Each `.smi-plate` in `.smi-gallery` is an ordinary semantic figure. Change its image `src`, `alt`, intrinsic `width`/`height`, caption and `data-label`/`data-photo-title`. Runtime derivatives are in `assets/img/`. Standard `srcset`/`sizes` may be added to your image markup. The default frame is 4:3 with central focus; override `--smi-photo-ratio` and `--smi-photo-position` on the root or an individual frame to suit other source shapes. Motion acts on the print frame, so photo replacement needs no animation edits.

Add, remove or reorder figures directly. Choices, layering and count derive from the markup. Three to five prints suit this composition; there is no scripted fixed count. A single print has no meaningless choices or drag prompt. Courses and `.smi-dish` list items can likewise be added, removed or reordered without JavaScript changes.

The root block of `assets/style.css` contains colours, display/body fonts, maximum content width, gutters, spacing, photograph ratio and focal position. For example:

_Code snippet omitted: it ships with the download._

Check contrast when rebranding. The opaque default ink, secondary and olive text pairs exceed 7:1 against the warm white ground. Captions sit on paper below photographs. Change heading tags to suit your host without changing their class names.

### Animation controls

`data-photo-duration="0.72"` on the root sets the elastic settle in seconds, clamped to 0–1.2. Drag any exposed print horizontally; fast movement adds restrained velocity tilt. Release beyond the distance/velocity threshold advances the fan. Click or tap any exposed photograph to lift it clear of the fan, sweep it into the foreground and spring it into place while the other prints rearrange. The native choices use the same two-phase animation; selecting the current print gives it a small lift and settle. New drag, photo click or choice input interrupts the old timeline immediately and resolves to the latest input. The native dish buttons provide an alternate path; focus a choice and use Left/Right, Home/End, Enter or Space. There is no auto-play or ambient loop.

Vertical touch gestures remain available to the host page through `touch-action: pan-y`. The section does not install smooth scrolling, pin content, replace a cursor or change host navigation. Named container queries recompose the menu and print sizes in narrow columns. Section height follows its content.

### Lifecycle and accessibility

The public API is independent per root:

_Code snippet omitted: it ships with the download._

`mountAll(scope)` mounts descendants of an optional scope. Repeated mounting is idempotent. Teardown removes only owned listeners, observer, generated choices and GSAP work, restoring original figure IDs/styles and every photograph in readable flow. Separate roots operate independently. Native buttons have unique instance targets, current `aria-pressed` state and visible focus. All semantic captions remain available.

With reduced motion the photographs return to ordinary readable flow and optional controls are hidden. Preference changes while mounted are supported. No JavaScript or missing GSAP also shows all photographs, captions and the complete menu. Nothing pre-hides content. Only GSAP's own scoped contexts are reverted; unrelated host animations remain intact.

### Dependencies and credits

- GSAP core, built against 3.15.0; compatibility floor 3.12+. Review [GSAP licensing](https://gsap.com/community/standard-license/).
- DM Serif Display and IBM Plex Sans Condensed from Google Fonts, under the SIL Open Font License; you may self-host under their licences.
- Three generated food photographs depict fictional sample dishes, not documented restaurant portions or client results. Runtime uses local optimised derivatives; replace them with photographs you have permission to publish.

Copy the section root, its CSS/script and local images. Reference screenshots and authoring notes are not buyer dependencies.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This website section is included only in the Vault, for existing and new owners. It is not sold individually. The standard licence covers unlimited personal and commercial projects; bundled assets retain their own licence requirements.

- [Get the Vault](https://gsapvault.com/pricing)
- [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](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