Getting Started
Components
TweenCommand Palette
Search for a command to run...
TweenSearch for a command to run...
import { InfiniteDragGallery } from "@/registry/tween/infinite-drag-gallery"
export function InfiniteDragGalleryDemo() {
return <InfiniteDragGallery />
}
import { InfiniteDragGallery } from "@/components/ui/infinite-drag-gallery"<InfiniteDragGallery
images={["/img-1.jpg", "/img-2.jpg", "/img-3.jpg"]}
titles={["Solar Bloom", "Void Gaze", "Heat Core"]}
/>The gallery renders a translated canvas of absolutely-positioned tiles, lazily creating and culling only the cells inside a buffered window as you drag. Pointer drag is scoped to the container with pointer capture; releasing it carries momentum proportional to the drag velocity, eased toward the target each frame. Clicking a tile expands a copy of it to the center over a fading overlay with a custom hop ease while the other tiles fade out and the title rises in word by word; clicking again (or the overlay) reverses it. Everything is positioned relative to the component, so it works inside the docs preview. When prefers-reduced-motion: reduce is set a static grid is rendered with no drag or expand animation.
| Prop | Type | Default | Description |
|---|---|---|---|
images | string[] | 12 defaults | Image URLs tiled across the infinite grid. |
titles | string[] | 12 defaults | Title shown when a tile is expanded, paired by image index. |
background | string | "#e3e3db" | Canvas and overlay background color. |
foreground | string | "#ffffff" | Expanded title text color. |
itemWidth | number | 120 | Tile width in px. |
itemHeight | number | 160 | Tile height in px. |
itemGap | number | 150 | Gap between tiles in px. |
columns | number | 4 | Column count used to map grid coordinates to images. |
className | string | — | Extra classes on the outer container. |