Card Deck Fan
Physics-based card stack that fans out and stacks on scroll.
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 |
When to Use
Ideal for creative portfolios, e-commerce product stacks, and enterprise-ready UIs that need a playful yet organized way to display cards. Use this React component when building 'Our Team' sections or testimonial carousels that require a physical, tactile feel.
Best Practices
Maintain scalable component architecture by using the `fanAngle` prop to ensure cards don't overlap too much or too little. Follow React best practices by providing unique keys for each card in the stack. Optimize for performance by using a reasonable `cardCount` (e.g., 5-8).
Why This Component Matters
Physics-based motion is a hallmark of modern frontend development. This production-ready component helps you build an interface that users instinctively want to interact with, adding a layer of polish to your real-world application architecture.
FAQ
QCan I drag the cards manually?
The primary interaction is scroll-based for a consistent narrative, but it can be combined with drag gestures for a more hands-on experience.
QHow do I add more cards?
Simply pass a longer array of image URLs and update the `cardCount` prop to match.
QIs the stacking animation smooth on mobile?
Yes, it uses Framer Motion's hardware-accelerated transforms to ensure 60fps performance on most mobile devices.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.