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.
| Prop | Type | Default |
|---|---|---|
imagesArray of image URLs tiled across the infinite canvas. Images repeat in a deterministic pattern so the same grid cell always shows the same photo. | string[] | 12 built-in sci-fi Unsplash images |
imageWidthWidth of each image tile in CSS pixels. | number | 300 |
imageHeightHeight of each image tile in CSS pixels. | number | 200 |
gapSpacing between adjacent tiles in CSS pixels. | number | 28 |
maxSpeedMaximum pan speed when the cursor is at the edge of the canvas (pixels per frame). | number | 5 |
smoothingLerp factor controlling how quickly velocity catches up to the cursor direction. Lower values feel heavier and dreamy; higher values feel snappy. | number | 0.07 |
borderRadiusCorner radius applied to each image tile. | number | 0 |
classNameAdditional classes applied to the root container. | string | — |
Click on the icon in the top right of the example preview to view the source code for specific variants.
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
import { InfiniteImageField } from "@/components/ui/infinite-image-field"
<InfiniteImageField className="w-full h-screen" />