Gallery 26 block design & features
The section arranges ten images across a five-column grid, alternating between two-column and three-column spans with a full-width row between each pair. Each image is wrapped in a custom BlurVignette component that layers a configurable blur mask over the photograph, built alongside standard shadcn/ui utilities.
Rounded corners at an extra-large radius give every cell a soft, pill-like shape. The blur overlay uses CSS backdrop-filter with mask-image compositing to feather inward from the edges, and a hover interaction clears the blur entirely to reveal the full image beneath. Each cell animates into view with a framer-motion entrance that fades in, scales up, and slides vertically.
The overall effect is editorial and atmospheric, treating the grid less like a conventional gallery and more like a mood board. The vignette treatment adds a dreamy, soft-focus quality that distinguishes this layout from sharper grid alternatives.