Three.js Scroll Neural Network Pulse — Layered Graph Assembly

<section class="nnp-stage" id="nnpStage">
  <div class="nnp-intro-overlay"><p>Scroll ↓ to assemble the network and fire signal pulses</p></div>
  <canvas id="nnpCanvas"></canvas>
  <div class="nnp-hud"><span id="nnpPct">0</span>% connected</div>
</section>
<section class="nnp-bottom"><p>A fully wired network, pulsing signals layer to layer.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#03050a;color:#fff;font-family:system-ui,-apple-system,sans-serif}
.nnp-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#7fd4e0;font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:0 24px}
.nnp-stage{height:100vh;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#08101c 0%,#03050a 70%)}
.nnp-intro-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;pointer-events:none;z-index:5;color:#7fd4e0;font-size:15px;letter-spacing:.08em;text-transform:uppercase;transition:opacity .4s ease;}
#nnpCanvas{display:block;width:100%;height:100%}
.nnp-hud{position:absolute;left:24px;bottom:24px;font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.14em;color:#9ff0e0;text-transform:uppercase;opacity:.85}

const canvas = document.getElementById('nnpCanvas');
const pctEl = document.getElementById('nnpPct');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(52, 1, 0.1, 200);
camera.position.set(0, 2, 24);
camera.lookAt(0, 0, 0);
scene.add(new THREE.AmbientLight(0x224455, 1.2));
const key = new THREE.PointLight(0x5ee6ff, 1.4, 100);
key.position.set(10, 10, 18);
scene.add(key);

// Layered layout: LAYER_SIZES defines how many nodes sit in each layer. Nodes
// start at scattered random positions and assemble into a neat layered grid.
const LAYER_SIZES = [5, 8, 8, 4];
const LAYER_X = [-9, -3, 3, 9];
const nodes = [];
LAYER_SIZES.forEach((size, li) => {
  for (let i = 0; i < size; i++) {
    const target = new THREE.Vector3(LAYER_X[li], (i - (size - 1) / 2) * 2.1, 0);
    const scatter = new THREE.Vector3(
      (Math.random() - 0.5) * 30,
      (Math.random() - 0.5) * 20,
      (Math.random() - 0.5) * 20
    );
    nodes.push({ layer: li, indexInLayer: i, target, scatter, live: scatter.clone() });
  }
});

const nodeGeo = new THREE.SphereGeometry(0.32, 14, 14);
const nodeMat = new THREE.MeshStandardMaterial({ color: 0x5ee6ff, emissive: 0x0d3a44, roughness: 0.4, metalness: 0.3 });
const nodeMesh = new THREE.InstancedMesh(nodeGeo, nodeMat, nodes.length);
scene.add(nodeMesh);
const dummy = new THREE.Object3D();

// Connections: every node in layer L links to every node in layer L+1. Stored
// as index pairs; live endpoints are read from nodes[].live each frame into a
// single LineSegments BufferGeometry so the whole web is one draw call.
const links = [];
let offset = 0;
for (let li = 0; li < LAYER_SIZES.length - 1; li++) {
  const a0 = offset, aCount = LAYER_SIZES[li];
  const b0 = offset + aCount, bCount = LAYER_SIZES[li + 1];
  for (let i = 0; i < aCount; i++) {
    for (let j = 0; j < bCount; j++) links.push([a0 + i, b0 + j]);
  }
  offset += aCount;
}

const linePositions = new Float32Array(links.length * 2 * 3);
const lineGeo = new THREE.BufferGeometry();
lineGeo.setAttribute('position', new THREE.BufferAttribute(linePositions, 3));
const lineMat = new THREE.LineBasicMaterial({ color: 0x2f6f7a, transparent: true, opacity: 0.35 });
const lineSegments = new THREE.LineSegments(lineGeo, lineMat);
scene.add(lineSegments);

// Pulses: small glowing points traveling along a subset of links once the
// network is mostly formed. Reused pool, no per-frame allocation.
const PULSE_COUNT = 40;
const pulseGeo = new THREE.SphereGeometry(0.12, 6, 6);
const pulseMat = new THREE.MeshBasicMaterial({ color: 0xbafff0 });
const pulseMesh = new THREE.InstancedMesh(pulseGeo, pulseMat, PULSE_COUNT);
scene.add(pulseMesh);
const pulses = [];
for (let i = 0; i < PULSE_COUNT; i++) {
  pulses.push({ link: links[Math.floor(Math.random() * links.length)], progress: Math.random(), speed: 0.4 + Math.random() * 0.5 });
}

const introEl = document.querySelector('.nnp-intro-overlay');
gsap.registerPlugin(ScrollTrigger);

const form = { t: 0 };
gsap.to(form, {
  t: 1,
  ease: 'none',
  scrollTrigger: {
    trigger: '#nnpStage',
    start: 'top top',
    end: '+=450%',
    scrub: 0.6,
    pin: true,
  },
});

function resize() {
  const w = canvas.clientWidth, h = canvas.clientHeight;
  renderer.setSize(w, h, false);
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
}

const pA = new THREE.Vector3(), pB = new THREE.Vector3();

function animate() {
  requestAnimationFrame(animate);
  if (introEl) introEl.style.opacity = (form.t > 0.03) ? '0' : '1';

  const t = form.t;
  const eased = t * t * (3 - 2 * t);

  for (let i = 0; i < nodes.length; i++) {
    const n = nodes[i];
    n.live.copy(n.scatter).lerp(n.target, eased);
    dummy.position.copy(n.live);
    dummy.scale.setScalar(0.7 + eased * 0.4);
    dummy.updateMatrix();
    nodeMesh.setMatrixAt(i, dummy.matrix);
  }
  nodeMesh.instanceMatrix.needsUpdate = true;

  const posArr = lineGeo.getAttribute('position').array;
  for (let i = 0; i < links.length; i++) {
    const [ai, bi] = links[i];
    const la = nodes[ai].live, lb = nodes[bi].live;
    const ix = i * 6;
    posArr[ix] = la.x; posArr[ix + 1] = la.y; posArr[ix + 2] = la.z;
    posArr[ix + 3] = lb.x; posArr[ix + 4] = lb.y; posArr[ix + 5] = lb.z;
  }
  lineGeo.getAttribute('position').needsUpdate = true;
  lineMat.opacity = 0.06 + eased * 0.34;

  // Pulses only travel visibly once the network is mostly assembled; their
  // opacity/scale is gated by eased so they fade in rather than popping.
  const pulseVisible = Math.max(0, (eased - 0.55) / 0.45);
  for (let i = 0; i < PULSE_COUNT; i++) {
    const p = pulses[i];
    p.progress += 0.006 * p.speed;
    if (p.progress > 1) {
      p.progress = 0;
      p.link = links[Math.floor(Math.random() * links.length)];
    }
    const la = nodes[p.link[0]].live, lb = nodes[p.link[1]].live;
    pA.copy(la).lerp(lb, p.progress);
    dummy.position.copy(pA);
    dummy.scale.setScalar(pulseVisible > 0.02 ? 1 : 0.0001);
    dummy.updateMatrix();
    pulseMesh.setMatrixAt(i, dummy.matrix);
  }
  pulseMesh.instanceMatrix.needsUpdate = true;

  const camDist = 24 - eased * 5;
  camera.position.set(0, 2 - eased, camDist);
  camera.lookAt(0, 0, 0);

  pctEl.textContent = Math.round(eased * 100);
  renderer.render(scene, camera);
}

resize();
window.addEventListener('resize', resize);
animate();