shadcn.io is not affiliated with official shadcn/ui
3D Prism Carousel Gallery Block for Vue
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 Vue with Ark 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 Ark toggle group's arrow keys always move in the order Front, Side, Back, Top, whatever the page direction.
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.