Perspective Carousel
3D ring carousel that rotates on scroll revealing images in 3D space.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | string[] | [] | Array of image URLs |
| cardCount | number | 5 | Number of cards in the carousel |
| backgroundColor | string | bg-[#050505] | Background color of the component |
| containerHeight | string | h-[400vh] | Height of the container |
| perspective | string | perspective-[1000px] | CSS perspective value |
| cardWidth | string | w-[600px] | Width of each card |
| cardHeight | string | h-[400px] | Height of each card |
| cardBgColor | string | bg-white/5 | Background color of cards |
| cardBorderColor | string | border-white/10 | Border color of cards |
| cardPadding | string | p-4 | Padding of cards |
| imageOpacity | number | 0.8 | Opacity of images |
| labelColor | string | text-white/20 | Color of card labels |
| labelSize | string | text-6xl | Size of card labels |
| translateZ | number | 600 | Z-axis translation distance |
| rotateYRange | [number, number] | [0, 360] | Y rotation range in degrees |
| scrollOffset | [string, string] | ["start start", "end end"] | Scroll offset configuration |
| className | string | Additional CSS classes |
When to Use
Ideal for luxury showcases, product lookbooks, and Next.js applications that require a premium 3D gallery experience. Use this React component when building a carousel that needs to feel like a revolving 3D ring of content.
Best Practices
Maintain consistent spacing within your design system by adjusting the `translateZ` distance to prevent cards from feeling too claustrophobic. Follow React best practices by using the `cardCount` prop to balance visual detail with memory usage. Optimize for performance in large-scale applications by lazy-loading images that are not within the current view angle.
Why This Component Matters
3D ring carousels are a staple of premium modern UI development. This production-ready component provide a robust implementation of complex 3D math and scroll mapping, helping you build a real-world application architecture that is truly world-class.
FAQ
QDoes it support auto-rotation?
The primary experience is scroll-driven for precise user control, but an auto-rotation toggle can be easily integrated using a separate interval hook.
QCan I put videos in the cards?
Yes, the card containers are fully standard React elements and can hold any interactive content, including videos and buttons.
QIs the rotation circular?
Yes, the `rotateYRange` typically goes from 0 to 360 degrees, creating a perfect loop as you scroll through the entire list of cards.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.