Product Detail 44 block design & features
A product photo grid sits beside the buy column, which holds the title, rating, price, description, image color swatches, three accessory cards and a bundle tray. The tray always starts with the headphones in the chosen color. It is built with shadcn/ui and lucide icons.
Pressing Add on an accessory card sends its photo into the tray as a shared element, leaving a dashed slot behind. Clicking an accessory's photo swaps the main photo grid to the accessory shots, led by the one picked, with a staggered crossfade; clicking it again or picking a color brings the headphone photos back. Tray items reflow as they come and go, and each has a remove button that flies the photo back to its card. The main button switches from Add to cart to Add bundle and rolls its price as the total changes. Accessories, prices and colors are data, so the tray works with any number of add-ons.
On mobile the photo grid stacks above the buy column and the three accessory cards stay in a compact row. With reduced motion, items appear in place without the flight.