# Squiggle Product Gallery > An infinite shoppable card gallery that follows a winding line, with wave-led tilt, soft momentum and clickable product actions. Canonical: https://gsapvault.com/effects/squiggle-product-gallery Live demo: https://gsapvault.com/demos/squiggle-product-gallery/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | Core GSAP only | | Techniques | infinite-loop, curved-path, momentum, velocity-reactive, snap, product-gallery | | Uses Lenis | No | ## Overview A playful product discovery rail that carries real HTML cards over the crests and dips of a winding line. Product names, prices and add-to-bag buttons travel with the photographs, giving a shop collection a more expressive rhythm. A companion to Arc Offset Gallery, with a repeating wave in place of its shallow bowl-shaped path. The included demo bag provides instant feedback; a small custom event connects each product action to your own commerce system. ## Features - Infinite winding path with automatic extra card copies for wide screens - Cards tilt with the line and stretch gently with movement - Drag, swipe, wheel and arrow-key browsing with soft card snapping - Native product buttons remain clickable without accidental purchases after swipes - Custom add-to-bag event with product ID and title - Responsive wave depth and card spacing - Readable native product rail for reduced motion and no JavaScript - Scoped cleanup for route changes and dynamic motion preferences ## Use Cases - Homeware collection carousels - Shoppable editorial lookbooks - Featured product discovery - Design-store collection highlights ## 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 eases a continuous rail position toward wheel, drag and keyboard input. Cards loop through a repeating wave, tilting along its slope while velocity adds restrained stretch. Product actions remain semantic buttons and emit an integration event for the host shop. Reduced motion restores the native horizontal layout. ## 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 **1. Add to your HTML ``:** _Code snippet omitted: it ships with the download._ **2. Add before closing ``:** _Code snippet omitted: it ships with the download._ **3. Add the collection to your ``:** Copy the `main[data-squiggle]` element from `index.html`, then replace the images, names, prices and product IDs. The demo includes eight products. Extra visual copies are added automatically when a wider stage needs them. The included `assets/demo.js` provides a local demonstration bag; it does not create orders or connect to a checkout. ### Using It With Your Own Design The script needs a `data-squiggle` root containing `data-squiggle-viewport`, `data-squiggle-track` and equal-width `data-squiggle-card` elements. Each product action uses `data-squiggle-buy="your-product-id"`; its card needs an `h2` for the product name. Native buttons and links inside cards retain their normal behaviour. The script emits an event only for elements with the buy hook. The photographs, font, collection header, prices, colour tokens and demo bag are replaceable styling. The optional SVG contains a `data-squiggle-path` path; it shows the route behind the cards. Keep its sizing and the `is-live` positioning rules when restyling. The track gap supplies the card pitch. Cards must share a width. The script repeats complete collections as needed to cover the viewport plus two card widths, keeping the wrap out of sight even on ultrawide displays. Copies preserve product IDs, so their actions refer to the same products; do not put ID-dependent widgets inside the cards. Resizing or teardown removes surplus copies. Without JavaScript the track is a native horizontal flex rail. Absolute positioning is enabled only after the animation initializes. Keep that fallback, the viewport's clipped overflow in motion mode, and `touch-action: pan-y` so a vertical touch gesture can still scroll its parent page. No device-orientation permission is needed: this is a swipe rail. ### Options | Attribute | Values | Default | Description | | --- | --- | --- | --- | | `data-squiggle` | Root hook | Required | Scopes one independent gallery | | `data-squiggle-amplitude` | `0`–`1.3` | `1` | Responsive wave depth multiplier | | `data-squiggle-prev` | Button hook | Optional | Browse backward | | `data-squiggle-next` | Button hook | Optional | Browse forward | | `data-squiggle-position` | Text hook | Optional | Current position and product count | | `data-squiggle-path` | SVG path hook | Optional | Visible winding guide | | `data-squiggle-buy` | Product ID | Optional | Emits the product action event | | `data-squiggle-live` | Status hook | Optional | Demo bag feedback; use `role="status"` | ### Accessibility Previous/next buttons, left/right arrow keys, pointer drag, touch swipe and wheel input browse the rail. Focusing a visible product action brings its card into view. Cards fully outside the stage are inert so they do not create invisible tab stops. A swipe suppresses the resulting click. Product buttons have explicit accessible names; focus receives the same treatment as hover and a visible outline. Reduced motion removes the animated path and uses a scrollable product rail with working controls and product actions. With JavaScript disabled, products remain readable and horizontally scrollable; connect commerce actions to your own progressively enhanced forms if purchases must also work without scripting. ### Dependencies - GSAP 3.15.0 core; no plugins or Lenis required. - Mona Sans from Google Fonts is optional demo typography. - Product photographs are bundled as WebP; replace them with your own product assets. ### Teardown **JavaScript — before removing this demo in an SPA:** _Code snippet omitted: it ships with the download._ Cleanup removes the ticker, pending snap, event listeners, resize/intersection observers, pointer capture and animation styles. This global context handle is for the standalone demo; retain a separate context handle per mounted instance in a component application. ## 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. The only restrictions: no redistribution of the code itself and no competing effect libraries. - [Buy Squiggle Product Gallery](https://gsapvault.com/effects/squiggle-product-gallery) - [The Vault (£99 one-time, best value): everything in the catalogue, including future releases](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): - [Image Clip Reveal](https://gsapvault.com/effects/image-clip-reveal.md): A cinematic image reveal where a directional polygon aperture opens as the photograph settles from a restrained Ken Burns scale and its caption lands. --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt