- Docs
- Components
- Text
- Particle Text
Text made of particles that scatter from the cursor
| 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). |
textstringThe text content to render as particles.
"brilliant."colorsstring[]Array of colors to randomly assign to particles.
["#40ffaa", "#40aaff", "#ff40aa", "#aa40ff"]particleSizenumberSize of individual particles in pixels.
2particleGapnumberGap between particles. Higher values reduce density.
2mouseControlsobjectConfiguration for mouse interaction behavior.
{ enabled: true, radius: 150, strength: 5 }fontSizenumberFont size of the text. When autoFit is enabled, this is the maximum font size.
200autoFitbooleanAutomatically scale font size to fit container width. Uses fontSize as maximum.
truebackgroundColorstringBackground color of the canvas.
"transparent"frictionnumberControls how quickly particles slow down (0-1).
0.75easenumberControls how quickly particles return to origin (0-1).
0.05