Click Stack
Click-to-cycle animated card stack
click-stack-tw
Customize
Stack Layout
250
300
20
-20
5
Card Appearance
24
30
0.3
1
Animation & 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) |