Three.js Scroll Circuit Board Trace — Self-Routing PCB Effect

<section class="pcb-stage" id="pcbStage">
  <div class="pcb-intro-overlay"><p>Scroll ↓ to route a circuit board trace by trace</p></div>
  <canvas id="pcbCanvas"></canvas>
  <div class="pcb-hud"><span id="pcbPct">0</span>% routed</div>
</section>
<section class="pcb-bottom"><p>Fully routed. All traces reach their chips.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#020806;color:#eafff5;font-family:system-ui,-apple-system,sans-serif}
.pcb-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#2e9c7a;font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:0 24px}
.pcb-stage{height:100vh;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#04160f 0%,#020806 75%)}
.pcb-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:#5bf7c9;font-size:15px;letter-spacing:.08em;text-transform:uppercase;transition:opacity .4s ease;text-shadow:0 0 12px rgba(91,247,201,.5)}
#pcbCanvas{display:block;width:100%;height:100%}
.pcb-hud{position:absolute;left:24px;bottom:24px;font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.14em;color:#5bf7c9;text-transform:uppercase;opacity:.9}

const canvas = document.getElementById('pcbCanvas');
const pctEl = document.getElementById('pcbPct');
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(50, 1, 0.1, 200);
camera.position.set(0, 26, 20);
camera.lookAt(0, 0, 0);

// Dark PCB board plane.
const board = new THREE.Mesh(
  new THREE.PlaneGeometry(40, 30),
  new THREE.MeshStandardMaterial({ color: 0x061511, roughness: 0.9 })
);
board.rotation.x = -Math.PI / 2;
scene.add(board);
scene.add(new THREE.AmbientLight(0x1a3328, 0.9));
const dl = new THREE.DirectionalLight(0x8affe0, 0.4);
dl.position.set(5, 20, 8);
scene.add(dl);

// --- Manhattan-routed trace generator -----------------------------------
// Each trace starts at a random point on the board edge and random-walks in
// axis-aligned (90-degree) steps toward a target "chip" position, like a
// simplified autorouter. The point list is flattened into a line geometry;
// "drawing" the trace is just growing THREE.BufferGeometry drawRange.
const CHIPS = [
  new THREE.Vector3(0, 0.05, 0),
  new THREE.Vector3(-10, 0.05, -6),
  new THREE.Vector3(11, 0.05, 5),
];
const TRACES_PER_CHIP = 6;

function routeTrace(start, target) {
  const pts = [start.clone()];
  let cur = start.clone();
  let guard = 0;
  while ((Math.abs(cur.x - target.x) > 0.4 || Math.abs(cur.z - target.z) > 0.4) && guard < 40) {
    guard++;
    const dx = target.x - cur.x, dz = target.z - cur.z;
    const stepLen = Math.min(2 + Math.random() * 2, Math.hypot(dx, dz));
    if (Math.abs(dx) > Math.abs(dz)) {
      cur = cur.clone(); cur.x += Math.sign(dx) * stepLen;
    } else {
      cur = cur.clone(); cur.z += Math.sign(dz) * stepLen;
    }
    pts.push(cur.clone());
  }
  pts.push(target.clone());
  return pts;
}

const traceObjs = [];
let traceOrder = 0;
const totalTraces = CHIPS.length * TRACES_PER_CHIP;
const cyan = new THREE.Color(0x5bf7c9);
const green = new THREE.Color(0x3dff7a);

CHIPS.forEach((chip) => {
  for (let i = 0; i < TRACES_PER_CHIP; i++) {
    const edge = Math.floor(Math.random() * 4);
    let sx, sz;
    if (edge === 0) { sx = -18 + Math.random() * 36; sz = -14; }
    else if (edge === 1) { sx = -18 + Math.random() * 36; sz = 14; }
    else if (edge === 2) { sx = -19; sz = -14 + Math.random() * 28; }
    else { sx = 19; sz = -14 + Math.random() * 28; }
    const start = new THREE.Vector3(sx, 0.05, sz);
    const pts = routeTrace(start, chip);

    const positions = new Float32Array(pts.length * 3);
    for (let p = 0; p < pts.length; p++) {
      positions[p * 3] = pts[p].x;
      positions[p * 3 + 1] = pts[p].y;
      positions[p * 3 + 2] = pts[p].z;
    }
    const geo = new THREE.BufferGeometry();
    geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
    geo.setDrawRange(0, 0);
    const col = cyan.clone().lerp(green, Math.random());
    const mat = new THREE.LineBasicMaterial({ color: col, transparent: true, opacity: 0.95 });
    const line = new THREE.Line(geo, mat);
    scene.add(line);

    // A slightly wider, dimmer additive halo copy underneath fakes a glow
    // without a postprocessing bloom pass.
    const haloMat = new THREE.LineBasicMaterial({ color: col, transparent: true, opacity: 0.35, blending: THREE.AdditiveBlending });
    const halo = new THREE.Line(geo, haloMat);
    scene.add(halo);

    traceObjs.push({ geo, vertCount: pts.length, order: traceOrder++, chip });
  }
});

// Chip boxes scale in once their traces have mostly arrived.
const chipMeshes = CHIPS.map((chip) => {
  const m = new THREE.Mesh(
    new THREE.BoxGeometry(2.4, 0.6, 2.4),
    new THREE.MeshStandardMaterial({ color: 0x0c2620, emissive: 0x2effb0, emissiveIntensity: 0.6, roughness: 0.4 })
  );
  m.position.copy(chip);
  m.position.y = 0.3;
  m.scale.set(0.001, 0.001, 0.001);
  scene.add(m);
  return m;
});

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

const form = { t: 0 };
gsap.to(form, {
  t: 1,
  ease: 'none',
  scrollTrigger: {
    trigger: '#pcbStage',
    start: 'top top',
    end: '+=420%',
    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();
}

function updateRouting(t) {
  for (let i = 0; i < traceObjs.length; i++) {
    const tr = traceObjs[i];
    const start = tr.order / totalTraces;
    const end = start + (1 / totalTraces) * 1.6;
    const g = Math.min(1, Math.max(0, (t - start) / (end - start)));
    const count = Math.round(g * tr.vertCount);
    tr.geo.setDrawRange(0, count);
  }
  chipMeshes.forEach((m, idx) => {
    const chipTraces = traceObjs.filter((tr) => tr.chip === CHIPS[idx]);
    const avg = chipTraces.reduce((s, tr) => s + Math.min(1, Math.max(0, (t - tr.order / totalTraces) / ((1 / totalTraces) * 1.6))), 0) / chipTraces.length;
    const s = Math.max(0.001, avg);
    m.scale.set(s, s, s);
  });
}

function animate() {
  requestAnimationFrame(animate);
  if (introEl) introEl.style.opacity = (form.t > 0.03) ? '0' : '1';
  const t = form.t;
  updateRouting(t);
  camera.position.set(Math.sin(t * 0.8) * 6, 26 - t * 8, 20 - t * 6);
  camera.lookAt(0, 0, 0);
  pctEl.textContent = Math.round(t * 100);
  renderer.render(scene, camera);
}

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