Mouse Cursor Confetti (GSAP Physics2D)

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/Physics2DPlugin.min.js"></script>

body {
  overflow: clip;
}

.dot {
  position: absolute;
  background-color: #D3DCCD;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  will-change: transform, opacity;
  pointer-events: none; 
}

gsap.registerPlugin(Physics2DPlugin);

document.addEventListener("click", (event) => {
  // Generate a random number of dots (3 to 10)
  const dotCount = gsap.utils.random(3, 10, 1);
  const colors = ["#D3DCCD", "#F5FEEF", "#6C7E5F", "#818A7B", "#94A787"]; // Define colors once

  for (let i = 0; i < dotCount; i++) {
    // Create a dot element
    const dot = document.createElement("div");
    dot.classList.add("dot");

    // Append the dot to the body
    document.body.appendChild(dot);

    // Set initial position and styles of the dot
    gsap.set(dot, {
      backgroundColor: gsap.utils.random(colors), // Pick a random color
      top: event.clientY, // position dot at coordinates of the click
      left: event.clientX,
      scale: 0, // Start at scale 0
    });

    // Animate the dot with physics2D
    gsap.timeline({
      onComplete: () => dot.remove(), // Remove the dot after animation
    })
      .to(dot, {
        scale: gsap.utils.random(0.5, 1), // Scale between 0.5 and 1
        duration: 0.3, // Quick pop-in effect
        ease: "power3.out",
      })
      .to(dot, {
        duration: 2,
        physics2D: {
          velocity: gsap.utils.random(200, 650), // Random velocity
          angle: gsap.utils.random(0, 360), // Random direction
          gravity: 500, // Gravity effect
        },
        autoAlpha: 0, // Fade out towards the end
        ease: "none",
      }, "<"); // Start together with the previous tween
  }
});