Particle Density

Particle density determines how detailed or loose your text appears. By controlling the particleRadius configuration, you can create everything from ultra-dense, smooth text to artistic, loosely-spaced compositions.

Understanding Particle Density

Particle density is controlled by the size of individual particles, not the number of particles. Smaller particles create denser text with more detail, while larger particles create a more spacious, artistic look.

The particleRadius Formula

Final Particle Radius = base + random(0, rand)

base: Minimum radius in pixels
rand: Random variation added to each particle
A particle with { base: 2, rand: 1 } will be between 2-3px

Live Demos

Dense Small Particles

Fine detail with tiny 1-1.5px particles creates smooth, dense text.

Dense Small Particles (1-1.5px)

initParticleJS('#canvas', {
text: 'DENSE',
particleRadius: {
  xs: { base: 1, rand: 0.5 }  // 1-1.5px particles
},
colors: ['#4ECDC4', '#45B7D1']
});

Medium Density

Balanced 2-3px particles - the standard recommended size for most use cases.

Medium Density (2-3px)

initParticleJS('#canvas', {
text: 'MEDIUM',
particleRadius: {
  xs: { base: 2, rand: 1 }  // 2-3px particles
},
colors: ['#FF6B6B', '#FFA07A']
});

Sparse Large Particles

Large 4-7px particles create an artistic, looser composition.

Sparse Large Particles (4-7px)

initParticleJS('#canvas', {
text: 'SPARSE',
particleRadius: {
  xs: { base: 4, rand: 3 }  // 4-7px particles
},
colors: ['#9B59B6', '#8E44AD']
});

Responsive Particle Sizes

You can define different particle sizes for different screen sizes using breakpoints.

particleRadius: {
xxxs: { base: 1, rand: 0.5 },  // Mobile: 1-1.5px (dense)
xs: { base: 1, rand: 0.5 },    // Small mobile: 1-1.5px
sm: { base: 2, rand: 1 },      // Tablet: 2-3px (medium)
md: { base: 2, rand: 1 },      // Desktop: 2-3px
lg: { base: 3, rand: 1 },      // Large: 3-4px
xl: { base: 3, rand: 2 }       // Extra large: 3-5px
}

Tip: Use smaller particles on mobile devices to maintain readability despite the smaller screen size.

Dynamic Particle Sizes (Function)

For complete control, use a function to calculate particle radius dynamically.

particleRadius: function() {
// Random sizes between 1-4px
return Math.random() * 3 + 1;
}

// Varied sizes for artistic effect
particleRadius: function() {
const sizes = [1, 2, 2, 3, 4, 5];
return sizes[Math.floor(Math.random() * sizes.length)];
}

// Size based on screen width
particleRadius: function() {
const screenWidth = window.innerWidth;
if (screenWidth < 768) {
  return Math.random() * 1 + 1;  // 1-2px on mobile
} else {
  return Math.random() * 2 + 2;  // 2-4px on desktop
}
}

Choosing the Right Density

Particle Size	Range	Best For	Performance
Dense	1-2px	Professional sites, fine detail, small text, crisp appearance	Excellent
Medium	2-4px	Most use cases, balanced look, standard text	Good
Sparse	4-7px	Artistic projects, large displays, creative portfolios	Excellent
Very Sparse	7-10px	Abstract art, decorative headers, unique effects	Excellent

Visual Density Guide

When to Use Dense Particles (1-2px)

Corporate/professional websites
Small to medium text sizes
When detail is important
Reading-heavy content
Minimalist designs

When to Use Medium Particles (2-4px)

General purpose applications
Hero sections
Landing pages
Marketing sites
Balanced visual appeal

When to Use Sparse Particles (4-7px)

Creative portfolios
Artistic projects
Large display text (>150px)
Bold, impactful headers
Abstract/decorative effects

Performance Considerations

Larger particles = Better performance, but the difference is minimal in most cases.

// High performance (larger particles)
particleRadius: { xs: { base: 4, rand: 2 } }

// Lower performance (smaller, more particles visible)
particleRadius: { xs: { base: 1, rand: 0.5 } }

// Tip: Combine with maxParticles for best results
maxParticles: 3000,  // Limit total particles
particleRadius: { xs: { base: 1, rand: 1 } }

Randomness and Variation

The rand parameter adds visual interest by creating size variation.

// No variation (uniform size)
particleRadius: { xs: { base: 2, rand: 0 } }
// All particles are exactly 2px

// Small variation (subtle)
particleRadius: { xs: { base: 2, rand: 1 } }
// Particles range from 2-3px

// Large variation (dynamic)
particleRadius: { xs: { base: 2, rand: 4 } }
// Particles range from 2-6px (creates depth)

Recommended: Use rand values between 0.5-2 for natural-looking variation.

Common Patterns

Professional/Corporate

{
particleRadius: { xs: { base: 1, rand: 1 } },
colors: ['#2C3E50', '#34495E']
}

Creative/Artistic

{
particleRadius: { xs: { base: 3, rand: 3 } },
colors: [
  { color: '#E74C3C', weight: 5 },
  { color: '#F39C12', weight: 2 },
  { color: '#9B59B6', weight: 1 }
]
}

High Performance

{
particleRadius: { xs: { base: 3, rand: 2 } },
maxParticles: 2000,
supportSlowBrowsers: true
}

Best Practices

Start with defaults: Use { base: 2, rand: 1 } as your starting point
Test responsively: Different screen sizes may need different densities
Match text size: Larger text can handle larger particles
Consider background: Dark backgrounds work better with slightly larger particles
Performance first: If targeting older devices, use larger particles
Consistency: Keep particle sizes consistent across your site

Advanced Techniques

Gradient Density Effect

Create visual interest by having particles grow from the center outward (requires custom implementation).

Mixed Sizes for Depth

Use the function approach to create depth perception:

particleRadius: function() {
// 70% small particles, 30% large (creates depth)
return Math.random() < 0.7 ?
  Math.random() * 1 + 1 :  // 1-2px (small)
  Math.random() * 3 + 3;   // 3-6px (large)
}

Troubleshooting

Text looks too sparse?

Decrease base and rand values
Example: { base: 1, rand: 0.5 }

Text looks too dense/solid?

Increase base value
Example: { base: 3, rand: 2 }

Inconsistent density across screen sizes?

Set explicit breakpoint values
Test on multiple devices

Performance issues?

Increase particle size
Set maxParticles limit
Enable supportSlowBrowsers

Particle Radius (API Reference) - Full configuration options
Explosion Radius - Control interaction distance
Friction Effects - Particle movement behavior
Performance Optimization - Optimize for speed