{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ripple-circles",
  "type": "registry:ui",
  "title": "Ripple Circles",
  "description": "Animated ripple circles loader with gradient backgrounds and backdrop blur.",
  "files": [
    {
      "path": "registry/ruixenui/ripple-circles.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nexport const RippleCircles: React.FC = () => {\n  return (\n    <div className=\"relative h-[250px] aspect-square\">\n      {/* Ripple circles */}\n      <span className=\"absolute inset-[40%] rounded-full border border-gray-500/80 dark:border-gray-300/80 animate-[ripple-circles_2s_infinite_ease-in-out] bg-gradient-to-tr from-gray-500/10 to-gray-400/10 backdrop-blur-sm z-[98]\" />\n      <span className=\"absolute inset-[30%] rounded-full border border-gray-500/60 dark:border-gray-300/60 animate-[ripple-circles_2s_infinite_ease-in-out_0.2s] bg-gradient-to-tr from-gray-500/10 to-gray-400/10 backdrop-blur-sm z-[97]\" />\n      <span className=\"absolute inset-[20%] rounded-full border border-gray-500/40 dark:border-gray-300/40 animate-[ripple-circles_2s_infinite_ease-in-out_0.4s] bg-gradient-to-tr from-gray-500/10 to-gray-400/10 backdrop-blur-sm z-[96]\" />\n      <span className=\"absolute inset-[10%] rounded-full border border-gray-500/30 dark:border-gray-300/30 animate-[ripple-circles_2s_infinite_ease-in-out_0.6s] bg-gradient-to-tr from-gray-500/10 to-gray-400/10 backdrop-blur-sm z-[95]\" />\n      <span className=\"absolute inset-0 rounded-full border border-gray-500/20 dark:border-gray-300/20 animate-[ripple-circles_2s_infinite_ease-in-out_0.8s] bg-gradient-to-tr from-gray-500/10 to-gray-400/10 backdrop-blur-sm z-[94]\" />\n    </div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ruixen/ripple-circles.tsx"
    }
  ],
  "css": {
    "ripple-circles": {
      "0%": {
        "transform": "scale(1)",
        "box-shadow": "0 10px 10px rgba(0, 0, 0, 0.3)"
      },
      "50%": {
        "transform": "scale(1.3)",
        "box-shadow": "0 30px 20px rgba(0, 0, 0, 0.3)"
      },
      "100%": {
        "transform": "scale(1)",
        "box-shadow": "0 10px 10px rgba(0, 0, 0, 0.3)"
      }
    }
  }
}