Carousel Ring Gallery
Twenty-five cards arranged on a ring, each rotated to face outward from the center. Moving the pointer tilts the whole ring on two axes, and any card within range flips a half turn, scales up, and pushes outward along its own radius, with the amount falling off by distance so the effect reads as a wave. Clicking a card rotates the ring so that card reaches the bottom, then scales the ring five times and drives it down past the frame, leaving the picture filling the view.
npx shadcn@latest add https://ui.aryank.space/r/carousel-ring-gallery.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| collection | RingGalleryItem[] | 20 BLANK stills | Image and title per card. Cards cycle through the collection if imageCount exceeds its length. |
| imageCount / radius | number | 25 / 275 | Cards on the ring and the ring's radius in pixels. |
collectiontextCard images and the title shown when opened.
imageCount / radiustextHow many cards sit on the ring and how wide it is.
gsap