applyConfettiEffect function exported
Last updated: 2026-03-05T10:53:28.860Z
Metrics
LOC: 56
Complexity: 5
Params: 3
Signature
applyConfettiEffect(
target: Element | null,
config: ConfettiEffect,
): : Promise<void>
Summary
Spawns confetti particles near the target element.
Source Code
export function applyConfettiEffect(
target: Element | null,
config: ConfettiEffect,
): Promise<void> {
return new Promise((resolve) => {
const count = config.count ?? 60;
// Determine origin point
let originX = window.innerWidth / 2;
let originY = window.innerHeight / 2;
if (target) {
const rect = target.getBoundingClientRect();
originX = rect.left + rect.width / 2;
originY = rect.top + rect.height / 2;
}
const particles: HTMLDivElement[] = [];
for (let i = 0; i < count; i++) {
const p = document.createElement("div");
p.style.cssText = `
position: fixed;
z-index: 2147483646;
pointer-events: none;
width: ${randomRange(6, 10)}px;
height: ${randomRange(6, 10)}px;
background: ${COLORS[Math.floor(Math.random() * COLORS.length)]};
border-radius: ${Math.random() > 0.5 ? "50%" : "2px"};
left: ${originX}px;
top: ${originY}px;
opacity: 1;
transition: none;
`;
document.body.appendChild(p);
particles.push(p);
}
requestAnimationFrame(() => {
particles.forEach((p) => {
const angle = randomRange(0, Math.PI * 2);
const speed = randomRange(80, 240);
const dx = Math.cos(angle) * speed;
const dy = Math.sin(angle) * speed - randomRange(60, 120);
p.style.transform = `translate(${dx}px, ${dy}px) rotate(${randomRange(0, 720)}deg)`;
p.style.transition = `transform ${randomRange(0.6, 1.2)}s ease-out, opacity 0.4s ease 0.6s`;
p.style.opacity = "0";
});
setTimeout(() => {
particles.forEach((p) => p.remove());
resolve();
}, 1400);
});
});
}
Dependencies (Outgoing)
| Target | Type |
|---|---|
| randomRange | calls |
Impact (Incoming)
| Source | Type |
|---|---|
| resolveTarget | uses |
| applyEffect | calls |