Upload components/Background.js with huggingface_hub

components/Background.js

@@ -0,0 +1,62 @@
+'use client';
+
+import { Canvas, useFrame } from '@react-three/fiber';
+import { Points, PointMaterial, Float } from '@react-three/drei';
+import { useState, useRef } from 'react';
+import * as random from 'maath/random/dist/maath-random.esm';
+
+function Stars(props) {
+  const ref = useRef();
+  const [sphere] = useState(() => random.inSphere(new Float32Array(5000), { radius: 1.5 }));
+
+  useFrame((state, delta) => {
+    if (ref.current) {
+      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="#ffffff"
+          size={0.002}
+          sizeAttenuation={true}
+          depthWrite={false}
+        />
+      </Points>
+    </group>
+  );
+}
+
+function DataTunnel() {
+  const meshRef = useRef();
+  
+  useFrame((state) => {
+    if(meshRef.current) {
+       meshRef.current.rotation.z = state.clock.elapsedTime * 0.1;
+    }
+  });
+
+  return (
+    <Float speed={2} rotationIntensity={0.5} floatIntensity={0.5}>
+      <mesh ref={meshRef}>
+        <torusGeometry args={[10, 0.02, 16, 100]} />
+        <meshBasicMaterial color="#333" wireframe transparent opacity={0.3} />
+      </mesh>
+    </Float>
+  )
+}
+
+export default function Background() {
+  return (
+    <div className="fixed inset-0 z-0">
+      <Canvas camera={{ position: [0, 0, 1] }}>
+        <Stars />
+        <DataTunnel />
+      </Canvas>
+    </div>
+  );
+}