Projects 11 - Masonry image gallery with scroll animations

Pro

Multi-column masonry gallery where images fade in on scroll and scale with a brightness shift on hover.

Vue
Shadcn Projects 11 block

Component Data

  • ID:projects11
  • Access:pro
  • Created:Oct 1, 2025
  • Type:block

Projects 11 block design & features

The section uses a CSS columns layout to present twelve images in a masonry arrangement that flows across one, two, or three columns depending on viewport width. Each image fades and slides upward into view as it enters the viewport, staggered slightly per item for a cascading entrance effect.

Hovering an image triggers a gentle scale increase and brightness lift, paired with a translucent dark overlay that fades in over the image surface. Spacing is consistent between items via column gap and vertical spacing utilities. No text or metadata accompanies the images.

The style is pure photo-wall with no borders, cards, or decorative framing. The masonry break prevents uniform row heights, giving the layout an organic editorial quality. Interaction is minimal and purely visual, keeping the focus on image content.

Columns reduce progressively on smaller breakpoints, ending at a single column on mobile with the same vertical spacing preserved.