Gradient Carousel
3D card carousel with dynamic gradient background extraction
Customize
Props
16| Name | Type | Default | Description |
|---|---|---|---|
images | string[] | ["https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=800&q=80", ...] | Array of image URLs to display in the carousel. The component will extract dominant colors from each image to create dynamic gradient backgrounds. |
className | string | "" | Additional CSS classes for the wrapper container. Use this to customize the carousel's appearance. |
maxRotationDegrees | number | 28 | Maximum rotation angle for cards in degrees. Controls how much cards rotate as they move away from center. |
maxDepthPx | number | 140 | Maximum depth on the Z-axis in pixels. Controls how far cards move back in 3D space as they move away from center. |
minScale | number | 0.92 | Minimum scale factor for cards (0-1). Cards will scale down to this value as they move away from center. |
cardGap | number | 28 | Gap between cards in pixels. Controls the spacing between adjacent cards in the carousel. |
frictionFactor | number | 0.9 | Velocity decay factor (0-1). Lower values create more friction and slower deceleration. Range: 0.5 to 0.99. |
wheelSensitivity | number | 0.6 | Mouse wheel sensitivity multiplier. Higher values make wheel scrolling more responsive. Range: 0.1 to 2.0. |
dragSensitivity | number | 1.0 | Drag sensitivity multiplier. Higher values make dragging more responsive. Range: 0.5 to 2.0. |
backgroundBlur | number | 24 | Blur intensity for background gradient in pixels. Controls how blurred the animated gradient background appears. |
gradientSize | number | 0.65 | Size of the gradient (0-1). Controls the radius of the gradient circles. Higher values create larger, more spread out gradients. |
gradientIntensity | number | 0.7 | Intensity/opacity of the gradient (0-1). Controls how vibrant and visible the gradient colors are. Higher values create more intense colors. |
enableKeyboard | boolean | true | Enable keyboard arrow keys navigation. When enabled, users can navigate the carousel using the left and right arrow keys. |
onCardChange | (index: number) => void | undefined | Callback function triggered when the active card changes. Receives the new card index as a parameter. |
cardAspectRatio | number | 0.8 (4/5) | Aspect ratio of cards (width/height). Default is 4/5. Use values like 1 for square, 16/9 for landscape, etc. |
initialIndex | number | 0 | Initial card index to display when the carousel loads. Must be within the range of available images. |
imagesstring[]Array of image URLs to display in the carousel. The component will extract dominant colors from each image to create dynamic gradient backgrounds.
["https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=800&q=80", ...]classNamestringAdditional CSS classes for the wrapper container. Use this to customize the carousel's appearance.
""maxRotationDegreesnumberMaximum rotation angle for cards in degrees. Controls how much cards rotate as they move away from center.
28maxDepthPxnumberMaximum depth on the Z-axis in pixels. Controls how far cards move back in 3D space as they move away from center.
140minScalenumberMinimum scale factor for cards (0-1). Cards will scale down to this value as they move away from center.
0.92cardGapnumberGap between cards in pixels. Controls the spacing between adjacent cards in the carousel.
28frictionFactornumberVelocity decay factor (0-1). Lower values create more friction and slower deceleration. Range: 0.5 to 0.99.
0.9wheelSensitivitynumberMouse wheel sensitivity multiplier. Higher values make wheel scrolling more responsive. Range: 0.1 to 2.0.
0.6dragSensitivitynumberDrag sensitivity multiplier. Higher values make dragging more responsive. Range: 0.5 to 2.0.
1.0backgroundBlurnumberBlur intensity for background gradient in pixels. Controls how blurred the animated gradient background appears.
24gradientSizenumberSize of the gradient (0-1). Controls the radius of the gradient circles. Higher values create larger, more spread out gradients.
0.65gradientIntensitynumberIntensity/opacity of the gradient (0-1). Controls how vibrant and visible the gradient colors are. Higher values create more intense colors.
0.7enableKeyboardbooleanEnable keyboard arrow keys navigation. When enabled, users can navigate the carousel using the left and right arrow keys.
trueonCardChange(index: number) => voidCallback function triggered when the active card changes. Receives the new card index as a parameter.
undefinedcardAspectRationumberAspect ratio of cards (width/height). Default is 4/5. Use values like 1 for square, 16/9 for landscape, etc.
0.8 (4/5)initialIndexnumberInitial card index to display when the carousel loads. Must be within the range of available images.
0