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.