Curved Carousel
A high-performance WebGL scroll component. Creates an immersive, 3D cylindrical carousel of images that respond fluidly to scroll momentum anywhere on the container, utilizing custom GLSL shaders for kinetic RGB splitting, parallax texture sliding, and aerodynamic bending.
Last Modified:Aug 17, 2026
Install
CLI
curved-carousel
Or install a specific demo variant:
curved-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.005 | How heavily the scroll wheel affects movement. |
lerpFactor | number | 0.08 | How buttery smooth the momentum is. |
radiusMultiplier | number | 1.2 | The radius multiplier of the 3D cylinder. |
centrifugalMultiplier | number | 0.4 | How much the cards bend physically when spinning fast. |
parallaxIntensity | number | 0.1 | Intensity of the internal texture slide (Parallax). |
chromaticAberrationIntensity | number | 0.004 | Intensity of the color split on scroll. |
cornerRadius | number | 0.04 | SDF corner radius (0.0 to 0.5). |
fadeMultiplier | number | 1.5 | How aggressively the cards fade as they move to the back. |
dimmingMultiplier | number | 0.8 | How much the cards darken as they move to the back. |