Coverflow 2 block design & features
Coverflow2 is the looping version of the classic album cover flow, built with shadcn/ui. A centered heading and short description sit above a row of square album covers. The active cover faces forward while the covers on either side turn away in perspective and stack tightly toward the edges, each standing on a faded mirror reflection. The album title and artist sit underneath beside outline arrow buttons and a position counter.
There is no first or last cover. Moving past either end wraps straight round, and covers re-enter from the far side out of view, so the row always looks full and balanced. Transforms ease with a long, soft curve so covers swing into place rather than snapping.
The look is nostalgic and tactile, a nod to early desktop media players. Navigation works by dragging or swiping the row, pressing the arrow keys while it is focused, clicking any visible cover, or using the arrow buttons. It needs square cover images with a title and artist for each, and works best with ten or more.
On small screens the covers shrink and the side spacing tightens.
The loop also plays on its own, stepping forward every few seconds. It pauses while the pointer is over the covers, during a drag, or while the row has keyboard focus, and it stays off for visitors who prefer reduced motion. The interval is a prop.