Loading component…
Components /Circular Gallery
Relaxing 3D ring of images with drag-spin, parallax tilt, and center preview
Interactive preview paused
This Circular Gallery demo uses intensive graphics. Start it when you are ready to interact.
Run the following command
npx shadcn@latest add https://raw.githubusercontent.com/Ashutoshx7/VengeanceUI/main/public/r/circular-gallery.json| Prop Name | Type | Default | Description |
|---|---|---|---|
| images | string[] | - | Image URLs, cycled around the ring. Omit for neutral placeholder cards. |
| count | number | 150 | Number of cards in the ring. |
| tilt | number | 55 | Base tilt of the ring in degrees (rotateX). |
| radius | number | 400 | Ring radius in px (card distance from centre). |
| itemWidth | number | 45 | Card width in px. |
| itemHeight | number | 60 | Card height in px. |
| autoRotate | boolean | true | Slowly spin the ring on its own. |
| autoRotateSpeed | number | 3 | Auto-rotation speed in degrees per second. |
| showPreview | boolean | true | Show the large centre preview that follows the hovered card. |
| parallax | boolean | true | Parallax the ring's tilt toward the cursor. |
| className | string | - | Additional classes for the root element. |