Docs
Particle Text

Particle Text

Displays a beautiful Particle Text using framer-motion.

Loading...

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 PropTypeDescription
textstring | string[]Text to display (single string or array for multiple lines)
fontSizenumberSize of the font in pixels (default: 60)
fontFamilystringFont family to use (default: 'Arial')
particleSizenumberSize of the text particles (default: 1.5)
particleDensitynumberDensity of particles in the text (lower number = more particles)
backgroundColorstringBackground color of the canvas
particleColorstringColor of the text particles
interactionRadiusnumberDistance at which particles react to mouse (default: 100)
particleSpeednumberSpeed 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>
  )
}