Layered Stack

1"use client";
2 
3import { ComponentProps, useEffect, useRef } from "react";
4 
5import gsap from "gsap";
6 
7import { cn } from "@/lib/utils";
8 
9type LayeredStackProps = ComponentProps<"div"> & {};
10 
11export const LayeredStack = ({ children, className, ...props }: LayeredStackProps) => {
12    const containerRef = useRef<HTMLDivElement>(null);
13 
14    const stackCards = () => {
15        const container = containerRef.current;
16        if (!container) return;
17 
18        const cards = Array.from(container.children) as HTMLElement[];
19 
20        cards.forEach((card, i) => {
21            const left = card.offsetLeft;
22            const top = card.offsetTop;
23            const width = card.offsetWidth;
24            const height = card.offsetHeight;
25 
26            const offsetX = container.clientWidth / 2 - width / 2 - left;
27            const offsetY = container.clientHeight / 2 - height / 2 - top;
28 
29            gsap.to(card, {
30                x: offsetX,
31                y: offsetY,
32                rotate: "random(-15,15)",
33                zIndex: 100 - i,
34                duration: 0.5,
35                ease: "power2.out",
36                overwrite: true,
37            });
38        });
39    };
40 
41    const resetCards = () => {
42        const container = containerRef.current;
43        if (!container) return;
44 
45        const cards = Array.from(container.children);
46 
47        gsap.to(cards, {
48            x: 0,
49            y: 0,
50            zIndex: 1,
51            duration: 0.6,
52            rotate: 0,
53            ease: "power3.out",
54            stagger: {
55                amount: 0.05,
56                from: "start",
57            },
58            overwrite: true,
59        });
60    };
61 
62    useEffect(() => {
63        stackCards();
64    }, []);
65 
66    return (
67        <div
68            ref={containerRef}
69            onMouseEnter={resetCards}
70            onMouseLeave={stackCards}
71            className={cn("relative", className)}
72            {...props}>
73            {children}
74        </div>
75    );
76};