Product Detail 49 block design & features
A two-column product page for a denim puffer jacket. The gallery column opens with a tall portrait video, followed by a grid of product photos, while a sticky buy box beside it holds the title, sale price, color and size options, quantity stepper, specs and an accordion with the fit guide and delivery details.
As the page scrolls, the video's container is driven by useScroll from the hero size down to a small tile pinned in the gallery's bottom corner, revealing the first photo beneath it while the rest of the photos rise in. The same video element stays mounted the whole time, so playback never restarts. Clicking the tile springs it back to full size, and a minimize button, the Escape key or a further scroll tuck it away again. The media, options and copy live in a data object, and photos open in a PhotoSwipe lightbox. Built with shadcn/ui and Motion.
On mobile the columns stack and the tile shrinks to a smaller size so it never covers the buy box. With reduced motion enabled, the video stays inline in the hero with a poster image and native controls.