Product List 35 block design & features
A row of electronics cards where each product's color variants share a single card. Every card has a photo, rating, add button, name, price and a swatch row with the current color and how many are available.
Choosing a swatch reveals the new photo with a horizontal clip-path wipe that travels in the direction of the swatch, while the previous photo stays underneath. Cut-out product shots sit on a soft tint that changes with the color. The selection ring glides between swatches, the name crossfades and the price rolls to its new value. Each colorway is a data entry with its own name, price, image and tint.
The swatches are a radio group, so arrow keys move between colors. Built with shadcn/ui Button and Badge. Cards stack in one column on phones and two on tablets.