{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ripple",
  "type": "registry:ui",
  "title": "Ripple",
  "description": "An animated ripple effect typically used behind elements to emphasize them.",
  "files": [
    {
      "path": "registry/magicui/ripple.tsx",
      "content": "import React, { type ComponentPropsWithoutRef, type CSSProperties } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface RippleProps extends ComponentPropsWithoutRef<\"div\"> {\n  mainCircleSize?: number\n  mainCircleOpacity?: number\n  numCircles?: number\n}\n\nexport const Ripple = React.memo(function Ripple({\n  mainCircleSize = 210,\n  mainCircleOpacity = 0.24,\n  numCircles = 8,\n  className,\n  ...props\n}: RippleProps) {\n  return (\n    <div\n      className={cn(\n        \"pointer-events-none absolute inset-0 mask-[linear-gradient(to_bottom,white,transparent)] select-none\",\n        className\n      )}\n      {...props}\n    >\n      {Array.from({ length: numCircles }, (_, i) => {\n        const size = mainCircleSize + i * 70\n        const opacity = mainCircleOpacity - i * 0.03\n        const animationDelay = `${i * 0.06}s`\n        const borderStyle = \"solid\"\n\n        return (\n          <div\n            key={i}\n            className={`animate-ripple bg-foreground/25 absolute rounded-full border shadow-xl`}\n            style={\n              {\n                \"--i\": i,\n                width: `${size}px`,\n                height: `${size}px`,\n                opacity,\n                animationDelay,\n                borderStyle,\n                borderWidth: \"1px\",\n                borderColor: `var(--foreground)`,\n                top: \"50%\",\n                left: \"50%\",\n                transform: \"translate(-50%, -50%) scale(1)\",\n              } as CSSProperties\n            }\n          />\n        )\n      })}\n    </div>\n  )\n})\n\nRipple.displayName = \"Ripple\"\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "animate-ripple": "ripple var(--duration,2s) ease calc(var(--i, 0)*.2s) infinite"
    }
  },
  "css": {
    "@keyframes ripple": {
      "0%, 100%": {
        "transform": "translate(-50%, -50%) scale(1)"
      },
      "50%": {
        "transform": "translate(-50%, -50%) scale(0.9)"
      }
    }
  }
}