Luminous particles spiral out of a vortex and settle into glowing typographic forms, then dissolve and reform the next word.
Each word is rendered at large size into an offscreen <canvas>, then getImageData() collects every lit pixel. Those pixels — sampled at a stride of every 4px to cap the particle count near 6 000 — become the target positions that particles spring toward.
At the start of each cycle particles are seeded at random positions on a wide spiral around the canvas centre. A spring-damper model (velocity += (target - pos) * k; velocity *= damping) pulls each particle inward. A per-particle curl nudge — a slow sinusoidal perpendicular offset keyed to the particle's phase and performance.now() — keeps the settled shape from ever looking frozen.
The demo cycles through a list of words: after a settle dwell, all particles enter a dissolve phase where they drift outward along their current angle and fade, then the next word's targets are assigned and particles fly in from a fresh vortex scatter. A radial gradient drawn in 'lighter' composite mode adds a soft backlit glow around the letterforms while they form and hold.
Performance stays smooth by capping devicePixelRatio at 2, thinning sampled points to MAX_PARTICLES, and using a semi-transparent clear each frame (rgba(10,10,15,0.30)) to leave a motion-blur trail without a second layer.
This is an original effect built for this gallery — it is not a recreation of any particular website.
This is a complete, self-contained HTML document — copy it verbatim rather than reconstructing it. Markdown version: https://fx.statico.io/effects/text-vortex.md. Full writeup and live preview: https://fx.statico.io/demos/text-vortex.
Effect originally seen on Original effect (https://github.com/statico/cool-web-fx) — credit to Original effect built for this gallery (not a recreation of any specific site). This is an independent recreation built from scratch for educational use; no proprietary source code was copied. Released under the Unlicense.
Terms used above are defined in the glossary. See also the site map, AGENTS.md and llms.txt.