{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stars-background",
  "type": "registry:component",
  "title": "Stars Background",
  "description": "Twinkling star field on a deep space background",
  "dependencies": [],
  "files": [
    {
      "path": "components/kraavon-ui/StarsBackground.tsx",
      "content": "\"use client\";\nimport React, { useEffect, useRef } from \"react\";\ninterface Star { x: number; y: number; r: number; o: number; speed: number; }\ninterface Props { count?: number; color?: string; className?: string; style?: React.CSSProperties; children?: React.ReactNode; }\nexport default function StarsBackground({ count = 150, color = \"#ffffff\", className, style, children }: Props) {\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const animRef = useRef<number>(0);\n  useEffect(() => {\n    const canvas = canvasRef.current; if (!canvas) return;\n    const ctx = canvas.getContext(\"2d\"); if (!ctx) return;\n    const resize = () => { canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; };\n    resize(); window.addEventListener(\"resize\", resize);\n    const stars: Star[] = Array.from({ length: count }, () => ({\n      x: Math.random() * canvas.width, y: Math.random() * canvas.height,\n      r: Math.random() * 1.5 + 0.3, o: Math.random(), speed: Math.random() * 0.005 + 0.002,\n    }));\n    let t = 0;\n    const draw = () => {\n      ctx.clearRect(0, 0, canvas.width, canvas.height); t += 0.01;\n      stars.forEach(s => {\n        ctx.beginPath(); ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);\n        const opacity = 0.3 + Math.abs(Math.sin(t * s.speed * 100 + s.o * 10)) * 0.7;\n        ctx.fillStyle = color.startsWith(\"#\") ? color + Math.round(opacity * 255).toString(16).padStart(2, \"0\") : color;\n        ctx.fill();\n      });\n      animRef.current = requestAnimationFrame(draw);\n    };\n    draw();\n    return () => { cancelAnimationFrame(animRef.current); window.removeEventListener(\"resize\", resize); };\n  }, [count, color]);\n  return (\n    <div className={className} style={{ position: \"relative\", overflow: \"hidden\", background: \"#020817\", ...style }}>\n      <canvas ref={canvasRef} style={{ position: \"absolute\", inset: 0, width: \"100%\", height: \"100%\" }} />\n      <div style={{ position: \"relative\", zIndex: 1 }}>{children}</div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ]
}