shadcn.io is not affiliated with official shadcn/ui
Coverflow Gallery Block for React Aria
Eight drawn album sleeves in a framed stage with the middle one full size and square and its neighbours turned away and dimmed, moved by buttons, arrow keys or a click, with the title band that closes the frame.
Installation
Overview
A coverflow for React with React Aria, for Saltgrass Records, an indie label. Eight album sleeves stand in a framed stage with + marks on its corners: the sleeve in the middle full size and square, its neighbours turned away, smaller and dimmed, the rest tucked out of sight, all moved by CSS transforms over one chosen index. Previous and Next buttons, the arrow keys (Home and End too) and a click on a neighbour bring another sleeve to the middle. The band that closes the frame says its title, artist, length and "3 of 8". With reduced motion the sleeves stay flat and jump. The sleeves are drawn in CSS, not photographed: a type poster, stripes, a halftone sun, a weave, rings, blocks, waves and a check, in your theme's greys. It's built from Button and Guides, with CSS transforms and your theme's tokens for every colour. The label, the artists and the records are made up for the example.
FAQ
How do I use my own artwork?
Each album in ALBUMS has a title, an artist, a track count, a length and a kind of sleeve. Replace Sleeve in the button with <img alt="" className="size-full object-cover" src={…} /> and keep the button's label, which is the title and artist. Sleeves are square; the stage's size comes from --s.
How are the sleeves placed?
Every sleeve sits --o places from the middle. A transform pushes it out by that many steps, turns it by 55° away from the middle (the sign of --o) and shrinks it by a fifth, and its z-index falls with the distance. Sleeves more than two places out are hidden. Moving the index changes the numbers, and a CSS transition does the rest. The stage has perspective, so a turned sleeve is foreshortened.
How does it work with a keyboard?
The sleeve in the middle is the only one in the tab order. The left and right arrow keys step (and wrap), Home and End jump to the first and last, and focus follows to the new middle sleeve. The Previous and Next buttons take the same keys, and a click on a neighbour brings it forward. The title band is a polite live region.
Why does it not mirror in a right-to-left page?
The stage is a picture of a shelf, so it stays left to right and the right arrow always moves toward the sleeves on its right. The buttons' chevrons mirror with the page and the text under the stage follows the page direction.