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.
npx shadcn@latest add https://ui.aryank.space/r/infinite-drag-canvas.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| images / titles | string[] | 20 BLANK stills and titles | Tiles cycle through the image list by grid position, so the same picture recurs on a fixed lattice. |
| itemWidth / itemHeight / itemGap / columns | number | 120 / 160 / 150 / 4 | Tile box, spacing, and the column stride used to pick which image a cell gets. |
titles / imagestextTile images and the title shown when one opens.
itemWidth / itemHeight / itemGaptextTile size and grid spacing.
gsap