{
    "name": "layered-stack",
    "title": "Layered Stack",
    "description": "An interactive component that dynamically layers elements, creating a visually engaging stacked animation effect.",
    "type": "registry:ui",
    "dependencies": ["gsap", "@gsap/react"],
    "files": [
        {
            "path": "components/gsap/layered-stack.tsx",
            "type": "registry:ui",
            "target": "~/components/gsap/layered-stack.tsx",
            "content": "\"use client\";\n\nimport { ComponentProps, useEffect, useRef } from \"react\";\n\nimport gsap from \"gsap\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype LayeredStackProps = ComponentProps<\"div\"> & {};\n\nexport const LayeredStack = ({ children, className, ...props }: LayeredStackProps) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const stackCards = () => {\n        const container = containerRef.current;\n        if (!container) return;\n\n        const cards = Array.from(container.children) as HTMLElement[];\n\n        cards.forEach((card, i) => {\n            const left = card.offsetLeft;\n            const top = card.offsetTop;\n            const width = card.offsetWidth;\n            const height = card.offsetHeight;\n\n            const offsetX = container.clientWidth / 2 - width / 2 - left;\n            const offsetY = container.clientHeight / 2 - height / 2 - top;\n\n            gsap.to(card, {\n                x: offsetX,\n                y: offsetY,\n                rotate: \"random(-15,15)\",\n                zIndex: 100 - i,\n                duration: 0.5,\n                ease: \"power2.out\",\n                overwrite: true,\n            });\n        });\n    };\n\n    const resetCards = () => {\n        const container = containerRef.current;\n        if (!container) return;\n\n        const cards = Array.from(container.children);\n\n        gsap.to(cards, {\n            x: 0,\n            y: 0,\n            zIndex: 1,\n            duration: 0.6,\n            rotate: 0,\n            ease: \"power3.out\",\n            stagger: {\n                amount: 0.05,\n                from: \"start\",\n            },\n            overwrite: true,\n        });\n    };\n\n    useEffect(() => {\n        stackCards();\n    }, []);\n\n    return (\n        <div\n            ref={containerRef}\n            onMouseEnter={resetCards}\n            onMouseLeave={stackCards}\n            className={cn(\"relative\", className)}\n            {...props}>\n            {children}\n        </div>\n    );\n};\n"
        }
    ]
}