Background Particles

Particles Background with Animated Text.

Live Preview
Open in

Particles Background

Make your website stand out

Motion

Installation

npm install motion

Usage

import ParticlesBackground from "@/components/xui/particles-background";

export function MyComponent() {
  return (
    <div className="relative min-h-screen">
      <ParticlesBackground
        title="Custom Title"
        subtitle="Custom subtitle"
        particleCount={1500}
        noiseIntensity={0.002}
        particleSize={{ min: 0.5, max: 2 }}
      />
    </div>
  );
}

Props

PropTypeDefaultDescription
titlestring"Particles Background"Main title text
subtitlestring"Make your website stand out"Subtitle text
particleCountnumber2000Number of particles to render
noiseIntensitynumber0.003Intensity of noise animation
particleSize{ min: number, max: number }{ min: 0.5, max: 2 }Particle size range
classNamestring-Additional CSS classes

Dependencies

This component requires the following packages:

  • motion (framer-motion)