Card Deck Fan
Physics-based card stack that fans out and stacks on scroll.
Main Features of Card Deck Fan
How to Use Card Deck Fan in Next.js
Installation Guide for Card Deck Fan
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 |
Related Components
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 in Modern UI Development
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.
Frequently Asked Questions
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.