{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "wave-plane",
  "type": "registry:component",
  "title": "Wave Plane",
  "description": "Three.js animated wave plane with vertex displacement",
  "dependencies": [
    "three",
    "@react-three/fiber",
    "@react-three/drei"
  ],
  "files": [
    {
      "path": "components/kraavon-ui/WavePlane.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 Wave() {\n  const meshRef = useRef<THREE.Mesh>(null);\n  const geo = useMemo(() => new THREE.PlaneGeometry(6, 6, 60, 60), []);\n  const posArr = useMemo(() => geo.attributes.position.array.slice() as Float32Array, [geo]);\n\n  useFrame(({ clock }) => {\n    if (!meshRef.current) return;\n    const pos = meshRef.current.geometry.attributes.position;\n    const t = clock.getElapsedTime();\n    for (let i = 0; i < pos.count; i++) {\n      const x = posArr[i * 3];\n      const y = posArr[i * 3 + 1];\n      pos.setZ(i, Math.sin(x * 1.5 + t) * 0.3 + Math.sin(y * 1.5 + t * 0.8) * 0.2);\n    }\n    pos.needsUpdate = true;\n  });\n\n  return (\n    <mesh ref={meshRef} geometry={geo} rotation={[-Math.PI / 4, 0, 0]}>\n      <meshStandardMaterial\n        color=\"#6366f1\"\n        wireframe\n        side={THREE.DoubleSide}\n      />\n    </mesh>\n  );\n}\n\ninterface WavePlaneProps {\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport default function WavePlane({ className, style }: WavePlaneProps) {\n  return (\n    <div className={className} style={{ width: \"100%\", height: \"100%\", background: \"#0a0a0f\", ...style }}>\n      <Canvas camera={{ position: [0, 2, 5], fov: 50 }}>\n        <ambientLight intensity={0.5} />\n        <pointLight position={[0, 4, 4]} intensity={1} color=\"#8b5cf6\" />\n        <Wave />\n      </Canvas>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ]
}