Gradient Carousel
gradient-carousel-tw
Customize
28
200
0.85
15
0.95
0.75
1
24
1
0.25
1
0
Props
| 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. |