Wensity

Fan Hover Card Stack

Pro

Hover a stacked profile deck and watch the cards fan outward in sequence while the active one lifts to the front.

carouselcss 3d3dcardsfanhoverstackgallery
Fan Hover Card Stack component preview

Overview

Fan Hover Card Stack is a React and Tailwind CSS profile card stack for team pages and testimonials, in Next.js or any React app, animated with Framer Motion. The collapsed deck fans outward on a soft spring when hovered or focused, and the active card lifts to the front without changing its tint or tilt. Arrow keys move the active card through the list, onActiveChange reports it, and spread and lift set the size of the fan. Reduced motion swaps poses almost instantly. defaultActiveIndex decides which card sits in front while the deck is collapsed.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add fan-hover-card-stack

Usage

Import FanHoverCardStack from @/components/wensity/fan-hover-card-stack and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import {
  FanHoverCardStack,
  type FanStackCard,
} from "@/components/wensity/fan-hover-card-stack";


const items: FanStackCard[] = [
  {
    id: "parth",
    name: "Parth",
    age: 21,
    role: "Founder of Wensity",
    description:
      "We use this system to ship polished interfaces faster.",
    image: "https://assets.wensity.com/avatars/1.webp",
  },
  {
    id: "maya",
    name: "Maya Chen",
    age: 29,
    role: "Product lead",
    description:
      "The template gave us a credible launch surface in one sprint.",
    image: "https://assets.wensity.com/avatars/3.webp",
  },
];


export default function Example() {
  return (
    <FanHoverCardStack
      items={items}
      defaultActiveIndex={1}
      spread={168}
      lift={34}
    />
  );
}

Props

PropTypeDefaultDescription
itemsFanStackCard[]-Profile cards rendered in the stack.
defaultActiveIndexnumber2Card that sits in front when the deck is collapsed.
spreadnumber168Horizontal fan distance in pixels when expanded.
liftnumber34Vertical lift for the active expanded card in pixels.
onActiveChange(item: FanStackCard, index: number) => void-Fires when the active card changes.

Featured in React 3D components and React carousel components.