ConfettiHook.js

import { confetti } from "@tsparticles/confetti";

const ConfettiHook = {
  mounted() {
    randomInRange = function (min, max) {
      return Math.random() * (max - min) + min;
    };
    const duration = 5 * 1000,
      animationEnd = Date.now() + duration,
      defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };

    const ensureCanvasNonBlocking = () => {
      const confettiCanvas = document.querySelector("canvas");
      if (confettiCanvas) {
        confettiCanvas.style.pointerEvents = "none";
      }
    };

    const interval = setInterval(function () {
      const timeLeft = animationEnd - Date.now();
      if (timeLeft <= 0) {
        return clearInterval(interval);
      }
      const particleCount = 50 * (timeLeft / duration);
      confetti(
        Object.assign(
          {
            fullScreen: {
              zIndex: 1,
            },
          },
          defaults,
          {
            particleCount,
            origin: { x: randomInRange(0.1, 0.9), y: Math.random() - 0.2 },
          },
        ),
      );
      confetti(
        Object.assign(
          {
            fullScreen: {
              zIndex: 1,
            },
          },
          defaults,
          {
            particleCount,
            origin: { x: randomInRange(0.1, 0.9), y: Math.random() - 0.2 },
          },
        ),
      );
      ensureCanvasNonBlocking();
    }, 250);
    ensureCanvasNonBlocking();
  },
};

export default ConfettiHook;