{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "particle-cloud",
  "type": "registry:component",
  "title": "Particle Cloud",
  "description": "Three.js particle cloud that slowly orbits and breathes",
  "dependencies": [
    "three",
    "@react-three/fiber",
    "@react-three/drei"
  ],
  "files": [
    {
      "path": "components/kraavon-ui/ParticleCloud.tsx",
      "content": "\"use client\";\n\nimport React, { useRef, useMemo } from \"react\";\nimport { Canvas, useFrame } from \"@react-three/fiber\";\nimport * as THREE from \"three\";\n\nfunction Cloud({ count = 2000 }) {\n  const ref = useRef<THREE.Points>(null);\n\n  const { positions, colors } = useMemo(() => {\n    const positions = new Float32Array(count * 3);\n    const colors = new Float32Array(count * 3);\n    const c1 = new THREE.Color(\"#6366f1\");\n    const c2 = new THREE.Color(\"#8b5cf6\");\n    const c3 = new THREE.Color(\"#06b6d4\");\n\n    for (let i = 0; i < count; i++) {\n      const r = Math.random() * 2.5;\n      const theta = Math.random() * Math.PI * 2;\n      const phi = Math.acos(Math.random() * 2 - 1);\n      positions[i * 3]     = r * Math.sin(phi) * Math.cos(theta);\n      positions[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta);\n      positions[i * 3 + 2] = r * Math.cos(phi);\n\n      const t = Math.random();\n      const color = t < 0.33 ? c1 : t < 0.66 ? c2 : c3;\n      colors[i * 3]     = color.r;\n      colors[i * 3 + 1] = color.g;\n      colors[i * 3 + 2] = color.b;\n    }\n    return { positions, colors };\n  }, [count]);\n\n  useFrame(({ clock }) => {\n    if (!ref.current) return;\n    ref.current.rotation.y = clock.getElapsedTime() * 0.12;\n    ref.current.rotation.x = Math.sin(clock.getElapsedTime() * 0.15) * 0.15;\n  });\n\n  return (\n    <points ref={ref}>\n      <bufferGeometry>\n        <bufferAttribute attach=\"attributes-position\" args={[positions, 3]} />\n        <bufferAttribute attach=\"attributes-color\" args={[colors, 3]} />\n      </bufferGeometry>\n      <pointsMaterial size={0.025} vertexColors sizeAttenuation />\n    </points>\n  );\n}\n\ninterface ParticleCloudProps {\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport default function ParticleCloud({ className, style }: ParticleCloudProps) {\n  return (\n    <div className={className} style={{ width: \"100%\", height: \"100%\", background: \"#050508\", ...style }}>\n      <Canvas camera={{ position: [0, 0, 5], fov: 50 }}>\n        <Cloud />\n      </Canvas>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ]
}