--- title: Infinite Drag Gallery description: A wall of work you drag in any direction, forever. category: Gallery tier: pro url: https://ui.dimaac.com/components/infinite-drag-gallery registry: https://api.dimaac.com/v1/ui/r/infinite-drag-gallery.json registry_auth: Authorization: Bearer --- # Infinite Drag Gallery A staggered wall of photo cards you can drag, throw, scroll or arrow-key in any direction. Every column wraps on its own and the columns wrap sideways as a group, so the wall never runs out. Draggable moves an invisible proxy and the wall glides after it, a throw keeps going with GSAP Inertia, the whole wall eases back a little while you hold it, cards grow slightly under the cursor and their titles roll letter by letter. It enters with the cards sharpening out of a blur from the middle out. Repeats are hidden from screen readers, links are real links (a drag never counts as a click), tabbing to a card brings it into view, and with reduced motion the wall moves only when you move it. ## Install This is a Pro component: its source is for buyers of Pro Components, a Templates plan or All-Access, and is not on this page. It installs from the authenticated registry, with the licence key in an environment variable. 1. Merge the registry into components.json (the key is never written into the file): ```json { "registries": { "@dimaac-pro": { "url": "https://api.dimaac.com/v1/ui/r/{name}.json", "headers": { "Authorization": "Bearer ${DIMAAC_LICENSE_KEY}" } } } } ``` 2. Put the licence key in `.env.local` (keep it out of git; never print or commit it). Ask the owner for it if it isn't set: ```bash DIMAAC_LICENSE_KEY=your-licence-key ``` 3. Add the component: ```bash npx shadcn@latest add @dimaac-pro/infinite-drag-gallery ``` The registry item is https://api.dimaac.com/v1/ui/r/infinite-drag-gallery.json and answers only with `Authorization: Bearer ` (or `X-License-Key`). It answers 401 without a key, 403 for a key that isn't valid, and 402 for a key whose purchase doesn't include Pro components (see https://ui.dimaac.com/pricing). Dependencies: ```bash pnpm add gsap @gsap/react npm install gsap @gsap/react ``` By hand: Unlock the code on https://ui.dimaac.com/components/infinite-drag-gallery with your licence key, then: 1. Install the packages it uses: gsap, @gsap/react. 2. Copy the component file from the Code panel (once your licence key unlocks it) into components/dimaac/infinite-drag-gallery.tsx. 3. It's styled with Tailwind v4 classes. If that folder sits outside the places Tailwind scans, add it with @source in your CSS. 4. Import it with import { InfiniteDragGallery } from "@/components/dimaac/infinite-drag-gallery" and give its parent a size: it fills it. ## Usage ```tsx import { InfiniteDragGallery } from "@/components/dimaac/infinite-drag-gallery"; ``` ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `items` (required) | `InfiniteDragGalleryItem[]` | - | The cards. Twenty or more look best: the wall repeats them to fill the screen. Every image loads up front (a throw must never land on an empty card), so use web-sized files. | | `columns` | `number` | `4` | How many different columns the items are dealt into before the pattern repeats (a column pattern, not the number on screen: cardWidth sets how many fit). | | `gap` | `number` | `24` | Space between cards, in pixels. | | `cardWidth` | `number` | `280` | Width of each card, in pixels. Capped at 44% of the box width, so phones still show two columns. | | `dragResistance` | `number` | `0` | How much the wall holds back while you drag: 0 follows the pointer, 0.9 barely moves. | | `inertia` | `boolean` | `true` | Keep gliding after you let go (a throw). | | `throwResistance` | `number` | `1200` | How quickly a throw slows down. Higher stops sooner. | | `hoverScale` | `number` | `1.05` | How much a card grows under the cursor. 1 turns it off. | | `pressScale` | `number` | `0.9` | How far the whole wall zooms out while you hold it. 1 turns it off. | | `showTitles` | `boolean` | `true` | Show each card's title and number under it. | | `openInNewTab` | `boolean` | `false` | Open card links in a new tab. | | `label` | `string` | `"Gallery"` | What screen readers call the gallery. | | `className` | `string` | `""` | Extra classes for the outer box. Give it a size (it fills it). | ## Credits - Modern Minimalist Building: Jupiter et Passagère®, Lummi (https://www.lummi.ai/photo/modern-minimalist-building-kumrj), Lummi License - Abstract Eye Close-Up: Kuba, Lummi (https://www.lummi.ai/photo/abstract-eye-close-up-uamae), Lummi License - Desert Dunes and Mountain Range: Pablo Stanley, Lummi (https://www.lummi.ai/photo/desert-dunes-and-mountain-range-bfczd), Lummi License - Elegant Perfume Bottle: Dona Mara, Lummi (https://www.lummi.ai/photo/elegant-perfume-bottle-j5t5p), Lummi License - Fashion Portrait with Orange Visor: West Kast, Lummi (https://www.lummi.ai/photo/fashion-portrait-with-orange-visor-damql), Lummi License - Reflective Spheres and Books in a Desert Mirage: Mariana Pedroza, Lummi (https://www.lummi.ai/photo/reflective-spheres-and-books-in-a-modern-setting-U_hc_), Lummi License - Minimalist Stucco Building: Siren Media, Lummi (https://www.lummi.ai/photo/minimalist-stucco-building-gurez), Lummi License - Mossy Forest Scene: PZF, Lummi (https://www.lummi.ai/photo/mossy-forest-scene-o4b8t), Lummi License - Monochrome Portrait of a Young Woman: West Kast, Lummi (https://www.lummi.ai/photo/monochrome-portrait-of-a-young-woman-shb7s), Lummi License - Elegant Vase with Dried Flowers: Pablo Stanley, Lummi (https://www.lummi.ai/photo/elegant-vase-with-dried-flowers-dhxnk), Lummi License - Avant-Garde Fashion Pose: Semihan Dosunmu, Lummi (https://www.lummi.ai/photo/avant-garde-fashion-pose-1yqoo), Lummi License - Vibrant Cylindrical Arrangement: SHIHO, Lummi (https://www.lummi.ai/photo/vibrant-cylindrical-arrangement-pj9pp), Lummi License - Minimalist Urban Design: Ricardo Matos, Lummi (https://www.lummi.ai/photo/minimalist-urban-design-abiri), Lummi License - Moody Solitary Figure: Krystyna, Lummi (https://www.lummi.ai/photo/moody-solitary-figure-x1avl), Lummi License - Dramatic Coastline Aerial View: Cayetano Gros, Lummi (https://www.lummi.ai/photo/dramatic-coastline-aerial-view-jml-7), Lummi License - Vivid Portrait on Pink: Amino, Lummi (https://www.lummi.ai/photo/vivid-portrait-on-pink-oxbow), Lummi License - Elegant Perfume Bottles: Amino, Lummi (https://www.lummi.ai/photo/elegant-perfume-bottles-vnjg1), Lummi License - Serene Minimalist Scene with Palm Trees: Binks AI, Lummi (https://www.lummi.ai/photo/serene-minimalist-scene-with-palm-trees-pba-c), Lummi License - Modern Fashion Pose: Axel Photography, Lummi (https://www.lummi.ai/photo/modern-fashion-pose-zsdav), Lummi License - Modern Sculpture Display: rena, Lummi (https://www.lummi.ai/photo/modern-sculpture-display-y1he7), Lummi License - Serene Landscape View: SHIHO, Lummi (https://www.lummi.ai/photo/serene-landscape-view-e-jhh), Lummi License - Poised Portrait: Lloyd Creates, Lummi (https://www.lummi.ai/photo/poised-portrait-ooi9b), Lummi License - Modern Architectural Design: rena, Lummi (https://www.lummi.ai/photo/modern-architectural-design-aozka), Lummi License - Minimalist Still Life: rena, Lummi (https://www.lummi.ai/photo/minimalist-still-life-gi7oj), Lummi License - Avant-Garde Fashion Portrait: Semihan Dosunmu, Lummi (https://www.lummi.ai/photo/avant-garde-fashion-portrait-rjvlr), Lummi License - Contemplative Urban Sunset: Atelier Aji, Lummi (https://www.lummi.ai/photo/contemplative-urban-sunset-ttp5t), Lummi License - Abstract Sculptural Objects: Dona Mara, Lummi (https://www.lummi.ai/photo/abstract-sculptural-objects-flp-3), Lummi License - Desert Wanderer: Beth Design Studio, Lummi (https://www.lummi.ai/photo/desert-wanderer-9puhu), Lummi License - Profile Portrait of Woman: Dynamic Wang, Lummi (https://www.lummi.ai/photo/profile-portrait-of-woman-xyyue), Lummi License - Minimalist Rustic Interior: SHIHO, Lummi (https://www.lummi.ai/photo/minimalist-rustic-interior-qppyl), Lummi License - Elegant Perfume Bottle: Clemara Studio, Lummi (https://www.lummi.ai/photo/elegant-perfume-bottle-5ya2w), Lummi License - Serene Ocean Aerial View: Mikiwa, Lummi (https://www.lummi.ai/photo/serene-ocean-aerial-view-kjab6), Lummi License ## Source The source of a Pro component is for buyers of Pro Components, a Templates plan or All-Access. Install it with the commands above, or unlock it on https://ui.dimaac.com/components/infinite-drag-gallery. ## Agent prompt ```text Add the Infinite Drag Gallery component () from DiMaac UI to this project. It is a Pro component, so its source needs the owner's DiMaac licence key (Pro Components, a Templates plan or All-Access). Docs: https://ui.dimaac.com/components/infinite-drag-gallery 1. Add the Pro registry to components.json (merge it into "registries"). Don't write the key into the file: { "registries": { "@dimaac-pro": { "url": "https://api.dimaac.com/v1/ui/r/{name}.json", "headers": { "Authorization": "Bearer ${DIMAAC_LICENSE_KEY}" } } } } 2. The owner puts their licence key in .env.local (keep it out of git): DIMAAC_LICENSE_KEY=your-licence-key Ask them for it if it isn't set. Never print it or commit it. 3. Install it with: npx shadcn@latest add @dimaac-pro/infinite-drag-gallery The registry item is https://api.dimaac.com/v1/ui/r/infinite-drag-gallery.json and wants the header "Authorization: Bearer ". Then use it like this: import { InfiniteDragGallery } from "@/components/dimaac/infinite-drag-gallery"; It imports gsap, @gsap/react; the CLI installs them. It uses Tailwind v4 classes, so make sure Tailwind scans that folder. Give its parent a size, keep light and dark mode working and keep its prefers-reduced-motion fallback. Full index for agents: https://ui.dimaac.com/llms.txt ```