Gallery 25 block design & features
The section lays out 11 images across a four-column CSS grid, with each column containing two or three images at individually specified heights ranging from 12rem to 32rem. The entire grid is then repeated in a second identical block below, creating a tall, continuously scrollable photo wall. Each image is wrapped in a Framer Motion container that animates opacity from 0 to 1, scale from 0.9 to 1, and a vertical offset to zero as it enters the viewport, with staggered delays per column item.
Alternate columns animate in opposite vertical directions, with columns one and three sliding up and columns two and four sliding down, producing a weaving entrance pattern as the user scrolls. All images use rounded-2xl corners and sit on muted background placeholders. The fourth column includes a small muted-fill spacer block at the bottom to balance the visual weight.
The result is a classic masonry-style photo wall with a monochrome palette and organic rhythm created by the mixed heights. The scroll-triggered entrance keeps the experience lightweight, revealing content progressively rather than loading everything at once.
On smaller screens the grid collapses to two columns, maintaining the varied-height treatment while halving the horizontal density.