{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "floating-gradient-shadcnui",
  "type": "registry:ui",
  "title": "Floating Gradient",
  "description": "Animated floating gradient background effect",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/decorative/background/floating-gradient.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"framer-motion\";\n\nexport function FloatingGradient() {\n  return (\n    <div className=\"relative h-96 w-full overflow-hidden rounded-2xl border  bg-[var(--card-bg)]\">\n      <motion.div\n        className=\"absolute h-96 w-96 rounded-full bg-gradient-to-r from-blue-500 to-slate-500 opacity-20 blur-3xl\"\n        animate={{\n          x: [0, 100, 0],\n          y: [0, 50, 0],\n          scale: [1, 1.2, 1],\n        }}\n        transition={{\n          duration: 8,\n          repeat: Infinity,\n          ease: \"easeInOut\",\n        }}\n        style={{ top: \"10%\", left: \"10%\" }}\n      />\n      <motion.div\n        className=\"absolute h-96 w-96 rounded-full bg-gradient-to-r from-pink-500 to-red-500 opacity-20 blur-3xl\"\n        animate={{\n          x: [0, -100, 0],\n          y: [0, -50, 0],\n          scale: [1, 1.3, 1],\n        }}\n        transition={{\n          duration: 10,\n          repeat: Infinity,\n          ease: \"easeInOut\",\n        }}\n        style={{ bottom: \"10%\", right: \"10%\" }}\n      />\n      <motion.div\n        className=\"absolute h-96 w-96 rounded-full bg-gradient-to-r from-green-500 to-cyan-500 opacity-20 blur-3xl\"\n        animate={{\n          x: [0, 50, 0],\n          y: [0, -100, 0],\n          scale: [1, 1.1, 1],\n        }}\n        transition={{\n          duration: 12,\n          repeat: Infinity,\n          ease: \"easeInOut\",\n        }}\n        style={{ top: \"50%\", left: \"50%\" }}\n      />\n      <div className=\"relative z-10 flex h-full items-center justify-center\">\n        <div className=\"text-center\">\n          <h2 className=\"text-4xl font-bold\">Floating Gradient</h2>\n          <p className=\"mt-2 text-[var(--foreground)]/70\">\n            Animated background effect\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/uitripled/floating-gradient-shadcnui.tsx"
    }
  ]
}