{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cloud-flow",
  "title": "Cloud Flow",
  "description": "An interactive cloud architecture visualization component featuring animated SVG flow paths, glowing data particles, node badges, and a central hub with layered motion effects—ideal for showcasing distributed systems, API traffic, and real-time infrastructure flows.",
  "dependencies": [
    "react",
    "@tabler/icons-react",
    "motion"
  ],
  "files": [
    {
      "path": "registry/gammaui/cloud-flow.tsx",
      "content": "\"use client\"\n\nimport React from \"react\"\nimport { IconCloud, IconDatabase, IconServer } from \"@tabler/icons-react\"\nimport { motion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface CloudFlowProps {\n  className?: string\n  centerText?: string\n  nodeLabels?: {\n    topLeft: string\n    topRight: string\n    bottomLeft: string\n    bottomRight: string\n  }\n  badges?: {\n    left: string\n    right: string\n  }\n  title?: string\n  accentColor?: string\n}\n\nexport default function CloudFlow({\n  className,\n  centerText,\n  nodeLabels,\n  badges,\n  title,\n  accentColor = \"#00A6F5\",\n}: CloudFlowProps) {\n  return (\n    <div\n      className={cn(\n        \"relative flex h-[350px] w-full max-w-[500px] flex-col items-center\",\n        className\n      )}\n    >\n      {/* SVG Flow Diagram */}\n      <svg\n        className=\"text-muted h-full w-full\"\n        width=\"100%\"\n        height=\"100%\"\n        viewBox=\"0 0 200 100\"\n      >\n        <g\n          stroke=\"currentColor\"\n          fill=\"none\"\n          strokeWidth=\"0.3\"\n          strokeDasharray=\"100 100\"\n          pathLength=\"100\"\n        >\n          {/* Top Left to Center */}\n          <path d=\"M 25 15 L 25 35 Q 25 40 30 40 L 90 40 Q 95 40 95 45 L 95 48\" />\n          {/* Top Right to Center */}\n          <path d=\"M 175 15 L 175 35 Q 175 40 170 40 L 110 40 Q 105 40 105 45 L 105 48\" />\n          {/* Center to Bottom Left */}\n          <path d=\"M 95 62 L 95 65 Q 95 70 90 70 L 30 70 Q 25 70 25 75 L 25 85\" />\n          {/* Center to Bottom Right */}\n          <path d=\"M 105 62 L 105 65 Q 105 70 110 70 L 170 70 Q 175 70 175 75 L 175 85\" />\n\n          {/* Animation */}\n          <animate\n            attributeName=\"stroke-dashoffset\"\n            from=\"100\"\n            to=\"0\"\n            dur=\"1.2s\"\n            fill=\"freeze\"\n            calcMode=\"spline\"\n            keySplines=\"0.4,0,0.2,1\"\n            keyTimes=\"0; 1\"\n          />\n        </g>\n\n        <motion.path\n          d=\"M 25 15 L 25 35 Q 25 40 30 40 L 90 40 Q 95 40 95 45 L 95 48\"\n          fill=\"none\"\n          stroke={accentColor}\n          strokeWidth=\"0.5\"\n          strokeDasharray=\"6 94\"\n          strokeDashoffset=\"100\"\n          initial={{ opacity: 0 }}\n          animate={{\n            strokeDashoffset: [100, 0],\n            opacity: [0, 1, 1, 0],\n          }}\n          transition={{\n            duration: 2,\n            repeat: Infinity,\n            ease: \"linear\",\n            times: [0, 0.1, 0.9, 1],\n          }}\n        />\n\n        <motion.path\n          d=\"M 175 15 L 175 35 Q 175 40 170 40 L 110 40 Q 105 40 105 45 L 105 48\"\n          fill=\"none\"\n          stroke={accentColor}\n          strokeWidth=\"0.5\"\n          strokeDasharray=\"6 94\"\n          strokeDashoffset=\"100\"\n          initial={{ opacity: 0 }}\n          animate={{\n            strokeDashoffset: [100, 0],\n            opacity: [0, 1, 1, 0],\n          }}\n          transition={{\n            duration: 2,\n            repeat: Infinity,\n            ease: \"linear\",\n            times: [0, 0.1, 0.9, 1],\n          }}\n        />\n\n        <motion.path\n          d=\"M 95 62 L 95 65 Q 95 70 90 70 L 30 70 Q 25 70 25 75 L 25 85\"\n          fill=\"none\"\n          stroke={accentColor}\n          strokeWidth=\"0.5\"\n          strokeDasharray=\"6 94\"\n          strokeDashoffset=\"100\"\n          initial={{ opacity: 0 }}\n          animate={{\n            strokeDashoffset: [100, 0],\n            opacity: [0, 1, 1, 0],\n          }}\n          transition={{\n            duration: 2,\n            repeat: Infinity,\n            ease: \"linear\",\n            times: [0, 0.1, 0.9, 1],\n          }}\n        />\n        <motion.path\n          d=\"M 105 62 L 105 65 Q 105 70 110 70 L 170 70 Q 175 70 175 75 L 175 85\"\n          fill=\"none\"\n          stroke={accentColor}\n          strokeWidth=\"0.5\"\n          strokeDasharray=\"6 94\"\n          strokeDashoffset=\"100\"\n          initial={{ opacity: 0 }}\n          animate={{\n            strokeDashoffset: [100, 0],\n            opacity: [0, 1, 1, 0],\n          }}\n          transition={{\n            duration: 2,\n            repeat: Infinity,\n            ease: \"linear\",\n            times: [0, 0.1, 0.9, 1],\n          }}\n        />\n\n        {/* Node Badges */}\n        <g stroke=\"currentColor\" fill=\"none\" strokeWidth=\"0.3\">\n          {/* Top Left Node */}\n          <g>\n            <rect fill=\"#0F172A\" x=\"8\" y=\"10\" width=\"34\" height=\"10\" rx=\"5\" />\n            <IconServer x=\"12\" y=\"12.5\" size={6} color={accentColor} />\n            <text\n              x=\"21\"\n              y=\"17\"\n              fill=\"white\"\n              stroke=\"none\"\n              fontSize=\"4.5\"\n              fontWeight=\"500\"\n            >\n              {nodeLabels?.topLeft || \"API\"}\n            </text>\n          </g>\n\n          {/* Top Right Node */}\n          <g>\n            <rect fill=\"#0F172A\" x=\"158\" y=\"10\" width=\"34\" height=\"10\" rx=\"5\" />\n            <IconCloud x=\"162\" y=\"12.5\" size={6} color={accentColor} />\n            <text\n              x=\"171\"\n              y=\"17\"\n              fill=\"white\"\n              stroke=\"none\"\n              fontSize=\"4.5\"\n              fontWeight=\"500\"\n            >\n              {nodeLabels?.topRight || \"CDN\"}\n            </text>\n          </g>\n\n          {/* Bottom Left Node */}\n          <g>\n            <rect fill=\"#0F172A\" x=\"8\" y=\"85\" width=\"34\" height=\"10\" rx=\"5\" />\n            <IconDatabase x=\"12\" y=\"87.5\" size={6} color={accentColor} />\n            <text\n              x=\"21\"\n              y=\"92\"\n              fill=\"white\"\n              stroke=\"none\"\n              fontSize=\"4.5\"\n              fontWeight=\"500\"\n            >\n              {nodeLabels?.bottomLeft || \"DB\"}\n            </text>\n          </g>\n        </g>\n\n        <defs>\n          {/* Flow Path Masks */}\n          <mask id=\"flow-mask-1\">\n            <path\n              d=\"M 25 15 L 25 35 Q 25 40 30 40 L 90 40 Q 95 40 95 45 L 95 48\"\n              strokeWidth=\"0.5\"\n              stroke=\"white\"\n            />\n          </mask>\n          <mask id=\"flow-mask-2\">\n            <path\n              d=\"M 175 15 L 175 35 Q 175 40 170 40 L 110 40 Q 105 40 105 45 L 105 48\"\n              strokeWidth=\"0.5\"\n              stroke=\"white\"\n            />\n          </mask>\n          <mask id=\"flow-mask-3\">\n            <path\n              d=\"M 95 62 L 95 65 Q 95 70 90 70 L 30 70 Q 25 70 25 75 L 25 85\"\n              strokeWidth=\"0.5\"\n              stroke=\"white\"\n            />\n          </mask>\n          <mask id=\"flow-mask-4\">\n            <path\n              d=\"M 105 62 L 105 65 Q 105 70 110 70 L 170 70 Q 175 70 175 75 L 175 85\"\n              strokeWidth=\"0.5\"\n              stroke=\"white\"\n            />\n          </mask>\n\n          {/* Gradient */}\n          <radialGradient id=\"flow-gradient\" fx=\"1\">\n            <stop offset=\"0%\" stopColor={accentColor} />\n            <stop offset=\"100%\" stopColor=\"transparent\" />\n          </radialGradient>\n        </defs>\n      </svg>\n\n      {/* Main Container */}\n      <div className=\"absolute bottom-10 flex w-full flex-col items-center\">\n        {/* Shadow */}\n        <div className=\"bg-accent/20 absolute -bottom-4 h-[100px] w-[62%] rounded-xl blur-xl\" />\n\n        {/* Title Badge */}\n        <div className=\"absolute -top-3 z-20 flex items-center justify-center rounded-lg border bg-linear-to-r from-slate-900 to-slate-800 px-3 py-1.5 shadow-lg sm:-top-4\">\n          <IconCloud className=\"size-3.5\" color={accentColor} />\n          <span className=\"ml-2 text-[11px] font-medium text-white\">\n            {title || \"Distributed Cloud Architecture\"}\n          </span>\n        </div>\n\n        {/* Center Hub Circle */}\n        <div\n          className=\"absolute -bottom-8 z-30 grid h-[60px] w-[60px] place-items-center rounded-full bg-slate-900 text-xs font-bold shadow-xl\"\n          style={{\n            color: accentColor,\n            border: `1px solid ${accentColor}`,\n          }}\n        >\n          {centerText || \"HUB\"}\n        </div>\n\n        {/* Main Content Box */}\n        <div className=\"bg-background relative z-10 flex h-[150px] w-full items-center justify-center overflow-hidden rounded-xl border shadow-2xl\">\n          {/* Info Badges */}\n          <div className=\"absolute bottom-8 left-12 z-10 flex h-8 items-center gap-2 rounded-full border border-slate-700 bg-slate-900/90 px-3 text-xs font-medium text-white shadow-lg backdrop-blur-sm\">\n            <IconServer className=\"size-4\" color={accentColor} />\n            <span>{badges?.left || \"Live Traffic\"}</span>\n          </div>\n          <div className=\"absolute top-8 right-16 z-10 hidden h-8 items-center gap-2 rounded-full border border-slate-700 bg-slate-900/90 px-3 text-xs font-medium text-white shadow-lg backdrop-blur-sm sm:flex\">\n            <IconDatabase className=\"size-4\" color={accentColor} />\n            <span>{badges?.right || \"Sync Active\"}</span>\n          </div>\n\n          {/* Animated Concentric Circles */}\n          <motion.div\n            className=\"bg-accent/5 absolute -bottom-14 h-[100px] w-[100px] rounded-full border border-emerald-500/20\"\n            animate={{\n              scale: [1, 1.05, 1],\n              opacity: [0.5, 0.8, 0.5],\n            }}\n            transition={{ duration: 3, repeat: Infinity, ease: \"easeInOut\" }}\n          />\n          <motion.div\n            className=\"bg-accent/5 absolute -bottom-20 h-[145px] w-[145px] rounded-full border border-emerald-500/15\"\n            animate={{\n              scale: [1, 1.03, 1],\n              opacity: [0.4, 0.7, 0.4],\n            }}\n            transition={{\n              duration: 3,\n              repeat: Infinity,\n              ease: \"easeInOut\",\n              delay: 0.3,\n            }}\n          />\n          <motion.div\n            className=\"bg-accent/5 absolute -bottom-[100px] h-[190px] w-[190px] rounded-full border border-emerald-500/10\"\n            animate={{\n              scale: [1, 1.02, 1],\n              opacity: [0.3, 0.6, 0.3],\n            }}\n            transition={{\n              duration: 3,\n              repeat: Infinity,\n              ease: \"easeInOut\",\n              delay: 0.6,\n            }}\n          />\n          <motion.div\n            className=\"bg-accent/5 absolute -bottom-[120px] h-[235px] w-[235px] rounded-full border border-emerald-500/5\"\n            animate={{\n              scale: [1, 1.01, 1],\n              opacity: [0.2, 0.5, 0.2],\n            }}\n            transition={{\n              duration: 3,\n              repeat: Infinity,\n              ease: \"easeInOut\",\n              delay: 0.9,\n            }}\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}