Product Categories 25 block design & features
The block shows a heading and short description beside a segmented filter with All, New in, Gifts and Sale, above a mosaic of category photos. With All selected, eight tiles fill a four column grid with one large square tile and one wide tile among smaller ones. Each tile is a full photo with a small white plate in the corner naming the category and its item count. It is built with shadcn/ui and Motion.
Picking a filter slides the highlight across to the chosen option. Categories that do not match fade out, and the remaining tiles glide and resize into a bolder four tile layout with one tall feature photo, so the mosaic keeps the same overall height and never leaves gaps. Returning to All brings the other tiles back as everything reflows. Corners stay rounded and the photos keep their proportions while tiles change size.
The style is a modern editorial grid with real lifestyle and product photography, and the reflow gives a static category grid a sense of depth without any hover effects on the images. It needs one photo per category plus a set of tags that decide which filters each category appears under. The heading, description, filters and categories, with their titles, counts, links, tags and images, are props. On mobile the mosaic becomes a simple two column grid, and the motion follows the reduced motion setting.