Product List 31 block design & features
A row of tall skincare product slats under a "This Week's Favorites" heading with previous and next buttons. The active slat opens into a card with the product photo on the left and its category, name, price, description and an Add to Cart button on the right, while the other four products stay visible as image strips wide enough to read each photo.
Selecting a strip, pressing the arrow keys or using the buttons moves the active slat. Its flex grow animates on a spring, and the product copy staggers in only after the slat has finished widening. Autoplay advances every few seconds and a thin line under the active slat fills to show the time left; it pauses on hover or keyboard focus. Products are plain data with an image, copy and price, and the layout is built with shadcn/ui buttons and Motion.
On mobile the slats stay in one row with the active photo widened and the product details shown beneath it. With reduced motion the slats snap open, autoplay is turned off and the copy fades in place.