Fireworks Click Effect

Explosive particle effects triggered by mouse clicks

Live Demo
Add the cm-click class to elements to enable click effects

🖱️

Click "Start Effect" to begin

Implementation Code
Copy this code to add fireworks to your website
<script src="https://www.cursormotion.com/cursor-motion.min.js"></script>
<script>
  const cursor = new CursorMotion({
    enableClickEffect: true,
    clickEffect: 'fireworks',
    fireworksOptions: {
      particleCount: 50,
      colors: ["#ff0000","#ffa500","#ffff00","#00ff00","#0000ff","#ff00ff"],
      gravity: 0.5
    }
  });
  cursor.init();
</script>

<!-- Add the cm-click class to elements you want to have the effect -->
<button class="cm-click">Click me for fireworks!</button>
<div class="cm-click">This div also triggers fireworks</div>
About This Effect

What it does:

Creates a burst of colorful particles that explode outward from the click point, affected by gravity and air resistance for realistic physics. The effect only triggers on elements with the cm-click class, giving you full control over which elements are interactive.

Options:

  • enableClickEffect: Set to true to enable click effects
  • clickEffect: Type of effect ('fireworks')
  • fireworksOptions.particleCount: Number of particles per explosion (20-100)
  • fireworksOptions.colors: Array of hex color codes for particles
  • fireworksOptions.gravity: Physics gravity strength (0.1-1.0)
  • fireworksOptions.particleSize: Size of each particle (optional, default: 3)

Important: Add the cm-click class to any HTML element you want to trigger the fireworks effect.

Best for:

Success celebrations, "Like" buttons, form submissions, achievement notifications, game interfaces, or any interactive element that needs celebratory feedback.

Pro Tip:

You can combine this with the particle trail effect for both cursor movement and click interactions!