Logo
React Bytes
Menu

Particle Text

Customize

Text
Font Size (px)200
Particle Size (px)2
Particle Gap (px)2
Mouse Radius (px)150
Mouse Strength5
Friction0.75
Ease0.05
ASCII Characters

Props

textstring

Text rasterized to sample particle positions from.

Default"creative."
colorsstring[]

Palette randomly assigned to each particle.

Default["#40ffaa","#40aaff","#ff40aa","#aa40ff"]
particleSizenumber

Diameter of each particle in pixels.

Default2
particleGapnumber

Spacing between sampled particle points in pixels.

Default2
fontSizenumber

Base font size used to rasterize the text.

Default200
autoFitboolean

Automatically shrinks font size to fit the container.

Defaulttrue
mouseControlsobject

Pointer repulsion settings: enabled, radius (px), strength (force multiplier).

Default{ enabled: true, radius: 150, strength: 5 }
frictionnumber

Velocity damping applied each frame, 0-1.

Default0.75
easenumber

Spring pull strength back toward the sampled base position.

Default0.05
shapestring

Particle render shape: "square", "circle", or "ascii".

Default"ascii"
asciiCharsstring

Character pool each particle randomly picks from when shape is "ascii".

Default"mew"
backgroundColorstring

Canvas background color, or "transparent".

Default"transparent"
classNamestring

Extra classes applied to the root wrapper.

Default""

Crafted withbyMohammad Tasin