Animation Added and Gif file updated

app/components/canvas/NeuralNetwork.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useRef, useMemo } from "react";
+import { Canvas, useFrame } from "@react-three/fiber";
+import { Points, PointMaterial, Preload } from "@react-three/drei";
+import * as THREE from "three";
+
+function Particles(props: any) {
+  const ref = useRef<THREE.Points>(null!);
+  
+  // Generate 5000 random points inside a sphere
+  const sphere = useMemo(() => {
+    const coords = new Float32Array(5000 * 3);
+    for (let i = 0; i < 5000; i++) {
+      const r = 1.2 * Math.cbrt(Math.random()); // Radius
+      const theta = Math.random() * 2 * Math.PI; // Theta
+      const phi = Math.acos(2 * Math.random() - 1); // Phi
+      
+      const x = r * Math.sin(phi) * Math.cos(theta);
+      const y = r * Math.sin(phi) * Math.sin(theta);
+      const z = r * Math.cos(phi);
+      
+      coords[i * 3] = x;
+      coords[i * 3 + 1] = y;
+      coords[i * 3 + 2] = z;
+    }
+    return coords;
+  }, []);
+
+  useFrame((state, delta) => {
+    if (ref.current) {
+      // Rotate the entire cloud slowly
+      ref.current.rotation.x -= delta / 10;
+      ref.current.rotation.y -= delta / 15;
+    }
+  });
+
+  return (
+    <group rotation={[0, 0, Math.PI / 4]}>
+      <Points ref={ref} positions={sphere} stride={3} frustumCulled={false} {...props}>
+        <PointMaterial
+          transparent
+          color="#22d3ee" // Cyan-400
+          size={0.005}
+          sizeAttenuation={true}
+          depthWrite={false}
+          opacity={0.6}
+        />
+      </Points>
+    </group>
+  );
+}
+
+const NeuralNetwork = () => {
+  return (
+    <div className="absolute inset-0 z-0 h-full w-full">
+      <Canvas camera={{ position: [0, 0, 1] }}>
+        <Particles />
+        <Preload all />
+      </Canvas>
+    </div>
+  );
+};
+
+export default NeuralNetwork;