{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "soft-aurora",
  "type": "registry:component",
  "title": "Soft Aurora",
  "description": "Animated aurora borealis background with soft color blobs",
  "dependencies": [],
  "files": [
    {
      "path": "components/kraavon-ui/SoftAurora.tsx",
      "content": "\"use client\";\n\nimport React, { useEffect, useRef } from \"react\";\n\ninterface SoftAuroraProps {\n  colors?: string[];\n  speed?: number;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\nexport default function SoftAurora({\n  colors = [\"#6366f1\", \"#8b5cf6\", \"#06b6d4\", \"#10b981\"],\n  speed = 1,\n  className,\n  style,\n  children,\n}: SoftAuroraProps) {\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"relative\",\n        overflow: \"hidden\",\n        background: \"#0a0a0f\",\n        ...style,\n      }}\n    >\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          filter: \"blur(60px)\",\n          opacity: 0.7,\n        }}\n      >\n        {colors.map((color, i) => (\n          <div\n            key={i}\n            style={{\n              position: \"absolute\",\n              borderRadius: \"50%\",\n              width: `${40 + i * 10}%`,\n              height: `${40 + i * 10}%`,\n              background: color,\n              opacity: 0.6,\n              top: `${10 + i * 15}%`,\n              left: `${5 + i * 20}%`,\n              animation: `aurora-float-${i} ${6 + i * 2}s ${i * 0.5}s ease-in-out infinite alternate`,\n            }}\n          />\n        ))}\n      </div>\n      <style>{`\n        @keyframes aurora-float-0 {\n          from { transform: translate(0, 0) scale(1); }\n          to   { transform: translate(8%, 6%) scale(1.08); }\n        }\n        @keyframes aurora-float-1 {\n          from { transform: translate(0, 0) scale(1.05); }\n          to   { transform: translate(-6%, 8%) scale(0.95); }\n        }\n        @keyframes aurora-float-2 {\n          from { transform: translate(0, 0) scale(0.95); }\n          to   { transform: translate(5%, -7%) scale(1.1); }\n        }\n        @keyframes aurora-float-3 {\n          from { transform: translate(0, 0) scale(1.1); }\n          to   { transform: translate(-8%, 4%) scale(0.9); }\n        }\n      `}</style>\n      <div style={{ position: \"relative\", zIndex: 1 }}>{children}</div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ]
}