DocsFisheye Infinite Grid

Fisheye Infinite Grid

A seamless two-axis image wall warped as one continuous fisheye surface, with dense editorial tiles and weighted drag navigation.

Installation

pnpm dlx shadcn@latest add @componentry/fisheye-infinite-grid

Usage

API Reference

PropertyTypeDefault
items

Images and labels repeated across the seamless two-axis grid.

FisheyeGridItem[]Built-in editorial motion collection
tileWidth

Width of each gallery tile in CSS pixels.

number238
tileHeight

Height of each gallery tile in CSS pixels.

number272
gap

Space between adjacent grid tiles in CSS pixels.

number0
lensStrength

Intensity of the center-weighted bend. Use 0 for a flat grid.

number0.24
theme

Color treatment for the grid surface, tile chrome, labels, and depth vignette. System follows the active page or OS theme.

"dark" | "light" | "system""system"
hoverNudge

Distance of the small reversible motion shown when a mouse enters the grid.

number16
inertia

Momentum retained after drag release. Values are clamped between 0 and 0.98.

number0.94
wheelSensitivity

Trackpad and mouse-wheel response. Lower values create a slower, heavier pan.

number0.42
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
Drag in any direction or use the arrow keys to explore the infinite grid.
import { FisheyeInfiniteGrid } from "@/components/ui/fisheye-infinite-grid"
export default function Gallery() {
  return (
    <FisheyeInfiniteGrid
      className="h-full min-h-[620px] w-full"
    />
  )
}