PRO

Infinite Drag Canvas

A grid you can throw in any direction that never runs out. Tiles are keyed by column and row, built as the viewport approaches and destroyed once it passes, with the buffer biased toward the direction of travel so a fast fling still arrives on populated space. Release keeps the last measured velocity and coasts. Clicking a tile hides the original, spawns a free copy at its exact screen box, and grows it to a centered plate, so the expand starts where you clicked.

Component

Experiment 445

Drag to explore

Install
npx shadcn@latest add https://ui.aryank.space/r/infinite-drag-canvas.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
images / titlesstring[]20 BLANK stills and titlesTiles cycle through the image list by grid position, so the same picture recurs on a fixed lattice.
itemWidth / itemHeight / itemGap / columnsnumber120 / 160 / 150 / 4Tile box, spacing, and the column stride used to pick which image a cell gets.
Customize
titles / imagestext

Tile images and the title shown when one opens.

itemWidth / itemHeight / itemGaptext

Tile size and grid spacing.

Dependencies
gsap