A seamless two-axis image wall warped as one continuous fisheye surface, with dense editorial tiles and weighted drag navigation.
pnpm dlx shadcn@latest add @componentry/fisheye-infinite-gridDependencies: clsx tailwind-merge
| Prop | Type | Default |
|---|---|---|
items | FisheyeGridItem[]Images and labels repeated across the seamless two-axis grid. | Built-in editorial motion collection |
tileWidth | numberWidth of each gallery tile in CSS pixels. | 238 |
tileHeight | numberHeight of each gallery tile in CSS pixels. | 272 |
gap | numberSpace between adjacent grid tiles in CSS pixels. | 0 |
lensStrength | numberIntensity of the center-weighted bend. Use 0 for a flat grid. | 0.24 |
theme | "dark" | "light" | "system"Color treatment for the grid surface, tile chrome, labels, and depth vignette. System follows the active page or OS theme. | "system" |
hoverNudge | numberDistance of the small reversible motion shown when a mouse enters the grid. | 16 |
inertia | numberMomentum retained after drag release. Values are clamped between 0 and 0.98. | 0.94 |
wheelSensitivity | numberTrackpad and mouse-wheel response. Lower values create a slower, heavier pan. | 0.42 |
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.
import { FisheyeInfiniteGrid } from "@/components/ui/fisheye-infinite-grid"
export default function Gallery() {
return (
<FisheyeInfiniteGrid
className="h-full min-h-[620px] w-full"
/>
)
}