{
  "title": "Layered Stack",
  "description": "An interactive component that dynamically layers elements, creating a visually engaging stacked animation effect.",
  "name": "motion-layered-stack",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [],
  "type": "registry:ui",
  "files": [
    {
      "path": "components/paceui/motion/layered-stack.tsx",
      "type": "registry:ui",
      "content": "import { type ComponentProps, useEffect, useRef } from \"react\";\n\nimport { animate, stagger } from \"motion/react\";\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            animate(\n                card,\n                {\n                    x: offsetX,\n                    y: offsetY,\n                    rotate: Math.random() * 30 - 15,\n                    zIndex: 100 - i,\n                },\n                {\n                    duration: 0.5,\n                    ease: \"easeOut\",\n                },\n            );\n        });\n    };\n\n    const resetCards = () => {\n        const container = containerRef.current;\n        if (!container) return;\n\n        const cards = Array.from(container.children) as HTMLElement[];\n\n        animate(\n            cards,\n            {\n                x: 0,\n                y: 0,\n                zIndex: 1,\n                rotate: 0,\n            },\n            {\n                duration: 0.6,\n                ease: \"easeOut\",\n                delay: stagger(0.05),\n            },\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"
    }
  ],
  "mcp": {
    "description": "Provides refined UI interactions and accessible controls. An interactive component that dynamically layers elements, creating a visually engaging stacked animation effect. Configurable props include: ComponentProps<\"div\"> & {. Relies on motion. Optimal for building reusable interface elements and user input flows.",
    "tags": [
      "component",
      "motion",
      "animation"
    ]
  }
}