Product Detail 40 block design & features
A product detail page for a denim puffer built with shadcn/ui. A two by two photo grid inside a thin frame sits beside the title, price, reviews, color and size options, add to cart, service links and an accordion for description, features and fabric.
Choosing a colorway reorders the grid with Motion layout animations so a different photo leads, each tile springing in with a slight stagger. The thin frame line around the grid recolors with the colorway's hex value, wiping outward from the selected swatch's position. The color name animates in letter by letter. Colorways, hex values, sizes and photos are all data.
On mobile the grid stays two by two above the details. Out of stock options are announced and skipped. With reduced motion, the reorder snaps into place and the frame color fades in.