Animations & Motion
Card Deck Fan
Physics-based card stack that fans out and stacks on scroll.
scrollrevealcardsfanphysics
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
images | string[] | [] | Array of image URLs |
cardCount | number | 5 | Number of cards |
backgroundColor | string | bg-slate-900 | Background color of the component |
containerHeight | string | h-[150vh] | Height of the container |
perspective | string | perspective-[1000px] | CSS perspective value |
cardWidth | string | w-64 | Width of each card |
cardHeight | string | h-96 | Height of each card |
cardBgColor | string | bg-white | Background color of cards |
cardBorderColor | string | border-white/20 | Border color of cards |
cardPadding | string | p-2 | Padding of cards |
imageOpacity | number | 0.8 | Opacity of images |
labelColor | string | text-white | Color of card labels |
labelSize | string | text-xs | Size of card labels |
hintText | string | SCROLL TO STACK | Hint text displayed |
hintColor | string | text-white | Color of hint text |
hintSize | string | text-sm | Size of hint text |
fanAngle | number | 15 | Fan angle in degrees |
fanXOffset | number | 100 | X offset for fan effect |
scrollOffset | [string, string] | ["start end", "center center"] | Scroll offset configuration |
className | string | Additional CSS classes |