Cylinder Block Gallery
Photographs mounted as curved panels on the inside of a tall cylinder you fly up through. Each panel is a hand-built buffer geometry bent to the cylinder's radius, so the picture wraps with the wall instead of floating flat in front of it, and its UVs are inset a tenth on each side so the edges do not smear. Panels sit in horizontal bands with a random angular jitter, the ring turns on its own at a constant crawl, and scroll velocity is injected as extra spin that decays on its own. Three.js and Lenis, no animation library.
npx shadcn@latest add https://ui.aryank.space/r/cylinder-block-gallery.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 panel, so the same set gives a different wall each mount. |
| rows / panelsPerRow / rowSpacing | number | 12 / 4 / 3.25 | Density of the wall. More panels per row with less spacing reads as a mosaic; fewer reads as an archive. |
| panelSize | [number, number] | [5, 3] | Panel width and height in world units before the curve. |
| embedded | boolean | true | Own the scroll container. Set false to drive it from the window scroll. |
rowstextHorizontal bands of panels up the cylinder.
panelsPerRowtextPanels evenly spaced around each band.
threelenis