Three.js Scroll Particle Assembly — GSAP Effect

The Three.js Scroll Particle Assembly snippet starts with a cloud of 2,600 scattered points and pulls each one into an ordered sphere as the visitor scrolls — the scrollbar drives the assembly progress directly, not a timer — using a Three.js Points cloud and GSAP's ScrollTrigger plugin, both loaded from a CDN.

Two positions per particle, blended by one number

The core idea is that every particle carries two pre-computed 3D coordinates: a random "scattered" position in a loose box of noise, and an ordered "target" position on the surface of a sphere. Neither is ever recomputed. Scroll only moves a single value p from 0 to 1, and each frame the live position is a straight linear interpolation between the two stored coordinates. This is dramatically cheaper than physics or per-particle easing, because the expensive random layout is done once at startup and every frame is just addition and multiplication.

A Fibonacci sphere for an even assembled shape

If the target positions were random points on a sphere, the assembled form would look clumpy and uneven. Instead the targets use the golden-angle spiral (a Fibonacci sphere): each particle's Y is stepped evenly from top to bottom and its angle advances by the golden angle of about 2.39963 radians. This spreads the points across the surface with almost no clustering, so the moment of full assembly reads as a clean, deliberate sphere rather than a noisy blob.

Smooth-step so the assembly eases

The raw scrubbed progress is passed through the classic smooth-step curve p * p * (3 - 2p) before it drives the interpolation. This means the particles accelerate out of the scattered state and decelerate into the assembled state, rather than crossing at a constant, mechanical rate. The visitor feels the shape "settling" into place at the end of the scroll, which a linear blend never achieves.

One BufferAttribute updated in place

All 2,600 positions live in a single Float32Array backing a BufferAttribute. Each frame the loop rewrites that array in place and sets needsUpdate = true, so there is exactly one geometry upload per frame regardless of particle count. Colors are set once at startup from each particle's height and never touched again, keeping the per-frame work to position math only.

Additive blending for a glowing cloud

The PointsMaterial uses additive blending with depthWrite disabled, so where particles overlap their colors add toward white and the cloud glows from within. Disabling depth writes prevents the sorting artifacts that otherwise plague large transparent point clouds, and the slight constant Y rotation keeps the shape alive even when the visitor pauses mid-scroll.

scrub: 0.5 and a live status label

A small numeric scrub smooths the assembly against noisy input, and ScrollTrigger's onUpdate callback reads self.progress to swap a caption between "Scattered", "Assembling…", and "Assembled". This same scatter-to-target pattern powers the scroll text grid snippet, which targets a flat grid instead of a sphere. Contrast it with the physically-simulated magnetic particles or pair it with a starfield warp intro.