Card Swap

"use client";import gsap from "gsap";import type {  CSSProperties,  MouseEvent as ReactMouseEvent,  ReactElement,  ReactNode,  Ref,} from "react";import React, {  Children,  cloneElement,  forwardRef,  isValidElement,  useEffect,  useMemo,  useRef,} from "react";import { cn } from "@/lib/utils";export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {  customClass?: string;}export const Card = forwardRef<HTMLDivElement, CardProps>(  ({ customClass, className, ...rest }, ref) => (    <div      ref={ref}      {...rest}      className={cn(        "absolute top-1/2 left-1/2 rounded-xl border border-white bg-black [backface-visibility:hidden] [transform-style:preserve-3d] [will-change:transform]",        customClass,        className,      )}    />  ),);Card.displayName = "Card";type Slot = { x: number; y: number; z: number; zIndex: number };const makeSlot = (  i: number,  distX: number,  distY: number,  total: number,): Slot => ({  x: i * distX,  y: -i * distY,  z: -i * distX * 1.5,  zIndex: total - i,});const placeNow = (el: HTMLElement, slot: Slot, skew: number) =>  gsap.set(el, {    x: slot.x,    y: slot.y,    z: slot.z,    xPercent: -50,    yPercent: -50,    skewY: skew,    transformOrigin: "center center",    zIndex: slot.zIndex,    force3D: true,  });export interface CardSwapProps {  width?: number | string;  height?: number | string;  cardDistance?: number;  verticalDistance?: number;  delay?: number;  pauseOnHover?: boolean;  onCardClick?: (idx: number) => void;  skewAmount?: number;  easing?: "linear" | "elastic";  children: ReactNode;}type CardElementProps = {  style?: CSSProperties;  onClick?: (e: ReactMouseEvent<HTMLDivElement>) => void;  ref?: Ref<HTMLDivElement>;};export function CardSwap({  width = 500,  height = 400,  cardDistance = 60,  verticalDistance = 70,  delay = 5000,  pauseOnHover = false,  onCardClick,  skewAmount = 6,  easing = "elastic",  children,}: CardSwapProps) {  const config =    easing === "elastic"      ? {          ease: "elastic.out(0.6,0.9)",          durDrop: 2,          durMove: 2,          durReturn: 2,          promoteOverlap: 0.9,          returnDelay: 0.05,        }      : {          ease: "power1.inOut",          durDrop: 0.8,          durMove: 0.8,          durReturn: 0.8,          promoteOverlap: 0.45,          returnDelay: 0.2,        };  const childArr = useMemo(() => Children.toArray(children), [children]);  const refs = useMemo(    () => childArr.map(() => React.createRef<HTMLDivElement>()),    // eslint-disable-next-line react-hooks/exhaustive-deps    [childArr.length],  );  const order = useRef(Array.from({ length: childArr.length }, (_, i) => i));  const tlRef = useRef<ReturnType<typeof gsap.timeline> | null>(null);  const intervalRef = useRef<number | undefined>(undefined);  const container = useRef<HTMLDivElement>(null);  useEffect(() => {    const total = refs.length;    refs.forEach((r, i) => {      if (r.current) {        placeNow(          r.current,          makeSlot(i, cardDistance, verticalDistance, total),          skewAmount,        );      }    });    const swap = () => {      if (order.current.length < 2) return;      const [front, ...rest] = order.current;      const elFront = refs[front].current;      if (!elFront) return;      const tl = gsap.timeline();      tlRef.current = tl;      tl.to(elFront, {        y: "+=500",        duration: config.durDrop,        ease: config.ease,      });      tl.addLabel("promote", `-=${config.durDrop * config.promoteOverlap}`);      rest.forEach((idx, i) => {        const el = refs[idx].current;        if (!el) return;        const slot = makeSlot(i, cardDistance, verticalDistance, refs.length);        tl.set(el, { zIndex: slot.zIndex }, "promote");        tl.to(          el,          {            x: slot.x,            y: slot.y,            z: slot.z,            duration: config.durMove,            ease: config.ease,          },          `promote+=${i * 0.15}`,        );      });      const backSlot = makeSlot(        refs.length - 1,        cardDistance,        verticalDistance,        refs.length,      );      tl.addLabel("return", `promote+=${config.durMove * config.returnDelay}`);      tl.call(        () => {          gsap.set(elFront, { zIndex: backSlot.zIndex });        },        undefined,        "return",      );      tl.to(        elFront,        {          x: backSlot.x,          y: backSlot.y,          z: backSlot.z,          duration: config.durReturn,          ease: config.ease,        },        "return",      );      tl.call(() => {        order.current = [...rest, front];      });    };    swap();    intervalRef.current = window.setInterval(swap, delay);    if (pauseOnHover) {      const node = container.current;      if (node) {        const pause = () => {          tlRef.current?.pause();          if (intervalRef.current) clearInterval(intervalRef.current);        };        const resume = () => {          tlRef.current?.play();          intervalRef.current = window.setInterval(swap, delay);        };        node.addEventListener("mouseenter", pause);        node.addEventListener("mouseleave", resume);        return () => {          node.removeEventListener("mouseenter", pause);          node.removeEventListener("mouseleave", resume);          if (intervalRef.current) clearInterval(intervalRef.current);        };      }    }    return () => {      if (intervalRef.current) clearInterval(intervalRef.current);    };    // eslint-disable-next-line react-hooks/exhaustive-deps  }, [cardDistance, verticalDistance, delay, pauseOnHover, skewAmount, easing]);  const rendered = childArr.map((child, i) => {    if (!isValidElement(child)) return child;    const el = child as ReactElement<CardElementProps>;    return cloneElement(el, {      key: i,      ref: refs[i],      style: { width, height, ...(el.props.style ?? {}) },      onClick: (e: ReactMouseEvent<HTMLDivElement>) => {        el.props.onClick?.(e);        onCardClick?.(i);      },    });  });  return (    <div      ref={container}      className="absolute right-0 bottom-0 origin-bottom-right translate-x-[5%] translate-y-[20%] overflow-visible max-[768px]:translate-x-[25%] max-[768px]:translate-y-[25%] max-[768px]:scale-75 max-[480px]:scale-[0.55]"      style={{ width, height, perspective: "900px" }}    >      {rendered}    </div>  );}