Circular Gallery
A 3-D ring gallery with mouse-driven card flip, parallax tilt, and smooth morphing into a lightbox.
Installation
$ npx shadcn@latest add https://akshitr.com/r/circular-gallery.json
Usage
import CircularGallery from "@/components/circular-gallery";
const ITEMS = [
{ title: "Naruto Uzumaki", src: "https://images.unsplash.com/..." },
{ title: "Demon Slayer", src: "https://images.unsplash.com/..." },
];
export default function Demo() {
return <CircularGallery items={ITEMS} />;
}Component API
CircularGallery
| Prop | Type | Default | Description |
|---|---|---|---|
| items | GalleryItem[] | — | Array of items to render on the ring. Works best with 10–20. |
| radius? | number | 260 | Ring radius in pixels at full scale. |
| cardWidth? | number | 40 | Width of each ring card in pixels. |
| cardHeight? | number | 56 | Height of each ring card in pixels. |
| className? | string | — | Additional classes applied to the root div. |
| children? | React.ReactNode | — | Content rendered inside the gallery ring. |
GalleryItem
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Label shown in the lightbox below the image. |
| src | string | — | Image URL rendered on the card face. |
Interactions
| Trigger | Behaviour |
|---|---|
| Hover card | Card flips toward the cursor and pushes outward from center. |
| Click card | Card morphs into a centered lightbox. |
Click overlay / Escape | Lightbox closes, card morphs back to its position on the ring. |
ArrowLeft / ArrowRight | Navigates to the previous / next item while the lightbox is open. |
| Mouse movement | Entire ring tilts with a subtle 3-D parallax effect. |
Use Cases
- Interactive Brand Showcases: Display client logos, partner badges, or case study snapshots surrounding a centerpiece headline.
- Creative Media Rings: Let visitors browse music albums, design tokens, or photographic prints in a 360-degree interactive circle.
- Hero Centerpieces: Create an immediate high-impact visual anchor in agency or design-studio landing pages.
- Interactive Lightbox Galleries: Provide an engaging card-to-modal transition without standard boring grid thumbnails.
