{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "torus-knot",
  "type": "registry:component",
  "title": "Torus Knot",
  "description": "Three.js torus knot with glass transmission material and iridescence",
  "dependencies": [
    "three",
    "@react-three/fiber",
    "@react-three/drei"
  ],
  "files": [
    {
      "path": "components/kraavon-ui/TorusKnot.tsx",
      "content": "\"use client\";\nimport React, { useRef } from \"react\";\nimport { Canvas, useFrame } from \"@react-three/fiber\";\nimport { MeshTransmissionMaterial, Environment } from \"@react-three/drei\";\nimport * as THREE from \"three\";\nfunction Knot() {\n  const ref = useRef<THREE.Mesh>(null);\n  useFrame(({ clock }) => {\n    if (!ref.current) return;\n    ref.current.rotation.x = clock.getElapsedTime() * 0.3;\n    ref.current.rotation.y = clock.getElapsedTime() * 0.5;\n  });\n  return (\n    <mesh ref={ref}>\n      <torusKnotGeometry args={[1, 0.35, 128, 32]} />\n      <MeshTransmissionMaterial backside backsideThickness={5} thickness={0.3} chromaticAberration={0.5} anisotropy={0.5} iridescence={1} iridescenceIOR={1} iridescenceThicknessRange={[0, 1400]} roughness={0} envMapIntensity={1} />\n    </mesh>\n  );\n}\ninterface Props { className?: string; style?: React.CSSProperties; }\nexport default function TorusKnot({ className, style }: Props) {\n  return (\n    <div className={className} style={{ width:\"100%\", height:\"100%\", ...style }}>\n      <Canvas camera={{ position:[0,0,4], fov:45 }}>\n        <ambientLight intensity={0.5} />\n        <pointLight position={[5,5,5]} intensity={2} color=\"#6366f1\" />\n        <Knot />\n        <Environment preset=\"studio\" />\n      </Canvas>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ]
}