Dimensional Carousel
A high-performance WebGL horizontal carousel. Cards arriving from the right are flat, while cards passing the center seamlessly stack into a 3D Cover Flow layout. Features custom GLSL shaders for aerodynamic bending and kinetic RGB splitting based on swipe velocity.
Last Modified:Aug 17, 2026
Install
CLI
dimensional-carousel
Or install a specific demo variant:
dimensional-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 carousel. |
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.8 | Space between incoming flat cards. |
scrollSensitivity | number | 0.04 | How heavily the scroll wheel/drag affects movement. |
lerpFactor | number | 0.08 | How buttery smooth the momentum is (0.01 to 1). |
stackGapMultiplier | number | 0.1 | Distance between cards when stacked on the left. |
depthMultiplier | number | 0.8 | How deep into the Z-axis cards are pushed when stacked. |
rotationMultiplier | number | 0.08 | How much cards tilt horizontally as they stack. |
flexMultiplier | number | 0.12 | How aggressively the cards bow physically when swiping fast. |
parallaxIntensity | number | 0.1 | Intensity of the internal texture slide. |
chromaticAberrationIntensity | number | 0.005 | Intensity of the color split on scroll. |
dimmingMultiplier | number | 0.6 | How much the cards darken as they move to the back. |
cornerRadius | number | 0.04 | SDF corner radius (0.0 to 0.5). |