Docs
Particle Text
Particle Text
Displays a beautiful Particle Text using framer-motion.
Installation
Copy and paste the Generate Text code into your project.
API Reference
The ParticleText component creates an interactive particle text effect that responds to mouse movement.
Currently, the component doesn't accept any props as it's self-contained with default text and styling.
Props
While the component doesn't currently accept props, here are some properties that could be implemented for customization:
| Potential Prop | Type | Description |
|---|---|---|
text | string | string[] | Text to display (single string or array for multiple lines) |
fontSize | number | Size of the font in pixels (default: 60) |
fontFamily | string | Font family to use (default: 'Arial') |
particleSize | number | Size of the text particles (default: 1.5) |
particleDensity | number | Density of particles in the text (lower number = more particles) |
backgroundColor | string | Background color of the canvas |
particleColor | string | Color of the text particles |
interactionRadius | number | Distance at which particles react to mouse (default: 100) |
particleSpeed | number | Speed of background floating particles |
Usage
export default function Demo() {
return (
<div className="flex h-[600px] flex-col items-center justify-center bg-black">
<ParticleText />
</div>
)
}