Contact Sheet Zoom
Twelve hundred thumbnails laid out as one contact sheet that explodes into a draggable wall. Zooming in does not scale the container: every tile measures its own offset from the centre of the frame, divides it by a hundred, and is pushed out along that vector by 1200 across and 600 down while scaling five times, so the sheet fans wider than it does tall in a way a plain container scale cannot produce. Dragging lerps the whole sheet toward a target at 0.075 a frame, so it keeps gliding after the pointer stops, and a transparent layer above the tiles owns the pointer so no individual image can start a native drag.
npx shadcn@latest add https://ui.aryank.space/r/contact-sheet-zoom.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 | string[] | 50 BLANK photographs | Pool drawn from at random per tile, so each mount lays out differently. |
| totalRows / imagesPerRow | number | 20 / 60 | Tile count is the product of these. The tile width is a calc against imagesPerRow, so changing it needs the CSS changed with it. |
| zoomScale / spread | number / [number, number] | 5 / [1200, 600] | Per-tile scale at full zoom, and the horizontal and vertical fan multipliers. |
brandtextLabel on the floating pill.
totalRowstextRows of tiles on the sheet.
gsap