js-waves-particles

Interactive Live Customization

Fine-tune the waves, particles, and background gradient in real-time.

1 Installation

npm install js-waves-particles

2 Standard HTML / CDN

Include the script tag. The class is exposed globally as WaveParticles.

<script src="dist/wave-particles.iife.js"></script>
<script>
  const animation = new WaveParticles({
    config: {
      waves: [{ amplitude: 40, yOffset: 0.6 }]
    }
  });
</script>

3 Using with React

Initialize inside useEffect and ensure you call destroy() to prevent memory leaks during hot-reloads or route changes.

import { useEffect } from 'react';
import WaveParticles from 'js-waves-particles';

function Background() {
  useEffect(() => {
    const animation = new WaveParticles();
    return () => animation.destroy();
  }, []);

  return null;
}

4 Using with Vue 3

Use the onMounted and onUnmounted lifecycle hooks.

<script setup>
import { onMounted, onUnmounted } from 'vue';
import WaveParticles from 'js-waves-particles';

onMounted(() => {
  const animation = new WaveParticles();
  onUnmounted(() => animation.destroy());
});
</script>

5 Using with Angular

Implement AfterViewInit and OnDestroy interfaces.

                import { Component, AfterViewInit, OnDestroy } from '@angular/core';
                import WaveParticles from 'js-waves-particles';
                
                @Component({ ... })
                export class AppComponent implements AfterViewInit, OnDestroy {
                    private animation: WaveParticles;
                    ngAfterViewInit() {
                        this.animation = new WaveParticles();
                    }
                    
                    ngOnDestroy() {
                        this.animation.destroy();
                    }
                }
            

6 Full Configuration

Every aspect of the visual engine can be tweaked via the constructor.

                const animation = new WaveParticles({
  canvas: '#custom-id',
  config: {
    waves: [{
      amplitude: 60,
      frequency: 0.003,
      speed: 0.006,
      yOffset: 0.55,
      color: 'rgba(255, 255, 255, 0.2)',
      layers: 3
    }],
    particles: { countScale: 8000, maxCount: 180 },
    colors: {
      backgroundGradient: ['#fdfcfb', '#e8d5d0'],
      particleColorPrefixes: ['rgba(255, 0, 0,', 'rgba(0, 255, 0,']
    }
  }
});