# Arc Offset Gallery > An infinite card slider where every card glides along a shallow arc, easing into focus with offset depth, gentle rotation and velocity-led motion. Canonical: https://gsapvault.com/effects/arc-offset-gallery Live demo: https://gsapvault.com/demos/arc-offset-gallery/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | Observer | | Techniques | infinite-loop, curved-path, momentum, velocity-reactive, snap, offset-cards | | Uses Lenis | No | ## Overview A tactile infinite slider that gives a row of cards a soft, editorial rhythm. Scroll, drag or use the keyboard and each card travels through a shallow curve: the focused card rises and sharpens while its neighbours drift lower, rotate away and recede into space. The rail never reaches an edge. A frame-rate-independent GSAP ticker eases toward the input, wraps card positions continuously and settles the nearest card with a quiet snap, so the movement feels deliberate rather than mechanical. ## Features - Truly infinite card loop with no duplicated DOM tiles or visible seam - Shallow arc path that lifts the focused card and lowers cards toward either edge - Offset rotations, scale, depth, opacity and blur mapped to each card's distance from centre - Frame-rate-independent buttery easing that stays smooth across different refresh rates - Gentle velocity lean and squash that add life during a drag without overwhelming the layout - Wheel, pointer drag, touch drag, previous/next buttons and arrow-key controls - Nearest-card settle with a soft power3.out landing after an interaction pauses - Readable horizontal fallback for no-JavaScript and prefers-reduced-motion visitors ## Use Cases - Book, product or editorial discovery rails with a more considered browsing rhythm - Portfolio project strips where the centre card should feel naturally selected - Lookbooks and collection pages with offset depth instead of a flat carousel - Case study galleries that need a gentle, premium sense of movement - Hero card navigators where infinite browsing should never expose an endpoint ## 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 Each card starts from an indexed position on a circular coordinate system. The ticker wraps that position into the nearest visible cycle, then maps its distance from the viewport centre onto a parabolic y value, rotation, scale, opacity, z-index and a small blur. The same frame also derives a restrained skew and squash from the eased travel velocity. Wheel, pointer and touch input update a target position rather than jumping the rail directly. The current position follows that target with time-based exponential easing, so a 60Hz screen and a 120Hz screen settle at the same rate. When input stops, the target is rounded to the nearest card pitch and eased into place; keyboard and button controls use the same path, while reduced motion skips the ticker and restores a readable horizontal rail. ## Integration Preview How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download. ### Quick Start **1. Add to your HTML ``:** ```html ``` **2. Add the gallery to your ``:** ```html

Your artwork

Card title

``` **3. Add before the closing `` tag:** ```html ``` The script discovers every `[data-arc-gallery]`, measures the card pitch, and keeps the rail moving around an infinite coordinate loop. Scroll, drag, swipe, click the optional controls, or use the arrow keys. ### Options Set these on `[data-arc-gallery]`. | Attribute | Values | Default | Description | |-----------|--------|---------|-------------| | `data-arc-gallery` | marker | required | Identifies an instance | | `data-arc-intensity` | `0.4`–`1.5` | `1` | Scales the velocity lean and squash | | `data-arc-viewport` | marker | required | The clipped, interactive stage | | `data-arc-track` | marker | required | The card container | | `data-arc-card` | marker | required | One card in the loop | | `data-arc-index` | zero-based number | required | Card order used for keyboard focus and current state | | `data-arc-prev` / `data-arc-next` | button | optional | Move one card pitch in either direction | | `data-arc-position` | marker | optional | Receives the current `01 / 07` style position | | `data-arc-live` | live-region marker | optional | Receives the current card's accessible label | ### Accessibility - **Reduced motion:** `prefers-reduced-motion: reduce` skips Observer and the ticker. Cards become a readable horizontal rail with no transforms or blur. - **No JavaScript:** cards remain a normal horizontal flex row and are not hidden behind a script-only opacity gate. - **Keyboard:** the viewport is focusable and Left/Right move one card. During motion, only the centred card is exposed in the tab order and to assistive technology; the surrounding decorative cards are marked `aria-hidden` so off-screen copies are not announced. - **Focus styling:** use `:focus-visible` on your card surface and controls; the demo supplies a visible accent outline. - **Touch:** horizontal touch movement and wheel input use the same eased position as pointer dragging. ### Dependencies - GSAP 3.12+ (demo uses 3.15.0) — `gsap.min.js` - Observer — `Observer.min.js` ## 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 Arc Offset Gallery](https://gsapvault.com/effects/arc-offset-gallery) - [The Vault (£99 one-time, best value): every current and future effect, template and UI element](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 editorial caption lands. --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt