# Product Detail Tour

> Photographic product story with guided detail inspection, contextual annotations and a complete specification destination.

Canonical: https://gsapvault.com/sections/product-detail-tour-section
Live demo: https://gsapvault.com/demos/product-detail-tour-section/index.html

| Property | Value |
|----------|-------|
| Type | section |
| Tier | paid |
| Price | Included only in the Vault |
| Difficulty | intermediate |
| Plugins | Core GSAP only |
| Techniques | image-hotspots, guided-camera, svg-connector, interruptible-transitions, keyboard-navigation, progressive-enhancement, container-queries, responsive-section |
| 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

Product Detail Tour is a complete product story built around one substantial photograph. An oversized asymmetric heading introduces the subject while the product remains the focal point. Visitors can inspect individual construction details, read a contextual explanation and move directly to specifications.

The worked example is Morrow's low lounge chair, with a solid ash frame, plum woven upholstery and removable seat cushion. Each selection connects the copy to a visible part of the chair. On smaller screens the explanation docks below the image, with all detail choices next to it.

## Features

- Large photographic inspection surface with an integrated display heading
- Guided product-detail selection with bounded camera framing and a live connector
- Contextual explanations and a functional in-section specification destination
- Compact mobile detail choices adjacent to the photograph and annotation
- Native keyboard and touch controls with interruption-safe selection
- Complete readable fallback without JavaScript or GSAP
- Independent section instances with a public mounting and teardown API
- Root-scoped brand controls and ordinary local photography replacement

## Use Cases

- Furniture collections explaining materials and maintenance
- Physical product launches with visible construction details
- Equipment stories connecting features to a photographed subject
- Accessories and homewares with useful detail inspection

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

The section connects product photography, feature explanations and specifications in a single content composition. Selecting a photographed detail brings its explanation into view while the photograph gently reframes around the relevant part. The transition can be interrupted by another choice, and reduced-motion visitors receive the same content immediately. The complete story remains readable when enhancement is unavailable.

## 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 `assets/style.css`, `assets/script.js` and `assets/img/chair.webp` together. Open `index.html` for the standalone example. There is no build step.

For an existing page, copy the complete `<section data-product-detail-tour>…</section>` from `index.html`, load the stylesheet, and load GSAP before the section script:

_Code snippet omitted: it ships with the download._

The example's Manrope Google Fonts link belongs in your page's head if you keep that face. The body-margin rule in the example is preview setup; section CSS itself is scoped. The root heading is an `h2`; change its tag to suit your document hierarchy without changing its class.

### Make it yours

Edit identity, heading and proposition in `.pdt-header` / `.pdt-heading`. Edit the CTA label and the semantic specification rows in `[data-pdt-specifications]`. The enhanced CTA targets the unique specification destination inside its own instance. Preserve a valid `href` and specification `id` for the no-JavaScript path; give these unique values when duplicating raw markup.

Feature content lives entirely in the `[data-pdt-feature]` articles. Each article's `data-label` becomes the visible control label; its heading and paragraphs become the annotation. Keep the concise label distinct from the longer explanation.

#### Replace the photograph

The single slot is `assets/img/chair.webp`. Use an ordinary product photo with room beside its subject for the desktop annotation and heading. A landscape 3:2 source of about 1500–2000px wide works well. You can replace the file, or edit the image `src`, `width`, `height` and `alt` in `[data-pdt-photo]`. Keep intrinsic dimensions accurate; the script uses the actual source geometry to map the markers. An optional `<picture>` can wrap the image, provided each source uses the same composition or you update feature coordinates for that composition.

`data-x` and `data-y` on each feature article are percentages of the **full image**, measured from its top-left corner. For example, `data-x="72.5" data-y="48"` places the arm marker 72.5% across and 48% down. Update these ordinary coordinates when changing the subject; no timeline or SVG-path editing is needed. The script computes the connector.

The load-bearing arrangement is an overflow-clipped viewport with an absolutely positioned image scene. Preserve those rules. `--pdt-photo-ratio` sets the desktop frame ratio and `--pdt-mobile-photo-ratio` sets the mobile frame (1.06:1 by default). `--pdt-photo-position` controls the overview crop when the image is wider than the frame: `0%` favours its left and `100%` its right. The example uses `88%` to keep the chair complete on phones. Inspection states deliberately zoom/crop the image.

#### Add, remove or reorder details

Add, remove or reorder the semantic feature articles. Give each a label, heading, copy, `data-x` and `data-y`; the script derives both on-image markers and labelled choices. One or more details are supported; three to five concise details are usually easier to use. A single article works without next/previous furniture. If editing markup while already mounted, call `revert()`, perform the edit and mount again so controls reflect the new markup.

#### Brand controls

The `.pdt` token block groups colours, font, width, spacing and crop controls. Override them on one root for independent instances:

_Code snippet omitted: it ships with the download._

Change matching RGB triples with their colours. Other edit points are `--pdt-font`, `--pdt-display-weight`, `--pdt-content-width`, `--pdt-gutter`, `--pdt-space`, `--pdt-corner` and `--pdt-annotation-width`. Keep annotations opaque and check contrast after colour edits. For example, a camera bag can replace Morrow: edit the identity/proposition, use a bag photograph, and label three articles “Woven shell”, “Quick-access closure” and “Removable divider” with coordinates matching the new photo.

### Behaviour and options

| Hook / option | Purpose |
| --- | --- |
| `data-product-detail-tour` | Instance root; all queries stay inside it. |
| `data-duration="0.85"` | Camera duration in seconds, clamped to 0–2. |
| `data-zoom="1.1"` | Default inspection zoom, clamped to 1–1.6. |
| Feature `data-zoom` | Optional per-detail zoom override. |
| `data-pdt-feature` | Semantic article and source for its two controls. |
| `data-pdt-photo` | Ordinary image used for camera geometry. |
| `data-pdt-spec-link` / `data-pdt-specifications` | Root-local specification action/destination. |

Markers and labelled choices both select a detail. “Whole chair” returns to the complete overview. Arrow keys cycle details; Home and End choose the first and last; Escape returns to overview. The default framing uses a restrained 8–10% zoom and a smooth ease without overshoot. Input during motion continues from the current framing and settles to the newest request. Annotation height changes do not restart the camera. There is no free drag, ambient motion, scroll pinning or Lenis installation.

The script automatically mounts matching roots once the document is ready. For client-side insertion and removal:

_Code snippet omitted: it ships with the download._

`ProductDetailTour.get(root)` returns the mounted instance or `null`. `select(index, true)` and `overview(true)` settle immediately. The root emits `pdt:change` with `{ index, feature }`; overview uses `index: -1` and `feature: null`. Revert restores complete readable content, original attributes/styles and removes generated controls, listeners, observation and instance animations.

### Accessibility and integration

Native buttons support touch and keyboard and expose selection with `aria-pressed`. Enhanced inactive articles use `hidden`, `aria-hidden` and `inert`; generated controls reference unique article IDs. Reduced motion keeps every selection usable with immediate framing, and preference changes while mounted are handled. Without JavaScript or GSAP, all article copy and specifications remain visible and the CTA remains a normal link; enhancement controls are absent.

The section takes its natural content height and works in narrow host columns using the named `product-detail-tour` container. Photography and annotations are adjacent on phones; all choices remain visible. It does not change host typography, button styling or scrolling outside its root. Multiple roots mount independently. Pair viewport-width host tests with your own page's navigation and scroll behaviour; no backend or checkout is supplied.

### Dependencies and credits

- GSAP core 3.12+; demo pinned to 3.15.0. No plugins required. [GSAP](https://gsap.com/).
- [Manrope](https://fonts.google.com/specimen/Manrope), by Mikhail Sharanda and Mirko Velimirović, SIL Open Font License. Loaded from Google Fonts in the example; you can self-host or use a different font token.
- `chair.webp`: generated fictional product concept photograph, created for this example. It depicts no real product, client result or testimonial. You may replace it with your own appropriately licensed photography.
- Section code is covered by the GSAP Vault licence supplied with your download. Third-party libraries and fonts keep their own licences.

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