Product Detail 53 block design & features
A product detail page for a hoodie built with shadcn/ui. A tall model photo sits beside a sticky panel with the title, sale price, color swatches, size row, inline size guide and add to cart.
A small floating pill in the bottom-right corner of the photo holds previous and next arrows around the current view's name. Each step reveals the next model shot as a circle growing out of the pill, and the name slides in the direction you moved. It loops from Detail back to Front. Hovering or focusing a size lifts in a popover with chest and length, and the inline guide follows that size, then the chosen size, then the model's size, in cm or inches.
On mobile the photo stacks above the details and the pill stays in the corner. Reduced motion crossfades the photos and the label.