Three.js Scroll Particle Assembly — GSAP Effect

<section class="pas-top"><p>Scroll ↓ to assemble</p></section>
<section class="pas-stage" id="pasStage">
  <canvas id="pasCanvas"></canvas>
  <h2 class="pas-label" id="pasLabel">Scattered</h2>
</section>
<section class="pas-bottom"><p>Every point found its place.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#060810;color:#fff;font-family:system-ui,-apple-system,sans-serif}
.pas-top,.pas-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#767ea0;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.pas-stage{height:100vh;position:relative;overflow:hidden;background:radial-gradient(60% 60% at 50% 45%,#111634,#060810)}
#pasCanvas{display:block;width:100%;height:100%}
.pas-label{position:absolute;left:0;right:0;bottom:34px;text-align:center;font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:#a5b4fc;pointer-events:none}

const canvas = document.getElementById('pasCanvas');
const label = document.getElementById('pasLabel');
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(60, 1, 0.1, 100);
camera.position.set(0, 0, 7);

const COUNT = 2600;
// Two coordinate sets are pre-computed for every particle: a random cloud
// "scattered" position, and an ordered "target" position on the surface of a
// sphere. Scroll blends each particle from its scattered spot to its target.
const scattered = new Float32Array(COUNT * 3);
const target = new Float32Array(COUNT * 3);
const positions = new Float32Array(COUNT * 3);
const colors = new Float32Array(COUNT * 3);

for (let i = 0; i < COUNT; i++) {
  const i3 = i * 3;
  // Scattered: a loose box of noise around the origin.
  scattered[i3]     = (Math.random() - 0.5) * 16;
  scattered[i3 + 1] = (Math.random() - 0.5) * 16;
  scattered[i3 + 2] = (Math.random() - 0.5) * 16;
  // Target: an even Fibonacci-sphere distribution so the assembled shape is
  // smooth rather than clumpy.
  const y = 1 - (i / (COUNT - 1)) * 2;
  const r = Math.sqrt(1 - y * y);
  const theta = i * 2.399963229728653; // golden angle
  target[i3]     = Math.cos(theta) * r * 2.4;
  target[i3 + 1] = y * 2.4;
  target[i3 + 2] = Math.sin(theta) * r * 2.4;

  const c = new THREE.Color().setHSL(0.55 + (y + 1) * 0.12, 0.75, 0.6);
  colors[i3] = c.r; colors[i3 + 1] = c.g; colors[i3 + 2] = c.b;
}
positions.set(scattered);

const geo = new THREE.BufferGeometry();
geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
geo.setAttribute('color', new THREE.BufferAttribute(colors, 3));
const points = new THREE.Points(geo, new THREE.PointsMaterial({
  size: 0.05, vertexColors: true, transparent: true, opacity: 0.9,
  blending: THREE.AdditiveBlending, depthWrite: false,
}));
scene.add(points);

gsap.registerPlugin(ScrollTrigger);

// 'p' is the assembly progress, 0 = fully scattered, 1 = fully assembled.
const state = { p: 0 };
gsap.to(state, {
  p: 1,
  ease: 'none',
  scrollTrigger: {
    trigger: '#pasStage',
    start: 'top top',
    end: '+=350%',
    scrub: 0.5,
    pin: true,
    onUpdate: (self) => {
      const v = self.progress;
      label.textContent = v < 0.15 ? 'Scattered' : v > 0.85 ? 'Assembled' : 'Assembling…';
    },
  },
});

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

function animate() {
  requestAnimationFrame(animate);
  // Smooth-step the raw progress so the assembly eases in and out.
  const p = state.p * state.p * (3 - 2 * state.p);
  const arr = posAttr.array;
  for (let i = 0; i < COUNT; i++) {
    const i3 = i * 3;
    arr[i3]     = scattered[i3]     + (target[i3]     - scattered[i3])     * p;
    arr[i3 + 1] = scattered[i3 + 1] + (target[i3 + 1] - scattered[i3 + 1]) * p;
    arr[i3 + 2] = scattered[i3 + 2] + (target[i3 + 2] - scattered[i3 + 2]) * p;
  }
  posAttr.needsUpdate = true;

  points.rotation.y += 0.0016;
  renderer.render(scene, camera);
}

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