PRO

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.

Component

Experiment 454

Made by BLANK

Install
npx shadcn@latest add https://ui.aryank.space/r/carousel-ring-gallery.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
collectionRingGalleryItem[]20 BLANK stillsImage and title per card. Cards cycle through the collection if imageCount exceeds its length.
imageCount / radiusnumber25 / 275Cards on the ring and the ring's radius in pixels.
Customize
collectiontext

Card images and the title shown when opened.

imageCount / radiustext

How many cards sit on the ring and how wide it is.

Dependencies
gsap