Presentamos esta librería canvas-confetti para añadir una animación de confeti, un efecto visual que podemos usar para celebrar un logro en una aplicación, gamificar un proceso o simplemente agregar un poco de diversión.

Instalación

Podemos instalar la librería vía npm:

npm install --save canvas-confetti

Ejemplo básico

Una vez instalada, podemos lanzar confeti con una simple línea:

import confetti from 'canvas-confetti';

confetti();

Esto generará una explosión de confeti en la pantalla con valores predeterminados. Sin embargo, podemos ajustar varios parámetros para personalizar el efecto.

Ejemplo con configuración personalizada

Podemos controlar aspectos como la dirección, la velocidad y la cantidad de partículas:

const count = 200;
const defaults = {
  origin: { y: 0.7 }
};

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

fire(0.25, {
  spread: 26,
  startVelocity: 55,
});
fire(0.2, {
  spread: 60,
});
fire(0.35, {
  spread: 100,
  decay: 0.91,
  scalar: 0.8
});
fire(0.1, {
  spread: 120,
  startVelocity: 25,
  decay: 0.92,
  scalar: 1.2
});
fire(0.1, {
  spread: 120,
  startVelocity: 45,
});

Cada llamada a fire() lanza una serie de partículas con diferentes propiedades, creando un efecto más natural y variado.

Disparo continuo

Podemos configurar un loop para que el confeti no se detenga:

setInterval(() => {
  confetti({
    particleCount: 10,
    spread: 70,
    origin: { y: 0.6 }
  });
}, 500);

Esto lanza una pequeña cantidad de confeti cada medio segundo, logrando un efecto continuo.

Conclusión

Esta librería canvas-confetti nos permite agregar efectos visuales atractivos con muy fácilmente. Es ligera, fácil de usar y nos da suficiente control para adaptarlo a nuestras necesidades. Ya sea para celebrar un evento especial en nuestra web o simplemente por diversión, vale la pena probarlo. Si quieres más ejemplos visita la página oficial.