Ecommerce Hero 13 block design & features
This ecommerce hero is a full-bleed photo with a solid card in the bottom left and a row of portrait thumbnails in the bottom right, one for each routine step that is up next. The card holds the heading and the current step's name, product count, description and shop button. It is built with Shadcn UI.
Clicking a thumbnail grows it from its exact position and size until it fills the whole section, with its corners squaring off on the way. The remaining thumbnails slide along to close the gap, and the outgoing photo fades in at the end of the row. A thin line fills across the first thumbnail while the current photo is showing, and that thumbnail opens when the line is full. The line pauses while the pointer or keyboard focus is on the card or the thumbnails.
The heading, steps with their labels, counts, copy, links and images with focus positions, and the autoplay interval are props. With reduced motion the photo changes instantly and the autoplay is switched off.