Docs·Infinite Image Field

Infinite Image Field

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.

Installation

pnpm dlx shadcn@latest add @componentry/infinite-image-field

Usage

import { InfiniteImageField } from "@/components/ui/infinite-image-field"

<InfiniteImageField className="w-full h-screen" />

API Reference

PropertyTypeDefault
images

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.

string[]12 built-in sci-fi Unsplash images
imageWidth

Width of each image tile in CSS pixels.

number300
imageHeight

Height of each image tile in CSS pixels.

number200
gap

Spacing between adjacent tiles in CSS pixels.

number28
maxSpeed

Maximum pan speed when the cursor is at the edge of the canvas (pixels per frame).

number5
smoothing

Lerp factor controlling how quickly velocity catches up to the cursor direction. Lower values feel heavier and dreamy; higher values feel snappy.

number0.07
borderRadius

Corner radius applied to each image tile.

number0
className

Additional classes applied to the root container.

string—

View source

Click the icon in the preview panel to browse source for each variant.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X