Depth Carousel
A high-performance WebGL coverflow carousel. Unites physics-based GSAP scroll tracking with custom GLSL shaders to provide flawless SDF corner rounding, internal parallax windowing, and kinetic RGB splitting.
Last Modified:Aug 17, 2026
Install
CLI
depth-carousel
Or install a specific demo variant:
depth-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. |
gapMultiplier | number | 0.7 | Base multiplier for the curved background spread. |
activeGapMultiplier | number | 0.25 | The exact buffer pushed around the active center card. |
scrollSensitivity | number | 0.003 | How heavily the scroll wheel affects movement. |
lerpFactor | number | 0.06 | How buttery smooth the momentum is. |
depthMultiplier | number | 0.25 | How deeply background cards push into the Z-axis. |
scaleMultiplier | number | 0.15 | How much background cards scale down. |
rotationMultiplier | number | 0.1 | The subtle inward tilt of background cards. |
parallaxIntensity | number | 0.08 | Internal image sliding effect. |
dimmingMultiplier | number | 0.85 | How much background cards darken. |
chromaticAberrationIntensity | number | 0.01 | Kinetic RGB split on scroll. |
cornerRadius | number | 0.03 | SDF corner radius value. |
shadowOpacity | number | 0.6 | Intensity of the grounded contact shadow. |