{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mesh-gradient",
  "type": "registry:component",
  "title": "Mesh Gradient",
  "description": "Animated mesh gradient background with smooth color transitions",
  "dependencies": [],
  "files": [
    {
      "path": "components/kraavon-ui/MeshGradient.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\ninterface MeshGradientProps {\n  colors?: [string, string, string, string];\n  speed?: number;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\nexport default function MeshGradient({\n  colors = [\"#6366f1\", \"#8b5cf6\", \"#06b6d4\", \"#ec4899\"],\n  speed = 8,\n  className,\n  style,\n  children,\n}: MeshGradientProps) {\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"relative\",\n        overflow: \"hidden\",\n        ...style,\n      }}\n    >\n      <div\n        style={{\n          position: \"absolute\",\n          inset: \"-50%\",\n          background: `\n            radial-gradient(ellipse at 20% 20%, ${colors[0]}88 0%, transparent 50%),\n            radial-gradient(ellipse at 80% 10%, ${colors[1]}88 0%, transparent 50%),\n            radial-gradient(ellipse at 10% 80%, ${colors[2]}88 0%, transparent 50%),\n            radial-gradient(ellipse at 90% 80%, ${colors[3]}88 0%, transparent 50%),\n            #0a0a0f\n          `,\n          animation: `mesh-rotate ${speed}s linear infinite`,\n        }}\n      />\n      <style>{`\n        @keyframes mesh-rotate {\n          0%   { transform: rotate(0deg) scale(1.5); }\n          100% { transform: rotate(360deg) scale(1.5); }\n        }\n      `}</style>\n      <div style={{ position: \"relative\", zIndex: 1 }}>{children}</div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ]
}