Coverflow 31 block design & features
Coverflow31 is an editorial shadcn/ui cover flow arranged as a staircase. The selected photo sits in the middle of a tall stage at full size, earlier photos climb toward the top left and later photos descend toward the bottom right, each one smaller and fainter than the last. The heading and description fill the empty corner at the top right, and the current product name, detail and price, round previous and next buttons and a mono counter sit in the empty corner at the bottom left. On small screens the heading moves above the stair and the title below it.
The whole strip glides between steps on a spring, so moving several steps reads as one continuous slide along the diagonal. The title swaps with a short blur and fade as each photo arrives. The stair loops, so the last piece leads straight back to the first, with the photo that wraps round fading out at the far end of the stair and back in at the other. The wheel or trackpad moves one step per gesture while the pointer is over the stair, and dragging in any direction is projected onto the diagonal and snaps to the nearest step on release. Clicking a photo takes the short way round to it, and the buttons and arrow keys work too.
The tone is calm and spacious, with plenty of white space and small mono details. It suits homeware shops, makers and gift stores presenting a small, curated range. It needs a photo, name, short detail and price for each piece.