Product Detail 47 block design & features
The buy column on the left holds the title, price, color swatches, quantity, add to cart, description and a Design and Dimensions table. The right side shows a large room photo with four hotspots and a strip of thumbnails below. It is built with shadcn/ui and lucide icons.
Hotspots fade and lift in one after another whenever a photo loads. Tapping one opens a small card with the matching spec, such as the chaise depth or seat height, and moving to another hotspot glides the same card to its new anchor. Switching photos crossfades the image, moves every hotspot to its new spot, and keeps the open card attached. Hotspot positions are stored per photo in image coordinates and mapped onto the cropped frame, and Escape closes the card.
On mobile the photo and thumbnails sit above the product details and the hotspots shrink slightly. Reduced motion keeps the fades and drops the movement.