shadcn.io is not affiliated with official shadcn/ui
3D Prism Carousel Gallery Block for React
One 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.
Installation
Overview
A prism carousel for React with Base UI, for Rushwell Seating, a chair maker. One chair is drawn from four sides (front, side, back and top) on the four faces of a block that turns a quarter at a time with CSS 3D transforms, standing in a framed figure with a floor line and a soft shadow under it. A View control (Front, Side, Back, Top) turns the block to a face, and the arrow keys step through the faces because focus moving along the control picks the face. Only the face turned toward you is in the reading order and the tab order. With reduced motion the block stays flat and the faces cross-fade. On a phone the block sits above the control. The chair is drawn, not photographed: a small kit of views on a plinth in your theme's greys. It's built from Toggle Group and Guides, with CSS transforms and your theme's tokens for every colour. The maker and the chair are made up for the example.
FAQ
How do I use my own photographs?
Each face in VIEWS has a label, a description and a scene. Replace the Scene on a face with <img alt="" className="size-full object-cover" src={…} /> and keep the face's aria-label, which is the description. Photograph the product from the four sides at 4 wide for 5 high, or change RATIO and the aspect-4/5 class together.
How does the prism turn?
The block's width is one variable, --w. Each face is turned a quarter more than the last and pushed out half a width, and the block as a whole is turned back by the chosen face and pulled in half a width, so the face in view lies flat in front. The block's transform-style is preserve-3d, the faces hide their backs, and a CSS transition on the block's transform does the turn.
How does it work with a keyboard?
Tab reaches the View control; the arrow keys move along Front, Side, Back and Top and turn the block as focus arrives, because choosing follows focus. Space or Enter picks the one with focus. The face description under the figure is a polite live region. The arrow keys follow the page direction, so the order reverses in a right-to-left page.
What happens with reduced motion?
The block does not turn. The four faces sit in the same place and cross-fade, so the control still works and nothing sweeps across the screen.
Related
- Pro
Coverflow Gallery
Carousels and slidesEight 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.
- 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
Product Showcase Gallery
Stage and thumbnailsA product viewer for a running shoe: a vertical rail of four angles beside a 4:3 stage, three finishes that recolour every picture, and price, sizes and stock with an Add to bag button.
- Pro
Spotlight Ring Gallery
Carousels and slidesA watch reseller's gallery: eight round dials stand in a ring around one large dial, and choosing a dial, by pointer or with the arrow keys that turn round the ring, brings it to the centre.
- Pro
3D Ring Carousel Features
Carousels and mediaSix capability cards on a true 3D ring in a framed stage, turned a card at a time by the previous and next buttons or the arrow keys, with the far cards dimming behind the front one.
- 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.