Cover Carousel
A highly sophisticated Cover Flow 3D carousel. Renders an immersive, hardware-accelerated stack of images using custom GLSL shaders for dynamic ambient occlusion, internal parallax, and SDF rounded corners.
Last Modified:Aug 17, 2026
Install
CLI
cover-carousel
Or install a specific demo variant:
cover-carousel-demo
Manual
1. Install Dependencies
Dependencies
2. Add Source Code
Props
| Prop | Type | Default | Description |
|---|---|---|---|
images | string[] | Required | Array of image URLs to load into the deck. |
cardWidthRatio | number | 0.35 | Percentage of screen width the card occupies on desktop. |
cardAspectRatio | number | 1.4 | Width-to-height ratio of the cards. |
scrollSensitivity | number | 0.003 | How heavily the scroll wheel affects movement. |
lerpFactor | number | 0.06 | How buttery smooth the momentum is (0.01 to 1). |
parallaxIntensity | number | 0.08 | How much the image slides internally. |
activeGapMultiplier | number | 0.55 | The gap between the center card and the adjacent cards. |
stackGapMultiplier | number | 0.15 | The gap between background overlapping cards. |
maxZOffsetMultiplier | number | 0.4 | Pushes the background cards deep into the Z-axis. |
rotationMultiplier | number | 0.8 | The maximum Y-rotation of the cards as they slide away. |
scaleMultiplier | number | 0.15 | How much background cards scale down. |
dimmingFactor | number | 0.85 | How much background cards darken (0.0 to 1.0). |
cornerRadius | number | 0.04 | SDF corner radius (0.0 to 0.5). |
shadowOpacity | number | 0.6 | Opacity of the grounded shadow. |