Fanned Cards Carousel

A premium card carousel where the active card is centred and prominent, with adjacent cards visible behind it like a hand of playing cards. Built with React + Framer Motion.

When to Use

• Roadmap/timeline phases
• Feature showcases
• Pricing tiers
• Portfolio pieces
• Any content with 3-7 cards that benefit from focused browsing

Architecture

• Active card: Full brightness, cyan border glow (border-[#5CE5D5]/60), scale(1), highest z-index
• Adjacent cards: Dimmed (brightness(0.45)), scale(0.92), peek from behind with configurable overlap
• Navigation: Arrow buttons (left/right), phase dots/badges, swipe (pointer events), click any card
• Animation: Framer Motion spring (stiffness: 300, damping: 30) for satisfying snap

Key Parameters

Implementation

See references/fanned-cards.tsx for the complete component.

Quick Integration

1. Copy the component from references
2. Replace the items array with your data
3. Replace ItemCard with your card component
4. Pass isActive prop to your card for border glow styling

Card Styling

Active card should have:

className={`... ${isActive ? 'border-2 border-[#5CE5D5]/60 shadow-[0_0_40px_rgba(92,229,213,0.12)]' : 'border border-white/5'}`}

Mobile Considerations

• Arrow buttons positioned left-2/right-2 on mobile, left-4/right-4 on desktop
• Cards automatically overlap more on smaller screens due to overflow hidden
• Swipe works via pointer events (no external library needed)

Dependencies

• framer-motion (motion, spring animations)
• react (useState, useRef, useCallback)
• Tailwind CSS v4 (utility classes)