Image Wall

A wall of screenshots that never ends, and a camera hanging over it. The camera rests zoomed in on one card; every few seconds it pulls back, glides to the next card and settles on it, brightening that card while the rest stay dimmed. Hovering the wall holds the camera where it is.

The wall is one tile of cards in staggered columns, repeated around itself eight times, so however far the camera travels it never finds an edge. Every image sits in the same 493:332 frame under a small mono caption, and the camera walks the cards in order — each gets its turn before any comes round again. It fills whatever box you give it: a tall window shows one card at a time, a short band eases the zoom down so a few show at once, and on a phone it pulls back further still so the flight between cards is something to watch. Component Wall is this wall beside a column of hero copy.

A camera over the wall

Wait a few seconds: the camera pulls back, glides to the next card and settles on it. Hover to hold it.

items: are the cards, dealt into columns in order. Each has a mono title and an image, cropped from its top edge into the same 493:332 frame as every other card; odd columns start lower so the rows stagger.
interval4500: is how long the camera rests on a card. It holds while the wall is hovered, while the tab is hidden and while the wall is off screen; 0 keeps the camera still on the first card.
zoom1.35: is the camera's resting scale. In a box under 420px tall it eases down to 0.72 so a few cards fit; under 640px wide, to 0.5. Mid-flight the camera pulls back to 0.64 of wherever it rests.
className: sizes the box — the wall has no height of its own beyond a default h-96. Round it, mask it, position it; the camera re-aims on every resize.
intro0: in milliseconds makes the camera start pulled back and off to one side, drifting towards the first card with nothing in focus, and land on it only when the time is up — room for copy beside the wall to arrive first. The canvas is invisible until the camera has painted once, so the server-rendered wall never flashes unpositioned.

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Image Wall

npx shadcn@latest add @algorize-ui/image-wall

components/custom/blocks/ImageWallBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Image Wall needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

A band, shuffled

A short strip: the camera pulls back so a few cards show, and visits them in a random order.

order"shuffle": visits every card once per round in a random order; "serial" walks them one after another. Either way a card never comes round again before all the others have had a turn.
A box under420px: tall caps the zoom at 0.72 whatever zoom says, so the band shows neighbours instead of one card spilling out; a box under 640px wide caps it at 0.5.

Held still

interval={0} parks the camera on the first card; the wall becomes a framed screenshot with its neighbours dimmed around it.

interval0: never moves the camera. Pair it with a smaller zoom to show more of the wall at rest.
onFocus: is called with the index of the card the camera has settled on — the first card here — so you can caption or link it outside the wall.

Features

A camera, not a slider

One animation of the canvas moves the whole wall: it pulls the camera back to 0.64 of its resting scale while gliding to the next card, then settles back in. Nothing inside the wall moves on its own, so it stays cheap however many cards you give it.

A wall without edges

The tile is drawn nine times — itself and its eight neighbours — so the camera can settle on a card at the very edge and still see cards all around it. The copies are hidden from assistive tech.

Any box

Size it with a class and it fills the box; a short band eases the zoom down so a few cards fit, and a phone-width box pulls back further so the journey between cards stays visible. The camera re-aims on every resize and holds while hovered, hidden or off screen.

Quiet by request

Under prefers-reduced-motion the camera cuts between cards instead of flying, and the wall is labelled with the card in view.

Props Reference

Prop	Type	Default	Description
`items`	`{ title: string; image: string }[]`	—	The cards on the wall, each in a 493:332 frame under a mono caption.
`columns`	`number`	`4`	Columns in one tile.
`order`	`"serial" \| "shuffle"`	`"serial"`	Card by card, or every card once per round in a random order.
`interval`	`number`	`4500`	Milliseconds the camera rests; `0` holds still.
`zoom`	`number`	`1.35`	The camera's resting scale; capped at 0.72 in a box under 420px tall and 0.5 in one under 640px wide.
`intro`	`number`	`0`	Milliseconds the camera drifts, pulled back with no card in focus, before its first landing.
`anchor`	`{ x?: number; y?: number }`	`{ x: 0.5, y: 0.5 }`	Where in the box the resting card sits, as shares of its width and height. Two walls side by side read better with one resting high and the other low.
`onFocus`	`(index: number) => void`	—	Called when the camera settles on a card.
`className`	`string`	—	Sizes and shapes the box; the wall fills it. Other `div` attributes pass through.