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 @compronents/cylinder-block-galleryInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| 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