<script 
    src="https://opensource.josebamirena.com/particles/1.0.0/dist/particles.min.js" 
    integrity="sha384-ovQETGtGwaVATmqCOoMNIo1bur9NDv5+pG2BzxOqa5/M7BvYh3XhYjG607gXu/7D" 
    crossorigin="anonymous">
</script>

    <div id="particles-container" aria-hidden="true"></div>

// CSS
#particles-container {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

#particles-container canvas {
  /* clicks reach canvas */
  pointer-events: auto;
  display: block;
  width: 100%;
  height: 100%;
}

    <script>
        const defaults = {
            container: 'particles-container', // Particles renderization background ID
            type: 'circle', // 'circle', 'star', 'confetti', 'triangle', 'image', 'emoji'
            mode: 'flow', // 'flow', 'rain', 'firework'
            imageUrl: null, // string or array (mandatory for type image)
            emoji: null, // string or array (mandatory for type emoji)
            count: 80,
            colors: ['#ff006e', '#8338ec', '#3a86ff', '#ffbe0b', '#fb5607'],
            useRainbow: false,
            burst: false,
            sizeMin: 5,
            sizeMax: 12,
            speed: 1.0,
            connect: false,
            connectDistance: 120,
            connectOpacity: 0.6,
            grabRadius: 100,
            opacity: 0.85,
            backgroundParticles: true,
            gravity: 0.08,
            rotationSpeed: 0.03,
            spawnRate: 0.005,
            trails: false,
            trailLength: 16,
            trailOpacity: 0.6,
        };
    </script>

<script>
    Particles.init({
        container: 'my-html-container-id', // particles-container by default
        type: 'circle',
        mode: 'flow',
        count: 120,
        sizeMin: 4,
        sizeMax: 12,
        opacity: 0.8,
        gravity: 0.05,
        backgroundParticles: true,
        trails: false,
    });
</script>

<script>
    Particles.init({ 
        type: 'star', 
        mode: 'firework', 
        spawnRate: 0.025, 
        trails: true 
    });
</script>

<script>
    Particles.init({ 
        type: 'circle', 
        burst: false, 
        connect: true, 
        connectOpacity: 0.90, 
        connectDistance: 130 
    });
</script>

<script>
    Particles.init({
        type: 'star',
        mode: 'flow',
        count: 140,
        sizeMin: 5,
        sizeMax: 14,
        colors: ['#ffffff', '#ffe066', '#ff99cc'],
        opacity: 0.9,
        connect: true,
        connectDistance: 140,
        connectOpacity: 0.25,
    });
</script>

<script>
    Particles.init({
        type: 'confetti',
        mode: 'rain',
        count: 180,
        sizeMin: 6,
        sizeMax: 18,
        gravity: 0.18,
        rotationSpeed: 0.05,
        opacity: 0.92,
    });
</script>

<script>
    Particles.init({
        type: 'emoji',
        emoji: '🚀',
        mode: 'flow',
        count: 80,
        sizeMin: 18,
        sizeMax: 38,
        opacity: 0.95,
        gravity: 0.02,
        rotationSpeed: 0.04,
    });
</script>

<script>
    Particles.init({
        type: 'emoji',
        emoji: ['🎉', '✨', '💥', '🌈', '🔥'],
        mode: 'rain',
        count: 150,
        sizeMin: 20,
        sizeMax: 45,
        gravity: 0.12,
        rotationSpeed: 0.06,
    });
</script>