Spark UI
Infinite Drag Grid

Customize

Images32 images
Names20 items
Columns
20
Rows
10
Scale
100
Zigzag
100
Row Offset
36
Smoothing
60
Drag Zoom
80
Hover Scale
108
Background
Text Color
Font
Text Scale
100%
Auto Play

Infinite Drag Grid

Gallery
221 views•6 uses

Props

15 properties
imagesstring[]32 images
Tile images, repeated across the plane.
namesstring[]20 images
Printed above each tile, repeated across the plane.
columnsnumber20
Tiles per row before the plane repeats.
rowsnumber10
Rows before the plane repeats.
scalenumber100
Size of the tiles and their spacing.
zigzagnumber100
How far alternate columns drop.
rowShiftnumber36
Sideways shift of alternate rows.
smoothingnumber60
How softly the view follows the pointer.
dragZoomnumber80
Scale the plane zooms out to while dragging.
hoverScalenumber108
Size of a hovered tile.
backgroundcolor#fafafa
Backdrop colour.
textColorcolor#111111
Colour of the labels.
fontFamilystringvar(--font-dm-mon…
Typeface for the labels.
textScalenumber100
Relative size of the labels.
autoPlaybooleanfalse
Drifts slowly on its own until the plane is touched.

Get this component

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

npx spark-ui-registry@latest add infinite-drag-grid

Writes to components/spark-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 numbered tiles that pans in every direction under a drag or the wheel. Grabbing it zooms the whole plane out and letting go zooms it back in, the view eases after the pointer, and tiles leaving one edge come back in at the other.

KEY FEATURES

  • ·The plane wraps on both axes, so it can be dragged forever in any direction without running out
  • ·A press turns into a drag after 8px of travel or 300ms held; only then does the plane ease out to 80% and, on release, back to full size
  • ·The view chases the pointer by a fixed share each frame, and the whole plane leans gently away from wherever the pointer rests
  • ·Alternate columns drop and alternate rows shift sideways, breaking the grid into a scattered, print-like rhythm
  • ·Tile positions are written straight to the DOM each frame, and tiles off screen are hidden, so hundreds stay smooth
  • ·Each tile carries a mono number and name above it and grows slightly on hover