Confetti

confetti.js

// We can import code dynamically, top level await is supported.
const {default: Confetti} = await import('https://cdn.skypack.dev/canvas-confetti');

function fireConfetti(event) {
    const x = event.clientX / document.body.clientWidth;
    const y = event.clientY / document.body.clientHeight;
    Confetti({origin: {x, y}});
}

// lit templating is built-in
html`<button @click=${fireConfetti}>Fire Confetti 🎉</button>`