3D Neural Particle Hero with Node Trackers

<div class="relative w-full h-screen overflow-hidden bg-black text-white font-sans antialiased selection:bg-zinc-700">
  <style>
    .point-marker {
      position: absolute;
      width: 0;
      height: 0;
      pointer-events: none;
      z-index: 10;
    }

    .point-dot {
      position: absolute;
      width: 3px;
      height: 3px;
      background: #fff;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
    }

    .point-label {
      position: absolute;
      top: 10px;
      left: 10px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 8px;
      color: #000;
      background: rgba(255, 255, 255, 0.9);
      padding: 1px 4px;
      border-radius: 1px;
      white-space: nowrap;
      letter-spacing: 0.05em;
    }

    .point-corner {
      position: absolute;
      width: 8px;
      height: 8px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      transform: translate(-50%, -50%);
    }

    .pc-tl {
      border-width: 1px 0 0 1px;
      top: -3px;
      left: -3px;
    }

    .pc-br {
      border-width: 0 1px 1px 0;
      bottom: -3px;
      right: -3px;
    }

    #tracker-lines {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 5;
    }

    .svg-line {
      stroke: rgba(255, 255, 255, 0.1);
      stroke-width: 0.5;
    }

    .svg-line.active {
      stroke: rgba(255, 255, 255, 0.4);
      stroke-dasharray: 2 4;
      animation: dash 15s linear infinite;
    }

    @keyframes dash {
      to {
        stroke-dashoffset: -100;
      }
    }

    @keyframes fade-in {
      0% {
        opacity: 0;
        transform: translateY(10px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .animate-fade-in {
      animation: fade-in 1s ease-out forwards;
    }

    #tracker-blob {
      position: absolute;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0) 70%);
      border-radius: 50%;
      pointer-events: none;
      transform: translate(-50%, -50%);
      z-index: 0;
    }
  </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

  <div id="tracker-blob"></div>
  <svg id="tracker-lines"></svg>
  <div id="trackers-container"></div>
  <div id="canvas-container" class="absolute inset-0 z-1"></div>

  <main class="absolute inset-0 z-20 pointer-events-none">
    <header class="absolute top-8 left-8 md:left-12 animate-fade-in opacity-0" style="animation-delay: 0.2s;">
      <span class="font-mono text-[10px] font-bold tracking-[0.2em] text-zinc-500">NEURAL_CORE_V4.0.1</span>
    </header>

    <div class="absolute -translate-y-1/2 left-8 md:left-12 max-w-xl animate-fade-in opacity-0 top-[45%] z-30"
      style="animation-delay: 0.4s;">
      <h1 class="text-5xl md:text-7xl font-light tracking-tighter text-white leading-none">
        Synthetic<br /><span class="font-bold">Intelligence</span>
      </h1>
      <p class="mt-4 font-mono text-[10px] text-zinc-400 tracking-widest uppercase">Lattice Density: 0.042% / Active
        Nodes: 1,402</p>
    </div>
  </main>

  <script type="x-shader/x-vertex" id="vertexShader">
    uniform float uTime, uDistortion, uSize;
    uniform vec2 uMouse;
    varying float vAlpha;
    varying vec3 vPos;
    float snoise(vec3 v) {
      return fract(sin(dot(v, vec3(12.9898, 78.233, 45.164))) * 43758.5453);
    }
    void main() {
      vec3 pos = position;
      float noise = snoise(pos * 0.1 + uTime * 0.05);
      vec3 dir = normalize(pos);
      vec3 finalPos = pos + (dir * noise * uDistortion);
      float mDist = distance(uMouse * 8.0, finalPos.xy);
      finalPos += dir * smoothstep(5.0, 0.0, mDist) * 0.4;
      vec4 mvPos = modelViewMatrix * vec4(finalPos, 1.0);
      gl_Position = projectionMatrix * mvPos;
      gl_PointSize = uSize * (15.0 / -mvPos.z);
      vAlpha = 0.8; vPos = finalPos;
    }
  </script>

  <script type="x-shader/x-fragment" id="fragmentShader">
    uniform vec3 uColor; uniform float uOpacity;
    varying float vAlpha; varying vec3 vPos;
    void main() {
      if (length(gl_PointCoord - 0.5) > 0.5) discard;
      float alpha = smoothstep(0.5, 0.3, length(gl_PointCoord - 0.5)) * uOpacity * vAlpha;
      gl_FragColor = vec4(uColor, alpha);
    }
  </script>

  <script>
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x000000);
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
    camera.position.z = 25;
    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('canvas-container').appendChild(renderer.domElement);

    const mainGroup = new THREE.Group();
    mainGroup.position.x = window.innerWidth < 768 ? 0 : 5;
    scene.add(mainGroup);

    const uniforms = {
      uTime: { value: 0 }, uDistortion: { value: 0.8 }, uSize: { value: 1.8 },
      uColor: { value: new THREE.Color('#ffffff') }, uOpacity: { value: 0.6 },
      uMouse: { value: new THREE.Vector2(0, 0) }
    };

    const particleMesh = new THREE.Points(new THREE.SphereGeometry(5, 64, 64), new THREE.ShaderMaterial({
      vertexShader: document.getElementById('vertexShader').textContent,
      fragmentShader: document.getElementById('fragmentShader').textContent,
      uniforms: uniforms, transparent: true, depthWrite: false
    }));
    mainGroup.add(particleMesh);

    const pts = [
      { pos: new THREE.Vector3(0, 3, 3), label: 'NODE_ALPHA_01' },
      { pos: new THREE.Vector3(-3, -1, 3.5), label: 'NODE_BETA_02' },
      { pos: new THREE.Vector3(3, -2, 2.5), label: 'NODE_GAMMA_03' }
    ];
    pts.forEach(p => {
      const d = document.createElement('div');
      d.className = 'point-marker';
      d.innerHTML = `<div class="point-dot"></div><div class="point-corner pc-tl"></div><div class="point-corner pc-br"></div><div class="point-label">${p.label}</div>`;
      document.getElementById('trackers-container').appendChild(d);
      p.el = d;
    });

    const lines = [[0,1], [1,2], [2,0]].map(pair => {
      const l = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      l.setAttribute('class', pair[0] === 0 ? 'svg-line active' : 'svg-line');
      document.getElementById('tracker-lines').appendChild(l);
      return { el: l, p1: pair[0], p2: pair[1] };
    });

    document.addEventListener('mousemove', (e) => {
      uniforms.uMouse.value.set((e.clientX/window.innerWidth)*2-1, -(e.clientY/window.innerHeight)*2+1);
      const b = document.getElementById('tracker-blob');
      b.style.left = e.clientX + 'px'; b.style.top = e.clientY + 'px';
    });

    function animate(t) {
      requestAnimationFrame(animate);
      uniforms.uTime.value = t * 0.001;
      particleMesh.rotation.y += 0.001;
      particleMesh.rotation.x += 0.0005;
      
      const screenPts = pts.map(p => {
        const v = p.pos.clone().applyEuler(particleMesh.rotation).applyMatrix4(particleMesh.matrix).applyMatrix4(mainGroup.matrixWorld).project(camera);
        const x = (v.x * .5 + .5) * window.innerWidth, y = (-(v.y * .5) + .5) * window.innerHeight;
        p.el.style.transform = `translate(${x}px, ${y}px)`;
        return {x, y};
      });

      lines.forEach(l => {
        l.el.setAttribute('x1', screenPts[l.p1].x); l.el.setAttribute('y1', screenPts[l.p1].y);
        l.el.setAttribute('x2', screenPts[l.p2].x); l.el.setAttribute('y2', screenPts[l.p2].y);
      });
      renderer.render(scene, camera);
    }
    requestAnimationFrame(animate);
    window.addEventListener('resize', () => {
      camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
      mainGroup.position.x = window.innerWidth < 768 ? 0 : 5;
    });
  </script>
</div>