{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"ripple","type":"registry:ui","title":"Ripple","description":"Set of concentric circles that pulse in a staggered wave, each ring larger, more transparent, and more delayed than the last, with the outermost ring rendered dashed to suggest a fading signal","author":"fancy-ui <https://fancy-ui.rama.app>","categories":["effects"],"registryDependencies":["https://fancy-ui.rama.app/r/utils.json"],"files":[{"path":"react/src/components/ripple/Ripple.tsx","content":"\"use client\";\n\nimport { cn } from \"../../utils\";\nimport \"./ripple.css\";\n\nexport interface RippleProps {\n\tbaseCircleSize?: number;\n\tbaseCircleOpacity?: number;\n\tspaceBetweenCircle?: number;\n\tcircleOpacityDowngradeRatio?: number;\n\tcircleClass?: string;\n\twaveSpeed?: number;\n\tnumberOfCircles?: number;\n\tclassName?: string;\n}\n\nexport function Ripple({\n\tbaseCircleSize = 210,\n\tbaseCircleOpacity = 0.24,\n\tspaceBetweenCircle = 70,\n\tcircleOpacityDowngradeRatio = 0.03,\n\tcircleClass = \"\",\n\twaveSpeed = 80,\n\tnumberOfCircles = 7,\n\tclassName = \"\",\n}: RippleProps) {\n\tconst circles = Array.from({ length: numberOfCircles }, (_, i) => ({\n\t\tsize: baseCircleSize + i * spaceBetweenCircle,\n\t\topacity: baseCircleOpacity - i * circleOpacityDowngradeRatio,\n\t\tdelay: i * waveSpeed,\n\t\tborderStyle: i === numberOfCircles - 1 ? \"dashed\" : \"solid\",\n\t}));\n\n\treturn (\n\t\t<div className={cn(\"absolute inset-0\", className)} aria-hidden=\"true\">\n\t\t\t{circles.map((circle, i) => (\n\t\t\t\t<div\n\t\t\t\t\tkey={i}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"animate-ripple-circle absolute rounded-full shadow-xl motion-reduce:animate-none\",\n\t\t\t\t\t\tcircleClass\n\t\t\t\t\t)}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: `${circle.size}px`,\n\t\t\t\t\t\theight: `${circle.size}px`,\n\t\t\t\t\t\topacity: circle.opacity,\n\t\t\t\t\t\tanimationDelay: `${circle.delay}ms`,\n\t\t\t\t\t\tborderStyle: circle.borderStyle,\n\t\t\t\t\t\ttop: \"50%\",\n\t\t\t\t\t\tleft: \"50%\",\n\t\t\t\t\t\ttransform: \"translate(-50%, -50%) scale(1)\",\n\t\t\t\t\t\tborderWidth: \"1px\",\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</div>\n\t);\n}\n","type":"registry:ui","target":"@ui/fancy/components/ripple/Ripple.tsx"},{"path":"react/src/components/ripple/index.ts","content":"\"use client\";\n\nexport { Ripple } from \"./Ripple\";\nexport type { RippleProps } from \"./Ripple\";\n","type":"registry:ui","target":"@ui/fancy/components/ripple/index.ts"},{"path":"react/src/components/ripple/ripple.css","content":"@keyframes ripple-effect {\n\t0%,\n\t100% {\n\t\ttransform: translate(-50%, -50%) scale(1);\n\t}\n\t50% {\n\t\ttransform: translate(-50%, -50%) scale(0.9);\n\t}\n}\n\n.animate-ripple-circle {\n\tanimation: ripple-effect 2s ease-in-out infinite;\n}\n","type":"registry:ui","target":"@ui/fancy/components/ripple/ripple.css"}],"meta":{"license":"MIT","package":"fancy-ui-react","version":"0.7.0","source":"https://fancy-ui.rama.app/docs/components/ripple?framework=react"}}