Third-Party Plugins

Tailwind CSS Confetti Animation

Add celebratory flair to your website with Tailwind CSS Confetti! Lightweight, customizable, and easy to integrate for fun, animated confetti effects.

How to use

  1. 1

    Install Canvas Confetti.

    Install Canvas Confetti via npm 
    npm i canvas-confetti
  2. 2

    Add the Canvas Confetti JavaScript

    Include the JavaScript script tag near the end of your body tag: 
    <script src="./assets/vendor/canvas-confetti/dist/confetti.browser.js"></script>

Run on click

Run confetti Animation on click. 

<button class="border border-gray-300 px-4 py-2 bg-gray-50 rounded-lg" id="Fire">🎉</button>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
<script>
    var count = 500;
    var defaults = {
        origin: { y: 0.5, x: 0.5 },
    };

    document.getElementById("Fire").onclick = FireCannon;

    function Fire(particleRatio, opts) {
        confetti(Object.assign({}, defaults, opts, {
            particleCount: Math.floor(count * particleRatio)
        }));
    }

    function FireCannon() {

        Fire(0.25, {
            spread: 26,
            startVelocity: 55,
        });
        Fire(0.2, {
            spread: 60,
        });
        Fire(0.35, {
            spread: 100,
            decay: 0.91,
            scalar: 0.4
        });
        Fire(0.1, {
            spread: 120,
            startVelocity: 25,
            decay: 0.92,
            scalar: 1.2
        });
        Fire(0.1, {
            spread: 120,
            startVelocity: 45,
        });
    }
</script>