Text effects

Particle formation text

A canvas of tiny particles that gathers into the shape of a word, drifts once formed, and scatters away from the pointer.

Move the pointer through the letters to push particles aside. Click, or press Enter after tabbing in, to scatter and reform.

Using Particle formation text

A canvas of tiny particles that gathers into the shape of a word, drifts once formed, and scatters away from the pointer.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: text, density, scatter, color, highlightColor

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2807Fuzzy static textText effectsA word drawn on canvas and repainted in jittering scan-lines, buzzing like television static and distorting harder on hover or press.

2405Pointer scatter headlineText effectsA headline split into single characters that shove aside and tumble as the pointer sweeps through them, then drift back into line.

2307Blur in word revealText effectsWords in a sentence resolve from a soft blur into sharp focus one after another as the sentence scrolls into view.

2825Character shuffle revealText effectsEach character rolls through a strip of random glyphs like a slot reel before landing on the real letter, revealed on scroll with hover replay.

2317Cipher reveal textText effectsA label that starts scrambled into random symbols and decrypts into its real text on view, hover, or click.

2136Cube flip lettersText effectsHovering a line turns every letter a quarter turn in 3D, one after another from a chosen origin, revealing a second face that carries the same glyph in the accent.