# Interactive Swatch Book

> A tactile material sample fan with a shared hinge and flexible fabric. Pull a swatch free, feel its give, then pin a shade and compare alternatives side by side.

Canonical: https://gsapvault.com/effects/interactive-swatch-book
Live demo: https://gsapvault.com/demos/interactive-swatch-book/index.html

| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £5 |
| Difficulty | intermediate |
| Plugins | Core GSAP only |
| Techniques | draggable, pointer-effects, micro-interaction |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo, 15 September 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

A material sample book built around a visible binding pin. Drag the samples sideways to open or close the fan, or pull one upward to lift it out of the stack. The remaining samples stay attached to the same hinge. The fabric bends from its lower seam as you pull, then settles softly; drag or tap an extracted fabric to explore the same response while its label stays still and readable.

Pin a shade and choose a second to compare them side by side. Six named shade controls make selection immediate, and choosing another shade replaces only the unpinned sample. Inspection cards expand with the available space, with taller comparison samples on phones. Each sample retains its material name, short description and specification, then moves back to its original place in the fan when returned. The included woven collection uses original procedural fabric illustrations and example linen specifications.

## Features

- Continuously adjustable fan with a visible shared hinge and direct pointer dragging
- An upward pull meets gentle resistance before extracting the sample
- Fabric corners flex independently of live text labels, with touch dragging and an elastic settle
- One pinned reference stays in place while named shade controls switch the comparison sample
- Inspection cards scale with the available space, keeping fabric textures, names and specifications prominent
- The same sample elements move between the fan and comparison positions
- Touch layout places taller comparison samples above the remaining fan
- Named shade buttons, a range input and arrow-key navigation provide keyboard equivalents
- Reduced-motion mode preserves selection and comparison with immediate state changes
- Independent instances, programmatic controls and reversible lifecycle

## Use Cases

- Interiors studios comparing upholstery colours alongside material specifications
- Fabric merchants presenting a compact, interactive collection of swatches
- Paint or finish collections with customer-supplied texture images
- Product configurators where two finishes need to remain visible together

## Vibe-Code Ready Setup

This effect 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

GSAP positions and rotates each sample around a common hinge, then moves selected samples into inspection or comparison positions. Native pointer events distinguish sideways fanning, upward extraction and fabric manipulation. A temporary Canvas 2D mesh deforms the existing fabric image during GSAP-driven motion, then restores the original image at rest. Names and specifications remain live HTML. Responsive media contexts preserve state, skip deformation under reduced motion and clean up controls, canvases and tweens. The effect uses GSAP core without Draggable or Flip.

## Documentation

How this effect 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

Use the supplied `index.html` as the complete working example. Keep its `assets/` folder beside it.

**In the document head:**

_Code snippet omitted: it ships with the download._

**Before the closing body tag:**

_Code snippet omitted: it ships with the download._

Copy the `<main data-swatch-book>` from the example, including its controls. The script initializes each matching root independently after the document is ready. The demo opens with Oat already extracted so its material details and the compare action are immediately available. Remove `data-initial-sample` to start with a full fan.

### Using It With Your Own Design

**Markup contract.** Each `[data-swatch-book]` contains one `[data-stage]`, a `[data-hinge]`, and sample articles marked `[data-sample]` with a `data-name`, each containing a native `[data-inspect]` button with an `aria-hidden` arrow span. Keep `[data-spread-control]` as a range input with min 0/max 100. Native `[data-shade]` buttons use zero-based sample indices and provide direct selection. Keep their names and `--shade` colours in sync with the samples. The `[data-pin]`, `[data-return]`, `[data-cue]`, and `[data-status]` hooks supply comparison controls and accessible feedback. Inside the pin button, `[data-pin-label]` and `[data-pin-icon]` show its current action. Optional `[data-prev]` and `[data-next]` buttons are supported for layouts that need them. The status element should retain `aria-live="polite"`. The `.swatch-note` and `.swatch-spec` text is included in the selection announcement when present.

**Styling you can replace.** The serif font, woven collection text, palette, paper label, shadows, control styling, and six fabric illustrations are demo design. Replace them with your brand's material imagery and content. There is no dependency on GSAP Vault fonts or site assets.

**CSS that matters.** The stage must have a measurable height and `position: relative`. Ready samples use absolute positioning with `top: 0; left: 0`, and transform origin `50% calc(100% - 14px)` so their holes share the hinge. Keep the hole centre 14px above the sample's bottom edge. GSAP owns sample and hinge transforms; apply decorative transforms to an inner element. Keep card transforms in 2D and avoid permanent `will-change: transform` on the cards, which can cache their text at a low raster resolution when enlarged. Comparison cards share a slight paper-edge overlap while their labels remain visible. `touch-action: none` belongs on samples to support direct touch dragging. Outside `.is-ready`, samples must remain in document flow for fallback and teardown. Start the inspect buttons, shade selectors, optional previous/next buttons and range input with `disabled`; initialization enables them and teardown restores their original disabled state. Keep visible keyboard focus styles and the screen-reader-only status element.

The demo root occupies one viewport. When embedding in another layout, give `.swatch-book.is-ready` a specific height and preserve enough space for the controls and stage. The supplied demo fits 1200×675 and 390×844. Inspection scales with the available stage area, with a larger fabric surface on wide screens. On phones, comparison cards use a taller fabric area to make use of the available height. The script measures stage and card dimensions through a ResizeObserver.

**Replace imagery.** Change each `.swatch-fabric img` source and the sample's `--sample-color` fallback. Images are cropped with `object-fit: cover`. Keep the name, note and specification as real text. Keep each fabric image inside `.swatch-fabric`; the script creates a temporary Canvas 2D mesh there while it bends, then restores the original image at rest. The overscan canvas and `.is-flexing` rules let the fabric edge lift beyond its paper backing. Do not move label text into the canvas. Missing images or unavailable Canvas 2D retain the standard card interaction. Replace `data-name` and the label together. Add/remove complete sample articles and their matching `[data-shade]` controls; the fan distributes the samples automatically. The comparison limit remains two: one pinned reference and one selected alternative. Selecting a new alternative replaces only the unpinned sample.

### Options

| Attribute | Values | Default | Description |
|---|---|---|---|
| `data-spread` | 0–1 | 0.85 | Initial fan opening; the demo uses 0.92. Zero leaves a compact, usable stack. |
| `data-initial-sample` | Zero-based sample index | None | Optional sample to inspect on mount. The demo uses 3 (Oat). `returnAll()` still returns every sample. |
| `data-name` | Text | Required on each sample | Material name for accessible control labels |

The included markup uses six illustrative shades of the same linen weave. Labels show the colour description plus separate fibre, weave and weight rows. The six names are content, not hard-coded interaction state.

### Accessibility

- Tab to any named shade selector and press Enter/Space to inspect or return it. The selected sample also has a close button. The range control changes fan spread with native keyboard input.
- Left/Right keys browse unpinned samples; focus follows the selection within the shade picker. Optional previous/next controls offer the same action. Escape returns all samples, including when the range has focus. Reset moves focus to the first shade if its current control becomes disabled.
- Native touch pointer gestures support sideways fanning and upward extraction. Drag an extracted sample’s fabric to flex it without changing selection; tapping it gives a brief pluck. Its close button or selected shade button returns it. Tapping a sample in the fan or using a named shade selector provides an equivalent to extraction.
- Shade selectors and extracted sample controls expose `aria-pressed`; the pinned reference has a visible badge and a labelled Unpin action. A polite live region announces names, details and comparison changes. Full material text stays in the DOM. Fan cards can be tapped or dragged; their close buttons are hidden and disabled until extracted. The named shade selectors always provide a keyboard equivalent.
- Reduced motion applies state changes immediately and skips fabric deformation entirely. Selection and pinned state survive an OS motion-preference change while mounted. Keyboard shade selection receives the same brief fabric settle when motion is enabled.
- Without JavaScript or GSAP, all six samples appear as readable cards in normal document flow. Controls remain visible and disabled, with a note that comparison requires JavaScript. This fallback can scroll to make every sample available.

### Asset Provenance

The six local WebP images are **original procedural woven-fabric illustrations**, not photographs or scans of commercial fabrics. `assets/make-textures.py` contains their deterministic generator (Pillow required only to regenerate them). No external photographic source is used. Names, composition and weight are illustrative example product content, not verified stock claims. Replace them with your own product information before commercial use.

### Dependencies

- GSAP core **3.12+**; demo pinned to **3.15.0**.
- No GSAP plugins, Lenis, framework or build tool required at runtime.
- Instrument Serif and Mona Sans load from Google Fonts; local serif/sans fallbacks remain usable.

GSAP owns fan movement, extraction/return transitions, comparison placement and the played fabric response. Native Pointer Events supply input. A small Canvas 2D triangle mesh warps only the existing fabric image, with a fixed lower edge and limited free-corner displacement; it draws during GSAP updates and frees its backing buffer when settled. Labels remain live HTML on a 2D transform. This is a controlled material deformation with elastic easing, not a cloth physics solver. The effect uses neither Draggable nor Flip. Teardown removes the temporary canvases and cancels their tweens.

## 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 is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required for our code. Bundled third-party assets retain their own licences and attribution requirements. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Interactive Swatch Book](https://gsapvault.com/effects/interactive-swatch-book)
- [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](https://gsapvault.com/effects)

## Judge the Code Quality First

These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic):

- [Hover Underline](https://gsapvault.com/effects/hover-underline.md): Four material link underlines (an exit-through line, marker sweep, hand-drawn wave, and an endlessly travelling wave) with coordinated type and active-index responses.
- [3D Card Flip Gallery](https://gsapvault.com/effects/3d-card-flip.md): Tactile GSAP 3D cards with deep perspective, reactive edge lighting and shifting shadows. Flip on hover, keyboard focus or tap, with grouped auto-close.
- [Tailwind Component Remixer](https://gsapvault.com/effects/tailwind-class-playground.md): Generate fresh Tailwind component recipes with procedural SVG artwork, coordinated colour palettes and animated GSAP layout transitions.

---

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