Infinite Gallery
Zero-dependency infinite horizontal gallery with drag/wheel input, and transform modes.
Installation
npx atelier-ui add infinite-galleryUsage
Imports
import { InfiniteGallery } from "@/components/InfiniteGallery"Usage example
const DATA = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
<InfiniteGallery
data={DATA}
renderItem={(item) => (
<img
src={item.src}
alt="image"
className="w-full h-auto object-cover select-none pointer-events-none"
draggable={false}
/>
)}
/>API
| Name | Type | Default | Description |
|---|---|---|---|
| data | T[] | — | Array of items to render. |
| renderItem | (item: T) => ReactNode | — | Render function called for each item. |
| mode | "shrink" | "flip" | "flip" | flip tilts items in 3D. shrink compresses edges. |
| perView | number | 4 | Number of items visible at once. |
| speed | number | 6 | Speed of the scroll. |
| inertia | number | 0.6 | Inertia of the scroll. |
| gap | number | 5 | Gap between items. |
| className | string | undefined | Class for the container element. |
Credits
The Lookback
Infinite gallery effect inspired by the website of Better Off® Studio.