Futuristic Hero Section with 3D Particle Background

<div id="quantum-hero-root"
  class="relative bg-black text-white overflow-hidden font-sans w-full min-h-screen selection:bg-emerald-500 selection:text-black">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>

  <!-- Interactive Background -->
  <div class="absolute inset-0 z-0 bg-radial-gradient from-zinc-900 to-black">
    <canvas id="hero-canvas" class="block w-full h-full"></canvas>
    <script>
      (function() {
        const canvas = document.querySelector('#hero-canvas');
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
        
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        camera.position.z = 5;

        const count = 4000;
        const positions = new Float32Array(count * 3);
        const velocities = new Float32Array(count * 3);
        const home = new Float32Array(count * 3);
        const colors = new Float32Array(count * 3);

        const colorPalette = [new THREE.Color('#10b981'), new THREE.Color('#06b6d4'), new THREE.Color('#f4f4f5')];

        for(let i = 0; i < count; i++) {
          const i3 = i * 3;
          // Scatter particles in a sphere-like volume
          const theta = Math.random() * Math.PI * 2;
          const phi = Math.acos((Math.random() * 2) - 1);
          const r = 4 + Math.random() * 2;
          
          home[i3] = r * Math.sin(phi) * Math.cos(theta);
          home[i3+1] = r * Math.sin(phi) * Math.sin(theta);
          home[i3+2] = r * Math.cos(phi);

          positions[i3] = home[i3];
          positions[i3+1] = home[i3+1];
          positions[i3+2] = home[i3+2];

          const color = colorPalette[Math.floor(Math.random() * colorPalette.length)];
          colors[i3] = color.r;
          colors[i3+1] = color.g;
          colors[i3+2] = color.b;
        }

        const geometry = new THREE.BufferGeometry();
        geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
        geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
        
        const material = new THREE.PointsMaterial({
          size: 0.025,
          vertexColors: true,
          transparent: true,
          opacity: 0.8,
          blending: THREE.AdditiveBlending
        });

        const points = new THREE.Points(geometry, material);
        scene.add(points);

        const mouse = { x: -999, y: -999, active: false };
        const raycaster = new THREE.Raycaster();
        const plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);

        window.addEventListener('mousemove', (e) => {
          const rect = canvas.getBoundingClientRect();
          const x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
          const y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
          
          raycaster.setFromCamera({x, y}, camera);
          const intersectPoint = new THREE.Vector3();
          raycaster.ray.intersectPlane(plane, intersectPoint);
          mouse.x = intersectPoint.x;
          mouse.y = intersectPoint.y;
          mouse.active = true;
        });

        window.addEventListener('mousedown', () => {
          for(let i = 0; i < count; i++) {
            const i3 = i * 3;
            const dx = positions[i3] - mouse.x;
            const dy = positions[i3+1] - mouse.y;
            const dist = Math.sqrt(dx*dx + dy*dy);
            if(dist < 1.5) {
              const force = (1.5 - dist) * 0.8;
              velocities[i3] += (dx / dist) * force;
              velocities[i3+1] += (dy / dist) * force;
            }
          }
        });

        function animate() {
          requestAnimationFrame(animate);
          const pos = points.geometry.attributes.position.array;
          
          for(let i = 0; i < count; i++) {
            const i3 = i * 3;
            
            // Attract to mouse
            if(mouse.active) {
              const dx = mouse.x - pos[i3];
              const dy = mouse.y - pos[i3+1];
              const dist = Math.sqrt(dx*dx + dy*dy);
              if(dist < 2.5) {
                const pull = (2.5 - dist) * 0.0005;
                velocities[i3] += dx * pull;
                velocities[i3+1] += dy * pull;
              }
            }

            // Return to home
            velocities[i3] += (home[i3] - pos[i3]) * 0.01;
            velocities[i3+1] += (home[i3+1] - pos[i3+1]) * 0.01;
            velocities[i3+2] += (home[i3+2] - pos[i3+2]) * 0.01;

            // Apply physics
            pos[i3] += velocities[i3];
            pos[i3+1] += velocities[i3+1];
            pos[i3+2] += velocities[i3+2];

            // Friction
            velocities[i3] *= 0.92;
            velocities[i3+1] *= 0.92;
            velocities[i3+2] *= 0.92;
          }
          
          points.geometry.attributes.position.needsUpdate = true;
          renderer.render(scene, camera);
        }

        animate();

        window.addEventListener('resize', () => {
          camera.aspect = window.innerWidth / window.innerHeight;
          camera.updateProjectionMatrix();
          renderer.setSize(window.innerWidth, window.innerHeight);
        });
      })();
    </script>
  </div>

  <!-- UI Overlay -->
  <nav class="absolute top-0 w-full z-20 px-6 py-8">
    <div class="max-w-7xl mx-auto flex justify-between items-center">
      <div class="flex items-center gap-2 group cursor-pointer">
        <div
          class="w-8 h-8 bg-emerald-500 rounded-sm rotate-45 group-hover:rotate-90 transition-transform duration-500">
        </div>
        <span class="text-xl font-black tracking-widest">AETHER<span class="text-emerald-500">CORE</span></span>
      </div>
      <div class="hidden md:flex gap-10 text-[10px] font-bold uppercase tracking-[0.3em] text-zinc-400">
        <a href="#" class="hover:text-emerald-400 transition-colors">Neural_Net</a>
        <a href="#" class="hover:text-emerald-400 transition-colors">Architecture</a>
        <a href="#" class="hover:text-emerald-400 transition-colors">Uplink</a>
      </div>
      <button class="bg-white/5 border border-white/10 px-4 py-2 text-[10px] font-bold uppercase tracking-widest hover:bg-emerald-500 hover:text-black transition-all">
        Contact_Unit
      </button>
    </div>
  </nav>

  <main class="relative z-10 flex flex-col items-center justify-center min-h-screen px-6 text-center">
    <div class="max-w-4xl">
      <div
        class="inline-flex items-center gap-3 px-4 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-[10px] font-bold uppercase tracking-widest mb-8 animate-pulse">
        <span class="relative flex h-2 w-2">
          <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
        <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
        </span>
        System Status: High Fidelity
      </div>

      <h1 class="text-5xl md:text-8xl font-black uppercase tracking-tighter leading-[0.85] mb-8">
        Defining the<br>
        <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-500">Neural Frontier</span>
      </h1>

      <p class="text-zinc-400 text-lg md:text-xl max-w-2xl mx-auto mb-12 font-light leading-relaxed">
        Building hyper-responsive digital ecosystems through autonomous spatial computing and next-generation vertex
        manipulation.
      </p>

      <div class="flex flex-col sm:flex-row items-center justify-center gap-6">
        <a href="#"
          class="group relative px-10 py-5 bg-white text-black font-black uppercase text-xs tracking-[0.2em] overflow-hidden transition-transform active:scale-95">
          <span class="relative z-10">Initialize Protocol</span>
          <div
            class="absolute inset-0 bg-emerald-500 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
          </div>
        </a>
        <a href="#"
          class="px-10 py-5 border border-white/20 hover:border-emerald-500/50 text-white font-black uppercase text-xs tracking-[0.2em] transition-all hover:bg-white/5">
          Review Archive
        </a>
      </div>
    </div>

    <!-- Data Ribbon -->
    <div
      class="absolute bottom-12 w-full max-w-7xl flex flex-wrap justify-between items-center gap-8 border-t border-white/5 pt-12 px-6">
      <div class="flex flex-col items-start">
        <span class="text-[10px] font-bold text-emerald-500 uppercase tracking-widest mb-1">Latency_Rating</span>
        <span class="text-2xl font-mono font-bold">14.002<span class="text-xs text-zinc-500 ml-1">MS</span></span>
      </div>
      <div class="flex flex-col items-start">
        <span class="text-[10px] font-bold text-emerald-500 uppercase tracking-widest mb-1">Active_Nodes</span>
        <span class="text-2xl font-mono font-bold">1,240<span class="text-xs text-zinc-500 ml-1">QTY</span></span>
      </div>
      <div class="flex flex-col items-start">
        <span class="text-[10px] font-bold text-emerald-500 uppercase tracking-widest mb-1">Uptime_Metric</span>
        <span class="text-2xl font-mono font-bold">99.99<span class="text-xs text-zinc-500 ml-1">%</span></span>
      </div>
      <div class="hidden lg:block">
        <div class="text-[10px] font-bold text-zinc-600 uppercase tracking-widest">Global Encryption Active // AES-256
        </div>
      </div>
    </div>
  </main>
</div>