Product Categories 10 block design & features
The block shows a heading above a row of six square tiles joined by thin outlines. Each tile holds a product photo masked into a distinct shape, like a four-leaf clover, a scalloped flower or a rounded square, with the category name underlined beneath it. It uses shadcn/ui and the Carousel component.
On large screens a muted background glides between tiles as the pointer or keyboard focus moves along the row, and fades out when it leaves. The active tile's shaped photo fades into the full photo with rounded corners, and its label's underline darkens. Every tile links to its category. The categories, their photos, the shape mask for each and the links are props, and the shapes are plain SVG files so they can be swapped.
Below the large breakpoint the row turns into a horizontal carousel that shows one, three or four tiles depending on width.