Circular Gallery – Akshit Rana

A 3-D ring gallery with mouse-driven card flip, parallax tilt, and smooth morphing into a lightbox.

Projects that redefine what's possible.

Click an image to explore

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.