Card Carousel Effects

"use client";

// Fan spread: images qui s'ecartent au hover
<div className="flex -space-x-[16px] group-hover:-space-x-[24px] transition-all duration-300">
  {images.map((img, i) => <div key={i} className="w-9 h-12 rounded-lg" />)}
</div>

// Stack shift: images empilees qui se decalent
<div className="relative">
  {images.map((img, i) => (
    <div key={i} className={`absolute inset-0 transition-all duration-300 ${hoverClasses[i]}`} />
  ))}
</div>

// 3D Fade: perspective + rotateX/Y au mousemove + crossfade
const rotateY = ((x - centerX) / centerX) * 12;
const rotateX = ((centerY - y) / centerY) * 12;
<div style={{ transform: `perspective(800px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)` }} />
<div className="z-10 group-hover:opacity-0 transition-opacity duration-500" />

// Colorize: crossfade entre 2 elements
<div className="z-12 group-hover:opacity-0 transition-all duration-300" />
<div className="z-13 opacity-0 group-hover:opacity-100 transition-all duration-300" />

// Camera pan: scroll horizontal au hover
<div className="flex transition-all duration-300 group-hover:-translate-x-[60px]">
  {images.map((img, i) => <div key={i} className="w-16 h-16 rounded-lg shrink-0" />)}
</div>