{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dynamic-tag-cloud-shadcnui",
  "type": "registry:ui",
  "title": "Dynamic Tag Cloud",
  "description": "Floating cluster of tags that drift and rearrange when hovered",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/motion-core/dynamic-tag-cloud.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"framer-motion\";\nimport { useState } from \"react\";\n\ntype Tag = {\n  id: string;\n  label: string;\n};\n\ntype DynamicTagCloudProps = {\n  tags?: Tag[];\n};\n\nexport function DynamicTagCloud({\n  tags = [\n    { id: \"1\", label: \"React\" },\n    { id: \"2\", label: \"TypeScript\" },\n    { id: \"3\", label: \"Framer Motion\" },\n    { id: \"4\", label: \"TailwindCSS\" },\n    { id: \"5\", label: \"Next.js\" },\n    { id: \"6\", label: \"Design\" },\n  ],\n}: DynamicTagCloudProps) {\n  const [hoveredId, setHoveredId] = useState<string | null>(null);\n\n  const generateRandomOffset = () => ({\n    x: Math.random() * 20 - 10,\n    y: Math.random() * 20 - 10,\n  });\n\n  return (\n    <div className=\"\">\n      <div className=\"flex flex-wrap items-center justify-center gap-3\">\n        {tags.map((tag, index) => {\n          const offset = generateRandomOffset();\n          const isHovered = hoveredId === tag.id;\n\n          return (\n            <motion.button\n              key={tag.id}\n              initial={{\n                x: offset.x,\n                y: offset.y,\n                opacity: 0,\n                scale: 0.8,\n              }}\n              animate={{\n                x: isHovered ? offset.x * 1.5 : offset.x,\n                y: isHovered ? offset.y * 1.5 : offset.y,\n                opacity: 1,\n                scale: isHovered ? 1.1 : 1,\n              }}\n              whileHover={{\n                scale: 1.15,\n                zIndex: 10,\n              }}\n              transition={{\n                type: \"spring\",\n                stiffness: 200,\n                damping: 20,\n                delay: index * 0.05,\n              }}\n              onHoverStart={() => setHoveredId(tag.id)}\n              onHoverEnd={() => setHoveredId(null)}\n              className=\"rounded-full border border-border bg-muted px-4 py-2 text-sm font-medium transition-colors hover:bg-primary hover:text-primary-foreground\"\n            >\n              {tag.label}\n            </motion.button>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/uitripled/dynamic-tag-cloud-shadcnui.tsx"
    }
  ]
}