Flex Carousel
A high-performance WebGL horizontal carousel. Integrates aerodynamic bending, kinetic RGB splitting, dynamic shadowing, and smooth SDF corner radiuses calculated entirely on the GPU.
Last Modified:Aug 17, 2026
Install
CLI
flex-carousel
Or install a specific demo variant:
flex-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.36 | Space between cards relative to viewport width. |
scrollSensitivity | number | 0.04 | How heavily the scroll wheel affects movement. |
lerpFactor | number | 0.08 | How buttery smooth the momentum is (0.01 to 1). |
flexMultiplier | number | 0.25 | Aerodynamic bending intensity. |
rotationMultiplier | number | 0.02 | Baseline rotation facing the center. |
parallaxIntensity | number | 0.05 | Internal parallax sliding intensity. |
chromaticAberrationIntensity | number | 0.005 | The intensity of the kinetic RGB color splitting. |
dimmingMultiplier | number | 0.015 | Edge darkening on movement/curvature. |
cornerRadius | number | 0.04 | SDF Corner Radius. |