Product Detail 48 block design & features
A front-on room photo of the sofa takes the left two thirds, with a switch and a unit toggle beneath it. The right column holds the title, price, color swatches, quantity, add to cart, description and a dimensions table. It uses shadcn/ui and draws the lines in an SVG layer sized to the photo.
When the photo scrolls into view, width, height, seat height and depth lines draw on one after another, with end caps and labels fading in at each line. Turning the switch off retracts them in reverse. The unit toggle converts every label and the table between centimeters and inches with a rolling number. Measurements are stored in millimeters with line and label positions, so other products only need new numbers and coordinates.
On mobile the photo and controls stack above the product details and the labels shrink to stay readable. With reduced motion the lines appear without drawing.