Product Detail 37 block design & features
A shadcn/ui product detail page for a facial serum. The top section pairs a lifestyle photo with the title, tags, rating, summary, price, quantity stepper and add to bag button. Below it, a section about the ingredients leads into the tour, and the About and How to Use copy closes the page.
On desktop the tour pins the bottle photo while the page scrolls. Each ingredient takes a step of the scroll. A dot springs to that ingredient's spot on the photo, a hairline leader draws out to the edge with a name label, and the description cross-slides in the direction of travel. The ingredient list beside it marks the active step and scrolls to any ingredient when clicked. Ingredient names, roles, copy and photo coordinates are plain data.
Below the large breakpoint the tour is replaced with an inline list of ingredients under the photo, with no pinning. With reduced motion, the line and text crossfade instead of drawing or sliding.