Product Detail 31 block design & features
A furniture product page built with shadcn/ui. The left column carries the brand, name, sale price with a badge, description, color swatches, a quantity stepper, add to cart and buy now buttons, and an accordion for highlights, materials, delivery and returns. The right column is a sticky gallery with a large portrait frame and a column of small photo chips.
Selecting a chip lifts its photo out of the strip and grows it into the main frame using a shared layout transition, while the previous photo fades underneath. The chip slot stays empty while its photo is on stage, and when another chip is chosen the returning photo slides back into its slot from below. Previous and next buttons with a counter cycle through the same sequence from the keyboard.
Photos, prices and accordion copy come from the data object. With reduced motion enabled the frame crossfades instead. On mobile the frame sits above the product details with the chips in a five-column row beneath it.