Click Stack
Click-to-cycle animated card stack
click-stack-tw
Customize
Tweak the props liveStack Layout
250
300
20
-20
5
Card Appearance
24
30
0.3
1
#ffffffAnimation & Depth
0.35
0.08
0
Props
| Name | Type | Default | Description |
|---|---|---|---|
items | ReactNode[] | built-in cards | Renderable content for each card — images, text, JSX, or any React node |
cardWidth | number | 250 | Width of each card in pixels |
cardHeight | number | 300 | Height of each card in pixels |
spreadX | number | 20 | Horizontal offset between stacked depth levels |
spreadY | number | -20 | Vertical offset between stacked depth levels |
duration | number | 0.35 | Transition duration in seconds (0.1–2.0) |
ease | string | "power3.out" | GSAP easing string for card repositioning |
borderRadius | number | 24 | Card corner radius in pixels (0–50) |
shadowBlur | number | 30 | Card shadow blur radius (0–100) |
shadowOpacity | number | 0.3 | Card shadow opacity (0–1) |
cardColor | string | "#ffffff" | Fallback background color for card surfaces |
visibleCount | number | 5 | Maximum number of cards shown in the stack (1–10) |
depthScale | number | 0.08 | Scale reduction per depth level (0–0.3) |
depthOpacity | number | 0 | Opacity reduction per depth level (0–1) |
className | string | "" | CSS class for the outer container |
cardClassName | string | "" | CSS class applied to each card wrapper |
opacity | number | 1 | Overall container opacity (0–1) |
itemsReactNode[]Renderable content for each card — images, text, JSX, or any React node
Default:
built-in cardscardWidthnumberWidth of each card in pixels
Default:
250cardHeightnumberHeight of each card in pixels
Default:
300spreadXnumberHorizontal offset between stacked depth levels
Default:
20spreadYnumberVertical offset between stacked depth levels
Default:
-20durationnumberTransition duration in seconds (0.1–2.0)
Default:
0.35easestringGSAP easing string for card repositioning
Default:
"power3.out"borderRadiusnumberCard corner radius in pixels (0–50)
Default:
24shadowBlurnumberCard shadow blur radius (0–100)
Default:
30shadowOpacitynumberCard shadow opacity (0–1)
Default:
0.3cardColorstringFallback background color for card surfaces
Default:
"#ffffff"visibleCountnumberMaximum number of cards shown in the stack (1–10)
Default:
5depthScalenumberScale reduction per depth level (0–0.3)
Default:
0.08depthOpacitynumberOpacity reduction per depth level (0–1)
Default:
0classNamestringCSS class for the outer container
Default:
""cardClassNamestringCSS class applied to each card wrapper
Default:
""opacitynumberOverall container opacity (0–1)
Default:
1