Three.js Scroll Text Particles — GSAP Word Formation Effect

The Three.js Scroll Text Particles snippet scatters a cloud of glowing points and flies them into the exact shape of a word as the visitor scrolls — the scrollbar drives the formation directly, not a timer — by sampling text from a hidden 2D canvas and animating a Three.js Points cloud with GSAP's ScrollTrigger plugin, all loaded from a CDN.

Text becomes targets by sampling a 2D canvas

The clever part is how the word turns into 3D positions without any font loader or extruded text geometry. The word is drawn once to an offscreen <canvas>, then getImageData gives the raw pixels. The code walks the pixel grid on a stride, and every pixel whose alpha is above a threshold becomes one target position — its canvas X/Y mapped into scene space, with a tiny random Z so the word has a little thickness. Change the WORD string and the particle field reshapes itself automatically; the technique works for any text, or a logo drawn to the same canvas.

Sampling stride controls density

A step of 3 means every third pixel in each axis becomes a particle. Lowering it packs in more, denser particles for crisp, readable type; raising it thins the word into a sparse, impressionistic form. This one number trades particle count (and therefore GPU cost) against legibility, letting the same code scale from a light accent to a dense, solid word.

Two positions per particle, blended by scroll

Exactly as in a general particle assembly, each point stores a random scattered position and its sampled text target. Scroll moves a single value p from 0 to 1, and every frame the live position is a linear blend between the two. Because the expensive text sampling happens once at startup, each frame is only cheap arithmetic — the word forms and dissolves smoothly no matter how many particles the sampling produced.

Smooth-step so the word snaps into focus

The raw scroll progress is passed through the p * p * (3 - 2p) smooth-step curve before driving the blend, so the particles ease into their letters rather than arriving at a constant rate. The word appears to resolve and lock into legibility near the end of the scroll, which a linear blend never delivers.

Additive glow and a float once formed

The PointsMaterial uses additive blending with depth writes off, so overlapping particles glow toward white and the letters read as luminous rather than flat. A gentle sway — scaled by p so it only kicks in once the word is formed — keeps the finished type floating instead of sitting rigidly, and disappears again as the word dissolves.

scrub: 0.5, pinned, fully reversible

A small numeric scrub smooths the formation against noisy input, and pinning gives the word room to assemble gradually. This shares its engine with the scroll particle assembly snippet, which targets a sphere instead of sampled text. Pair it with a scroll tunnel intro or dissolve the word into a depth parallax field.