Layered Stack

1"use client";
2 
3import { ComponentProps, useCallback, useEffect, useRef } from "react";
4import gsap from "gsap";
5import { cn } from "@/lib/utils";
6 
7export type LayeredStackProps = ComponentProps<"div">;
8 
9export const LayeredStack = ({ children, className, ...props }: LayeredStackProps) => {
10    const containerRef = useRef<HTMLDivElement>(null);
11    const isStacked = useRef(true);
12 
13    const stackCards = useCallback((animate = true) => {
14        const container = containerRef.current;
15        if (!container) return;
16 
17        isStacked.current = true;
18        const cards = Array.from(container.children) as HTMLElement[];
19 
20        // First clear all transforms so offsetLeft/offsetTop reflect true grid positions
21        cards.forEach((card) => {
22            gsap.killTweensOf(card);
23        });
24 
25        if (!animate) {
26            // Instant reposition: clear transforms, recalculate, set immediately
27            cards.forEach((card) => gsap.set(card, { x: 0, y: 0, rotate: 0 }));
28            // Wait a frame so the browser recalculates layout
29            requestAnimationFrame(() => {
30                const container = containerRef.current;
31                if (!container || !isStacked.current) return;
32                const cards = Array.from(container.children) as HTMLElement[];
33                cards.forEach((card, i) => {
34                    const offsetX = container.clientWidth / 2 - card.offsetWidth / 2 - card.offsetLeft;
35                    const offsetY = container.clientHeight / 2 - card.offsetHeight / 2 - card.offsetTop;
36                    gsap.set(card, {
37                        x: offsetX,
38                        y: offsetY,
39                        rotate: gsap.utils.random(-10, 10),
40                        zIndex: 100 - i,
41                    });
42                });
43            });
44            return;
45        }
46 
47        // Animated: first clear, then after layout recalc, animate to center
48        cards.forEach((card) => gsap.set(card, { x: 0, y: 0, rotate: 0 }));
49        requestAnimationFrame(() => {
50            const container = containerRef.current;
51            if (!container || !isStacked.current) return;
52            const cards = Array.from(container.children) as HTMLElement[];
53            cards.forEach((card, i) => {
54                const offsetX = container.clientWidth / 2 - card.offsetWidth / 2 - card.offsetLeft;
55                const offsetY = container.clientHeight / 2 - card.offsetHeight / 2 - card.offsetTop;
56                gsap.to(card, {
57// … truncated