Perspective Carousel
3D ring carousel that rotates on scroll revealing images in 3D space.
Main Features of Perspective Carousel
How to Use Perspective Carousel in Next.js
Installation Guide for Perspective Carousel
Props
Customize the component with these 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 |
Related Components
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 in Modern UI Development
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.
Frequently Asked Questions
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.