{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "floating-sphere",
  "type": "registry:component",
  "title": "Floating Sphere",
  "description": "Three.js floating sphere with metallic material and environment",
  "dependencies": [
    "three",
    "@react-three/fiber",
    "@react-three/drei"
  ],
  "files": [
    {
      "path": "components/kraavon-ui/FloatingSphere.tsx",
      "content": "\"use client\";\n\nimport React, { useRef } from \"react\";\nimport { Canvas, useFrame } from \"@react-three/fiber\";\nimport { Environment, MeshDistortMaterial } from \"@react-three/drei\";\nimport * as THREE from \"three\";\n\nfunction Sphere() {\n  const meshRef = useRef<THREE.Mesh>(null);\n\n  useFrame(({ clock }) => {\n    if (!meshRef.current) return;\n    meshRef.current.position.y = Math.sin(clock.getElapsedTime() * 0.8) * 0.15;\n    meshRef.current.rotation.y = clock.getElapsedTime() * 0.3;\n  });\n\n  return (\n    <mesh ref={meshRef}>\n      <sphereGeometry args={[1.2, 64, 64]} />\n      <MeshDistortMaterial\n        color=\"#6366f1\"\n        metalness={0.9}\n        roughness={0.1}\n        distort={0.25}\n        speed={2}\n      />\n    </mesh>\n  );\n}\n\ninterface FloatingSphereProps {\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport default function FloatingSphere({ className, style }: FloatingSphereProps) {\n  return (\n    <div className={className} style={{ width: \"100%\", height: \"100%\", ...style }}>\n      <Canvas camera={{ position: [0, 0, 3.5], fov: 45 }}>\n        <ambientLight intensity={0.4} />\n        <pointLight position={[5, 5, 5]} intensity={1.5} color=\"#6366f1\" />\n        <pointLight position={[-5, -3, -5]} intensity={0.8} color=\"#8b5cf6\" />\n        <Sphere />\n        <Environment preset=\"city\" />\n      </Canvas>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ]
}