Ecommerce Hero 10 block design & features
This ecommerce hero is a full-bleed photo with an oversized typographic index on top. Four routine steps, Cleanse, Treat, Hydrate and Protect, are set in very large type, each on its own solid block like a printed label. A small rounded heading sits at the top, and a solid card in the opposite corner shows the product count, a short description and a shop button for the current step. It is built with Shadcn UI.
Hovering or focusing a step crossfades the background to that step's photo, darkens its word and shows an arrow beside it, while the other words fall back to a muted tone. The current photo drifts in a very slow horizontal pan. When the pointer is elsewhere the steps advance on their own, and the autoplay pauses while the pointer or keyboard focus is in the list.
The result is editorial and type-led, with warm skincare photography and no overlays, since every word sits on its own solid background. The heading, steps with their labels, counts, copy, links and images with focus positions, and the autoplay interval are props. With reduced motion the autoplay and the pan are switched off and the steps still change on hover and focus.