Product Detail 32 block design & features
A long-form furniture product page built with shadcn/ui. A pinned image stage fills the left column while the right column holds the brand, name, price, finish swatches, a quantity stepper and the purchase buttons, followed by Overview, Product Details, Condition Notes and Delivery & Guarantee sections.
Each section is tied to its own photo. As a section scrolls into view, a scroll-linked clip-path inset wipes that photo up over the previous one, and scrolling back reverses it. A thin line beside the sections fills as you read and a dot marks every section you have reached. Once the main buttons leave the viewport, a purchase rail slides up from the bottom with a thumbnail of the current photo, the price and the cart buttons.
Section copy, the specification table and the shipping rows come from the data object, and each extra photo maps to the section in the same position. With reduced motion enabled the stage crossfades instead of wiping. On mobile the stage pins at the top of the screen at a shorter height while the sections scroll beneath it.