Animations & Motion
Perspective Carousel
3D ring carousel that rotates on scroll revealing images in 3D space.
scrollrevealcarousel3dperspective
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 |