--- title: "Particle Text Vortex — standalone source" description: "Luminous particles spiral out of a vortex and settle into glowing typographic forms, then dissolve and reform the next word." canonical: "https://fx.statico.io/effects/text-vortex.html" doc_version: "0.1.0" last_updated: "2026-07-27" date_modified: "2026-07-27T19:06:35-07:00" source: "https://github.com/statico/cool-web-fx" license: "Unlicense" --- > Canonical HTML version: # Particle Text Vortex — standalone source Luminous particles spiral out of a vortex and settle into glowing typographic forms, then dissolve and reform the next word. This is the raw, runnable artifact. The writeup, live preview and credit live on the demo page: (Markdown: ). ## Code ```html Particle Text Vortex

Particle Text Vortex

Luminous particles spiral out of a vortex and settle into glowing typographic forms, then dissolve and reform the next word.

How it works

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.

How to use this file

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.

Source and credit

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.

More

Terms used above are defined in the glossary. See also the site map, AGENTS.md and llms.txt.

``` ## Source & credit Effect seen on — credit to Original effect built for this gallery (not a recreation of any specific site). Independent recreation, built from scratch for educational use. ## Sitemap - [All effects](https://fx.statico.io/index.md) — gallery index - [Site map](https://fx.statico.io/sitemap.md) — every page, grouped - [sitemap.xml](https://fx.statico.io/sitemap.xml) — machine-readable, with lastmod - [AGENTS.md](https://fx.statico.io/AGENTS.md) — how to grab and reuse an effect - [skill.md](https://fx.statico.io/skill.md) — full agent skill file - [llms.txt](https://fx.statico.io/llms.txt) — short index of every effect - [Glossary](https://fx.statico.io/glossary.md) — terminology used in the writeups