shadcn.io is not affiliated with official shadcn/ui
Coverflow Gallery Block for React
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 Base UI, 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.
Related
- Pro
3D Prism Carousel Gallery
Carousels and slidesOne stacking chair drawn from four sides on the faces of a block that turns a quarter at a time in CSS 3D, with a View control for front, side, back and top, flat under reduced motion.
- Pro
Carousel Gallery
Carousels and slidesNine drawn trail pictures in a ruled band for a trail-guide app, three wide with the next one cut off at the rail, turned with buttons, dots and the arrow keys, under a heading row with a live counter.
- Pro
Card Stack Gallery
Walls and tablesA pile of five drawn risograph prints on a framed table top: send the top one to the back, or spread the pile into a row and gather it again, with a list that says the order.
- Pro
Instant Print Gallery
Walls and tablesSix drawn instant prints lying a degree off square on a faint table band, each faded and blurred until you hover, focus or tap it, with a button that develops the whole tray one print after another.
- Pro
Printed Photo Album Gallery
Walls and tablesAn open photo album on a tinted table that opens on its cover and turns like leaves onto four spreads of drawn pictures in corner mounts, with Previous and Next, a spread counter and arrow keys.
- Pro
Card Carousel Features
Carousels and mediaA multi-up carousel of seven capability cards for a product-tour builder, each led by a greyscale drawing, with the next card cut off at the rail and previous and next buttons in the heading row.