Product List 30 block design & features
A horizontal rail of ceramic product cards under a "Recommended For You" heading, with previous and next buttons beside the heading. Each card shows a tall product photo, a maker and category line, the name, the price and, where the product comes in several glazes, a row of color swatches with the active glaze named beside it.
The rail runs on Embla with free drag and momentum. Choosing a swatch wipes the new colorway's photo up from the bottom over the current one, rolls the maker line and price to the variant's values, and slides a small underline across to the active swatch with a shared layout animation. Where a product or glaze has a second photo, hovering the card crossfades to it, and the rollover steps aside while the pointer is over the swatches so a glaze change is always visible. Each glaze can override the product's collection and price in the data, so variants only need the fields that change. The swatches are a shadcn/ui radio group, so arrow keys work too.
On small screens the cards take most of the width and the rail drags with touch. Under reduced motion the photo and text swaps become simple crossfades.