Infinite Drag Gallery
ProA wall of work you drag in any direction, forever.
Customize
<InfiniteDragGallery items={items} />Changes show live and stay in the address, so a link keeps them.
Code
This one is a Pro component
Pro components come with Pro Components, any Templates plan or All-Access. Sign in, or enter your licence key, to see the code here and copy it, or install it with the shadcn CLI below.
Install
With the shadcn CLI
Pro components install from a private registry that checks your licence key (Pro Components, a Templates plan or All-Access). Set it up once per project. The key stays in an environment variable and never goes into components.json.
1. Add the registry
Merge this into components.json.
{
"registries": {
"@dimaac-pro": {
"url": "https://api.dimaac.com/v1/ui/r/{name}.json",
"headers": { "Authorization": "Bearer ${DIMAAC_LICENSE_KEY}" }
}
}
}2. Add your key
Put it in .env.local (or your shell) and keep that file out of git. The CLI fills in ${DIMAAC_LICENSE_KEY} from it.
DIMAAC_LICENSE_KEY=your-licence-key3. Add the component
npx shadcn@latest add @dimaac-pro/infinite-drag-gallery@dimaac-pro is the registry from step 1. More in Docs
By hand
npm install gsap @gsap/react- Install the packages it uses: gsap, @gsap/react.
- Copy the component file from the Code panel (once your licence key unlocks it) into components/dimaac/infinite-drag-gallery.tsx.
- It's styled with Tailwind v4 classes. If that folder sits outside the places Tailwind scans, add it with @source in your CSS.
- Import it with import { InfiniteDragGallery } from "@/components/dimaac/infinite-drag-gallery" and give its parent a size: it fills it.
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). |
Use with AI
Agent prompt
Paste it into Claude Code, Cursor or any coding agent, or open it straight in a chat. It carries your Customize settings.
Add the Infinite Drag Gallery component (<InfiniteDragGallery />) 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 <licence key>".
Then use it like this:
import { InfiniteDragGallery } from "@/components/dimaac/infinite-drag-gallery";
<InfiniteDragGallery items={items} />
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.txtFiles agents read
- llms.txt
- Every component and how to install it
- infinite-drag-gallery.md
- This page as Markdown: install, props and the full source
About
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.
- Installs to
components/dimaac/infinite-drag-gallery.tsx- Uses
- gsap, @gsap/react
- Tags
- gsap, draggable, inertia, infinite, gallery, images, wheel
Modern Minimalist Building by Jupiter et Passagère® on Lummi (Lummi License). Abstract Eye Close-Up by Kuba on Lummi (Lummi License). Desert Dunes and Mountain Range by Pablo Stanley on Lummi (Lummi License). Elegant Perfume Bottle by Dona Mara and Clemara Studio on Lummi (Lummi License). Fashion Portrait with Orange Visor by West Kast on Lummi (Lummi License). Reflective Spheres and Books in a Desert Mirage by Mariana Pedroza on Lummi (Lummi License). Minimalist Stucco Building by Siren Media on Lummi (Lummi License). Mossy Forest Scene by PZF on Lummi (Lummi License). Monochrome Portrait of a Young Woman by West Kast on Lummi (Lummi License). Elegant Vase with Dried Flowers by Pablo Stanley on Lummi (Lummi License). Avant-Garde Fashion Pose by Semihan Dosunmu on Lummi (Lummi License). Vibrant Cylindrical Arrangement by SHIHO on Lummi (Lummi License). Minimalist Urban Design by Ricardo Matos on Lummi (Lummi License). Moody Solitary Figure by Krystyna on Lummi (Lummi License). Dramatic Coastline Aerial View by Cayetano Gros on Lummi (Lummi License). Vivid Portrait on Pink by Amino on Lummi (Lummi License). Elegant Perfume Bottles by Amino on Lummi (Lummi License). Serene Minimalist Scene with Palm Trees by Binks AI on Lummi (Lummi License). Modern Fashion Pose by Axel Photography on Lummi (Lummi License). Modern Sculpture Display by rena on Lummi (Lummi License). Serene Landscape View by SHIHO on Lummi (Lummi License). Poised Portrait by Lloyd Creates on Lummi (Lummi License). Modern Architectural Design by rena on Lummi (Lummi License). Minimalist Still Life by rena on Lummi (Lummi License). Avant-Garde Fashion Portrait by Semihan Dosunmu on Lummi (Lummi License). Contemplative Urban Sunset by Atelier Aji on Lummi (Lummi License). Abstract Sculptural Objects by Dona Mara on Lummi (Lummi License). Desert Wanderer by Beth Design Studio on Lummi (Lummi License). Profile Portrait of Woman by Dynamic Wang on Lummi (Lummi License). Minimalist Rustic Interior by SHIHO on Lummi (Lummi License). Serene Ocean Aerial View by Mikiwa on Lummi (Lummi License).