Fondos interactivos que reaccionan al cursor + momentos de confetti para celebrar conversiones. Ideal para landings, checkouts y páginas de cierre de venta.
Las partículas conectan líneas entre sí y reaccionan al movimiento y al clic del mouse. Elegí un preset para cambiar el comportamiento en tiempo real.
Preset activo: Red Neon — mové el mouse sobre el fondo
Cada momento de conversión merece una celebración. Probá los estilos de confetti individuales o disparalos todos juntos con el botón principal.
Dispara todos los estilos a la vez — para el momento WOW del checkout
Sirve para
npm install @tsparticles/slim
import { tsParticles } from "@tsparticles/slim";
await tsParticles.load({
id: "tsparticles",
options: {
particles: {
number: { value: 80 },
links: { enable: true, color: "#42E200", opacity: 0.4 },
move: { enable: true, speed: 1.2 },
interactivity: {
events: {
onHover: { enable: true, mode: "grab" },
onClick: { enable: true, mode: "push" }
}
}
}
}
});npm install canvas-confetti
import confetti from "canvas-confetti";
// Lluvia estándar
confetti({ particleCount: 150, spread: 70, origin: { y: 0.6 } });
// Cañones laterales
confetti({ particleCount: 60, angle: 60, spread: 55, origin: { x: 0 } });
confetti({ particleCount: 60, angle: 120, spread: 55, origin: { x: 1 } });
// Fuegos artificiales (loop)
const end = Date.now() + 3000;
(function frame() {
confetti({ particleCount: 5, angle: 60, spread: 55, origin: { x: 0 } });
confetti({ particleCount: 5, angle: 120, spread: 55, origin: { x: 1 } });
if (Date.now() < end) requestAnimationFrame(frame);
})();