{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "loaders-gooey-blobs",
  "type": "registry:component",
  "title": "Gooey Blobs Loader",
  "description": "Organic merging blobs animation",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/new-york/animations/loaders/gooey-blobs.tsx",
      "content": "\"use client\";\nimport * as React from \"react\";\nimport { motion, HTMLMotionProps } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\nexport interface LoaderGooeyBlobsProps\n  extends Omit<HTMLMotionProps<\"div\">, \"children\"> {\n  size?: number;\n  color?: string;\n  duration?: number;\n}\nexport function LoaderGooeyBlobs({\n  className,\n  size = 20,\n  color = \"currentColor\",\n  duration = 1.5,\n  ...props\n}: LoaderGooeyBlobsProps) {\n  return (\n    <div className={cn(\"flex items-center gap-2\", className)}>\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <filter id=\"gooey\">\n            <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"3\" result=\"blur\" />\n            <feColorMatrix\n              in=\"blur\"\n              mode=\"matrix\"\n              values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7\"\n              result=\"gooey\"\n            />\n            <feBlend in=\"SourceGraphic\" in2=\"gooey\" />\n          </filter>\n        </defs>\n      </svg>\n      <div\n        style={{ filter: \"url(#gooey)\" } as React.CSSProperties}\n        className=\"flex gap-1\"\n      >\n        {[0, 1, 2].map((index) => (\n          <motion.div\n            key={index}\n            className=\"rounded-full\"\n            style={{\n              width: size,\n              height: size,\n              backgroundColor: color,\n            }}\n            animate={{\n              x: [0, 15, 0, -15, 0],\n              scale: [1, 1.2, 1, 1.2, 1],\n            }}\n            transition={{\n              duration,\n              ease: \"easeInOut\",\n              repeat: Infinity,\n              delay: index * 0.2,\n            }}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ]
}