An endless, cursor-driven photo canvas. Images tile infinitely in all directions — move your cursor to pan the field, and it glides fluidly toward where you point.
pnpm dlx shadcn@latest add @componentry/infinite-image-fieldDependencies: clsx tailwind-merge
import { InfiniteImageField } from "@/components/ui/infinite-image-field"
<InfiniteImageField className="w-full h-screen" />| Prop | Type | Default |
|---|---|---|
images | string[]Array of image URLs tiled across the infinite canvas. Images repeat in a deterministic pattern so the same grid cell always shows the same photo. | 12 built-in sci-fi Unsplash images |
imageWidth | numberWidth of each image tile in CSS pixels. | 300 |
imageHeight | numberHeight of each image tile in CSS pixels. | 200 |
gap | numberSpacing between adjacent tiles in CSS pixels. | 28 |
maxSpeed | numberMaximum pan speed when the cursor is at the edge of the canvas (pixels per frame). | 5 |
smoothing | numberLerp factor controlling how quickly velocity catches up to the cursor direction. Lower values feel heavier and dreamy; higher values feel snappy. | 0.07 |
borderRadius | numberCorner radius applied to each image tile. | 0 |
className | stringAdditional classes applied to the root container. | — |
Keep in mind
Need a custom component?
I build bespoke UI components & websites tailored to your brand.