Particle Assemble Text 2.0
A word made of up to a quarter of a million GPU particles: each springs to a point on the glyphs and rides a curl-noise current on the way, words morph into each other, the pointer stirs a vortex through the letters and a click sends a shockwave.
WebGL20 deps1 file · 28 KB TSXreduced-motion aware
Props
"use client"; /* * ParticleAssembleText2: a word made of a couple of hundred thousand GPU * particles. * * Every particle is simulated on the GPU (WebGL2 transform feedback, two * buffers ping-ponged each frame). Each has a home sampled from the glyphs of * the current word, a spring that pulls it there, and a curl-noise current * that carries it on the way: far from home it rides the current in long * curls, close to home the current shrinks to a shimmer, so the settled word * breathes. Changing word gives every particle a new home and they flow * across. The pointer stirs a vortex through the letters, a click sends out a * shockwave, and a tenth of the particles are loose dust that drifts through * the field. Fast particles run hot (the accent colour), and they are drawn * as additive light, so the word glows where it is dense. * * The words are real text for assistive tech; the canvas is decorative. // --------------------------------------------------------------- // Full source available with a viberdy Pro subscription. // https://viberdy.dev/pricing // --------------------------------------------------------------- }
Details
About this text effect
A headline poured out of light. Every particle is simulated on the GPU, two buffers ping-ponged each frame: each has a home sampled from the glyphs of the current word, a spring of its own stiffness that pulls it there, and a curl-noise current that carries it on the way. Far from home it rides the current in long curls; close to home the current shrinks to a shimmer, so the settled word breathes instead of freezing. When the word changes every particle gets a new home and the whole word flows across into the next, the current running stronger for a moment after each change. Move the pointer through it and a vortex stirs the letters, carrying them along with your hand; click and a shockwave rings out and throws them clear, and the springs bring them home. A tenth of the particles are loose dust drifting through the field. Fast particles run hot in the accent colour, and everything is drawn as additive light, so the letters glow where they are dense; brightness is balanced against how many particles land on each inked pixel, so a short word and a long one glow alike. The particle count follows the size of the field and a density setting.
Curator’s note
Particle Assemble Text, rebuilt as a premium 2.0 beside the original. The first one eases a few thousand canvas dots; this one simulates up to a quarter of a million particles on the GPU with WebGL2 transform feedback, in a curl-noise current, with morphing words, a pointer vortex and a click shockwave. One file, no dependencies.
