Elastic Carousel
A high-performance WebGL scroll component. Mathematically interpolates between a flat 2D gallery and an immersive 3D cylindrical carousel depending entirely on the user's swipe velocity.
Last Modified:Aug 17, 2026
Install
CLI
elastic-carousel
Or install a specific demo variant:
elastic-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 | 1.2 | Distance between cards in the 3D space. |
radiusMultiplier | number | 1.2 | Controls the final cylinder size when fully bent. |
scrollSensitivity | number | 0.005 | How heavily the scroll wheel/drag affects movement. |
lerpFactor | number | 0.08 | How buttery smooth the momentum is (0.01 to 1). |
flexMultiplier | number | 0.5 | How aggressively the flat gallery bends into a 3D cylinder. |
parallaxIntensity | number | 0.08 | Intensity of the internal texture slide. |
chromaticAberrationIntensity | number | 0.003 | Intensity of the color split on scroll. |
dimmingMultiplier | number | 0.4 | How much the cards darken as they move to the back. |
cornerRadius | number | 0.04 | SDF corner radius (0.0 to 0.5). |