Gallery 34 - Gallery grid with hover blur and stat chips

Pro

Three-column card grid where hovering one item blurs the others, each card showing an image, title, hashtag, and icon stat chips.

Vue
Shadcn Gallery 34 block

Component Data

  • ID:gallery34
  • Access:pro
  • Created:Aug 28, 2025
  • Type:block

Gallery 34 block design & features

Six cards arrange in a responsive grid constrained to a max width, shifting from a single column through two to three columns at larger breakpoints. Each card contains a large image, a semibold title, a hashtag-style description, a row of icon-and-number stat chips on pill-shaped backgrounds, and a heart icon in the top corner. The cards rest on muted surfaces with large rounded corners.

When the cursor enters any card, framer-motion animates a blur filter onto every other card's image while slightly scaling up the active one. The blur and scale transitions use short easeOut timing, and the staggered entrance delays on the initial animation give each card a cascading reveal on first view. Stat chips use Lucide icons paired with numeric values inside rounded-full pill containers on a background surface.

The feel is social-media-influenced, blending visual cards with metadata chips and a focus-blur mechanic that isolates the hovered item. Built with Shadcn UI color tokens and spacing, the grid reads as a browsable catalog where the blur interaction encourages item-by-item exploration rather than scanning the full set at once.