Particle Text

Interactive 3D particle text with WebGL

particle-text-tw

Tweak the props live

Font Size200

Auto Fit

Particle Size2

Particle Gap2

Friction0.75

Ease0.05

Mouse Radius150

Mouse Strength5

Name	Type	Default	Description
`text`	string	`"brilliant."`	The text content to render as particles.
`colors`	string[]	`["#40ffaa", "#40aaff", "#ff40aa", "#aa40ff"]`	Array of colors to randomly assign to particles.
`particleSize`	number	`2`	Size of individual particles in pixels.
`particleGap`	number	`2`	Gap between particles. Higher values reduce density.
`mouseControls`	object	`{ enabled: true, radius: 150, strength: 5 }`	Configuration for mouse interaction behavior.
`fontSize`	number	`200`	Font size of the text. When autoFit is enabled, this is the maximum font size.
`autoFit`	boolean	`true`	Automatically scale font size to fit container width. Uses fontSize as maximum.
`backgroundColor`	string	`"transparent"`	Background color of the canvas.
`friction`	number	`0.75`	Controls how quickly particles slow down (0-1).
`ease`	number	`0.05`	Controls how quickly particles return to origin (0-1).

textstring

The text content to render as particles.

Default:"brilliant."

colorsstring[]

Array of colors to randomly assign to particles.

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

particleSizenumber

Size of individual particles in pixels.

Default:2

particleGapnumber

Gap between particles. Higher values reduce density.

Default:2

mouseControlsobject

Configuration for mouse interaction behavior.

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

fontSizenumber

Font size of the text. When autoFit is enabled, this is the maximum font size.

Default:200

autoFitboolean

Automatically scale font size to fit container width. Uses fontSize as maximum.

Default:true

backgroundColorstring

Background color of the canvas.

Default:"transparent"

frictionnumber

Controls how quickly particles slow down (0-1).

Default:0.75

easenumber

Controls how quickly particles return to origin (0-1).

Default:0.05