Dimensional Deck
A high-performance WebGL scroll component. Creates an immersive, 3D stacked deck of images that respond fluidly to vertical scroll momentum, utilizing custom GLSL shaders for kinetic RGB splitting and aerodynamic bending.
Last Modified:Aug 17, 2026
Install
CLI
dimensional-deck
Or install a specific demo variant:
dimensional-deck-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 | Vertical spacing distance between active cards. |
stackGapMultiplier | number | 0.1 | How tightly the cards stack on top of each other at the friction point. |
depthMultiplier | number | 0.8 | How deeply the cards push into the background Z-axis. |
flexMultiplier | number | 0.15 | Aerodynamic paper bend physics when scrolling fast. |
rotationMultiplier | number | 0.08 | The tilt angle when resting in the stack. |
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). |
parallaxIntensity | number | 0.1 | Intensity of the internal texture slide. |
chromaticAberrationIntensity | number | 0.005 | Intensity of the kinetic 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). |