Product List 43 block design & features
A hoodie and streetwear product grid led by a large feature tile that spans two columns. It opens on the "Explore Our New Collection" image with its Eco-Friendly, Sustainable and Ethically Made caption, followed by product cards with color swatches, name, price and an Add button.
Tapping any card's photo promotes it into the large tile. The chosen card and the current feature swap places with shared motion layout animation, the promoted product cross-fades from its product shot to its lifestyle photo, and a white caption card with the name, color, price and Add to cart slides up once the tile settles. The previous feature drops back into the vacated slot, and the collection can be featured again the same way. Each card keeps its selected color as it moves.
Products and the collection are props, with per-color images where the second photo becomes the lifestyle shot. Built with shadcn/ui Button and Select plus motion/react, with a screen reader announcement for each new feature and reduced motion keeping only the fades.
On mobile the feature tile runs full width above a two column grid, and promoting a card further down scrolls the feature tile back into view.