Interactive Swatch Book

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

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.