Gradient Carousel

3D card carousel with dynamic gradient background extraction

gradient-carousel-tw

Customize

Tweak the props live

Card Layout

Max Rotation (degrees)28

Max Depth (px)200

Min Scale0.85

Card Gap (px)15

Card Aspect Ratio1

Interaction

Enable Keyboard Navigation

Friction Factor0.95

Wheel Sensitivity0.75

Drag Sensitivity1

Initial Index0

Background & Gradient

Background Blur (px)24

Gradient Size1

Gradient Intensity0.25

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.

imagesstring[]

Array of image URLs to display in the carousel. The component will extract dominant colors from each image to create dynamic gradient backgrounds.

Default:["https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=800&q=80", ...]

classNamestring

Additional CSS classes for the wrapper container. Use this to customize the carousel's appearance.

Default:""

maxRotationDegreesnumber

Maximum rotation angle for cards in degrees. Controls how much cards rotate as they move away from center.

Default:28

maxDepthPxnumber

Maximum depth on the Z-axis in pixels. Controls how far cards move back in 3D space as they move away from center.

Default:140

minScalenumber

Minimum scale factor for cards (0-1). Cards will scale down to this value as they move away from center.

Default:0.92

cardGapnumber

Gap between cards in pixels. Controls the spacing between adjacent cards in the carousel.

Default:28

frictionFactornumber

Velocity decay factor (0-1). Lower values create more friction and slower deceleration. Range: 0.5 to 0.99.

Default:0.9

wheelSensitivitynumber

Mouse wheel sensitivity multiplier. Higher values make wheel scrolling more responsive. Range: 0.1 to 2.0.

Default:0.6

dragSensitivitynumber

Drag sensitivity multiplier. Higher values make dragging more responsive. Range: 0.5 to 2.0.

Default:1.0

backgroundBlurnumber

Blur intensity for background gradient in pixels. Controls how blurred the animated gradient background appears.

Default:24

gradientSizenumber

Size of the gradient (0-1). Controls the radius of the gradient circles. Higher values create larger, more spread out gradients.

Default:0.65

gradientIntensitynumber

Intensity/opacity of the gradient (0-1). Controls how vibrant and visible the gradient colors are. Higher values create more intense colors.

Default:0.7

enableKeyboardboolean

Enable keyboard arrow keys navigation. When enabled, users can navigate the carousel using the left and right arrow keys.

Default:true

onCardChange(index: number) => void

Callback function triggered when the active card changes. Receives the new card index as a parameter.

Default:undefined

cardAspectRationumber

Aspect ratio of cards (width/height). Default is 4/5. Use values like 1 for square, 16/9 for landscape, etc.

Default:0.8 (4/5)

initialIndexnumber

Initial card index to display when the carousel loads. Must be within the range of available images.

Default:0