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.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.