AceUi

Particle Background

A highly customizable animated particle background with dots and lines that move in various directions with smooth performance.

The ParticleBackground component creates stunning animated backgrounds with flowing particles, dots, and lines , perfect for hero sections, landing pages, and immersive experiences

Installation

1npx shadcn@latest add "https://ace-ui-six.vercel.app/r/particle-background.json"

Usage

1import { ParticleBackground } from "@/components/particle-background";
2

3export default function Example() {
4return (
5  <div className="relative w-full min-h-screen flex items-center justify-center text-white overflow-hidden">
6   
7    <ParticleBackground
8      direction="left-to-right"
9      speed={50} // 50 pixels per second
10      maxParticles={150}
11      dotsEnabled={true}
12      dotColor="#a78bfa" // Purple dots
13      dotSize={2}
14      dotOpacity={0.6}
15      linesEnabled={true}
16      lineColor="#60a5fa" // Blue lines
17      lineWidth={1}
18      lineLength={8}
19      lineOpacity={0.5}
20      backgroundColor="#0f0f0f" // Dark background
21      glow={true}
22      fadeEdges={true}
23    />
24  </div>
25);
26}

Features

  • Six movement directions: left-to-right, right-to-left, top-to-bottom, bottom-to-top, diagonal
  • Separate customization for dots and lines (colors, sizes, opacity)
  • Responsive canvas that adapts to screen size and device pixel ratio
  • Optional glow effects for enhanced visual appeal
  • Edge fading effect for seamless integration
  • Configurable particle count and animation speed

Props

PropTypeDefaultDescription
direction'left-to-right' | 'right-to-left' | 'top-to-bottom' | 'bottom-to-top' | 'diagonal-tl-br' | 'diagonal-tr-bl''left-to-right'Direction of particle movement
speednumber50Particle movement speed in pixels per second
maxParticlesnumber150Total number of particles on screen
dotsEnabledbooleantrueWhether to show dot particles
dotColorstring'#a78bfa'Color of dot particles (hex/rgb/hsl)
dotSizenumber2Maximum size of dot particles in pixels
dotOpacitynumber0.6Opacity of dot particles (0-1)
linesEnabledbooleantrueWhether to show line particles
lineColorstring'#60a5fa'Color of line particles (hex/rgb/hsl)
lineWidthnumber1Width/thickness of line particles in pixels
lineLengthnumber10Maximum length of line particles in pixels
lineOpacitynumber0.5Opacity of line particles (0-1)
backgroundColorstring'#0f0f0f'Background color of the canvas
glowbooleantrueWhether to add glow/shadow effects to particles
fadeEdgesbooleantrueWhether particles fade out near canvas edges

Direction Options

The component supports six different movement directions:

  • left-to-right: Particles flow from left edge to right edge
  • right-to-left: Particles flow from right edge to left edge
  • top-to-bottom: Particles flow from top edge to bottom edge
  • bottom-to-top: Particles flow from bottom edge to top edge
  • diagonal-tl-br: Particles flow diagonally from top-left to bottom-right
  • diagonal-tr-bl: Particles flow diagonally from top-right to bottom-left

Performance Tips

  • Lower maxParticles for better performance on mobile devices
  • Disable glow effects for improved performance
  • Use solid colors instead of gradients when possible
  • Consider reducing speed for smoother animations on lower-end devices