Infinite Drag Grid

Zenora UI

Get Started

Infinite Drag Grid·Galleries

npx zenora-ui-registry@latest add grid-infinite

Galleries

416 views•101 uses

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx zenora-ui-registry@latest add grid-infinite

Writes to components/zenora-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server

An endless plane of image tiles that pans in every direction with inertia, dynamic zigzag offsets, and interactive drag-to-zoom physics.

KEY FEATURES

·Continuous 2D plane wrapping with frame-rate independent easing and inertia
·Fluid drag-to-zoom perspective scaling and responsive pointer tilt parallax
·Customizable zigzag drop and row-shift spacing for scattered print aesthetics

Props

11 properties

imagesstring[]25 images

Tile images repeated across the plane.

columnsnumber20

Tiles per row before repetition.

rowsnumber10

Rows before repetition.

scalenumber100

Size of tiles and spacing.

zigzagnumber100

How far alternate columns drop.

rowShiftnumber36

Sideways offset of alternate rows.

smoothingnumber60

Inertia smoothness for view follow.

hoverScalenumber108

Zoom scale of a hovered tile.

dragZoomnumber80

Plane zoom level while dragging.

backgroundcolor#ffffff

Canvas background color.

autoPlaybooleantrue

Slow autonomous drift until touched.

Zenora UI

Get Started

Infinite Drag Grid·Galleries

npx zenora-ui-registry@latest add grid-infinite