Centered Masonry Gallery Hero Block for React

Each tile is an AspectRatio holding a drawing (BrandArt, AppArt and the rest, chosen by the shot's id). Replace the drawing with an img that fills the box (absolute inset-0 size-full object-cover), and keep the tile's ratio: the box reserves the image's height before it loads, so nothing jumps. Add an src and an alt to each entry in SHOTS, with an alt that says what the work is. Then remove aria-hidden from the wall: it's there only because the drawings are decoration.

It's CSS multi-column layout: columns-2 on phones and columns-3 from the md breakpoint. The tiles flow down the first column and on into the next, and the browser balances the columns' heights. break-inside-avoid keeps a tile from splitting between two columns. There's one list, SHOTS, and no script measures anything. Change a tile's ratio (1, 4 / 3 or 3 / 4) to change its shape; the browser rebalances the columns.

The frame is a Guides layer with a top rule, two side lines and + marks on the top corners, and fade="bottom" fades the side lines out toward the bottom. The tiles sit in a wrapper with a maximum height (30rem on phones, 42rem from md), overflow-hidden and a mask-image gradient, so the lower tiles are cut and fade into the page instead of ending on a hard edge. Raise the maximum height to show more of the wall, or remove the wrapper's limit to show all six tiles.

Yes. Wrap each tile in an a to its case study, give its image an alt (the link's name) and a visible focus ring, and remove aria-hidden from the wall. Their Tab order follows the columns: down the first column, then the next. The two calls to action are links to #: point them at your portfolio and your process pages. On Base UI, each button renders its link with render={<a href="#" />} and nativeButton={false}.

On phones the wall keeps two columns instead of collapsing into one, and is cut at 30rem, so the first screen holds the headline and the button and the next shows the first tiles. From the md breakpoint it has three columns. The headline wraps, balanced, at text-4xl, and the two buttons stack, centered. The tiles keep their shapes at every width, since each one's height follows its width.

It's CSS. The badge, the headline, the sentence and the buttons fade up in turn through Tailwind's starting: variant (@starting-style), then the tiles rise one after another, 60 ms apart, each with its own transition-delay. With reduced motion there is no transition, so the hero and the wall render at rest at once. The block has no state and runs no script.