Click Stack
Click-to-cycle animated card stack
click-stack-tw
Customize
Card Width
250
Card Height
300
Spread X
20
Spread Y
-20
Visible Count
5
Border Radius
24
Shadow Blur
30
Shadow Opacity
0.30
Opacity
1.00
Card Color
Duration
0.35
Depth Scale
0.08
Depth Opacity
0.00
Props
17| 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