Docs/Particle Galaxy

Particle Galaxy

A stunning 3D particle system that creates an interactive spiral galaxy using Three.js and custom WebGL shaders. Features smooth mouse-controlled rotation, realistic particle distribution, and extensive customization options.

Installation

$pnpm dlx shadcn@latest add @componentry/particle-galaxy

Usage

API Reference

PropTypeDefault
particleCountNumber of particles in the galaxy.
number10000
particleSizeBase size of individual particles.
number0.02
rotationSpeedSpeed of automatic galaxy rotation.
number0.001
spiralArmsNumber of spiral arms in the galaxy.
number3
colorsArray of 3 hex colors for galaxy coloring.
[string, string, string]["#4f46e5", "#8b5cf6", "#06b6d4"]
mouseInfluenceStrength of mouse interaction, 0-1.
number0.5
autoRotateEnable automatic rotation.
booleantrue
blendModeBlend mode for particles.
"additive" | "normal""additive"
spreadHow spread out the galaxy is, 1-5.
number2.5
densityParticle opacity/density, 0-1.
number0.7
glowGlow intensity around particles, 0-100.
number60
cameraMovementEnable gentle camera movement.
booleantrue
centerConcentrationConcentration of particles toward center, 0-1.
number0.5
pulsateEnable particle pulsation animation.
booleantrue
pulsateSpeedSpeed of particle pulsation, 0.1-2.
number1

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@harshjdhv
import { ParticleGalaxy } from "@/components/ui/particle-galaxy"

export default function Hero() {
  return (
    <div className="relative h-screen w-full">
      <ParticleGalaxy />
      <div className="relative z-10 flex items-center justify-center h-full">
        <h1 className="text-6xl font-bold">Your Content Here</h1>
      </div>
    </div>
  )
}