Confetti Burst Effect

Colorful confetti particles that burst and fall with realistic physics

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 confetti to your website
<script src="https://www.cursormotion.com/cursor-motion.min.js"></script>
<script>
  const cursor = new CursorMotion({
    enableClickEffect: true,
    clickEffect: 'confetti',
    confettiOptions: {
      particleCount: 50,
      colors: ["#ff0000","#ffa500","#ffff00","#00ff00","#0000ff","#ff00ff","#ec4899"],
      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 confetti!</button>
<div class="cm-click">Celebrate! 🎉</div>
About This Effect

What it does:

Creates a burst of colorful confetti particles (rectangles, circles, and squares) that explode upward and outward from the click point, then fall with rotation and gravity for a realistic celebration effect. Only triggers on elements with the cm-click class.

Options:

  • enableClickEffect: Set to true to enable click effects
  • clickEffect: Set to 'confetti'
  • confettiOptions.particleCount: Number of confetti pieces (20-100)
  • confettiOptions.colors: Array of hex color codes for confetti
  • confettiOptions.gravity: How fast confetti falls (0.1-1.0)
  • confettiOptions.shapes: Array of shapes: 'rectangle', 'circle', 'square' (optional)

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

Best for:

Success messages, achievement unlocks, form completions, "Share" buttons, celebration events, milestone notifications, or any moment worth celebrating! Perfect for positive user interactions.

Pro Tip:

Combine different color schemes to match your brand! Use pastel colors for a softer look, or neon colors for high-energy celebrations. You can also adjust the gravity to control how quickly confetti falls.