Sparkles

Animated particle sparkle effect using tsparticles. Creates a magical, twinkling background perfect for hero sections.

Preview

Magical Sparkles

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/sparkles.json

Usage

tsx
21 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { SparklesCore } from "@/components/ui/sparkles"

export default function Hero() {
  return (
    <div className="relative h-screen w-full bg-black">
      <div className="w-full absolute inset-0">
        <SparklesCore
          id="hero-sparkles"
          background="transparent"
          minSize={0.6}
          maxSize={1.4}
          particleDensity={100}
          particleColor="#FFFFFF"
        />
      </div>
      <div className="relative z-10">
        {/* Your content here */}
      </div>
    </div>
  )
}

Examples

Colored Sparkles

Golden Sparkles

Dense Particles

Dense & Fast

Props

PropTypeDefaultDescription
idstringauto-generatedUnique identifier for the particle container
backgroundstring#0d47a1Background color of the sparkles container
minSizenumber1Minimum size of particles in pixels
maxSizenumber3Maximum size of particles in pixels
speednumber4Animation speed of the particles
particleColorstring#ffffffColor of the sparkle particles
particleDensitynumber120Number of particles to render
classNamestringundefinedAdditional CSS classes for the container