Product List 47 block design & features
A grid of sneaker cards, each with a wide photo, a wishlist button, the product name, the price and a row of color swatches. The selected colorway name sits under the swatches, and the cards fade up with a short stagger as they scroll into view.
Each photo is a horizontal drag gallery with one slide per colorway. Dragging or swiping snaps to the nearest slide, and an outline ring glides along the swatches in step with the drag so the dots always show where you are. Clicking a swatch or using the arrow keys on the focused photo moves the gallery too. The wishlist heart fills with a clip-path that rises from the bottom. Products and their colorway slides are plain data, and the cards use shadcn/ui typography and the shared price component.
On mobile the grid becomes a single column and the galleries respond to touch swipes while vertical scrolling still works. Under reduced motion the gallery jumps between slides and the heart fades in.