Product Detail 45 block design & features
The buy column sits on the left with the title, rating, price, description, color list and add to cart button, and a large photo stage with a filmstrip fills the right. Built with shadcn/ui, each color row shows how many photos it has, and sold out colors can still be previewed while the button explains they are unavailable.
Picking a color grows the new photo out of a circle centered on the product, so the old one is covered from the middle out. The filmstrip below shows only shots of that color, with photos entering and leaving while shared shots slide to their new spots. Clicking any filmstrip photo puts it on the stage with the same reveal. Shots, focus points and color lists are all data.
On mobile the stage and filmstrip move above the product details. Reduced motion replaces the reveal with a crossfade.