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)

graph LR applyConfettiEffect["applyConfettiEffect"] randomRange["randomRange"] applyConfettiEffect -->|calls| randomRange style applyConfettiEffect fill:#dbeafe,stroke:#2563eb,stroke-width:2px click applyConfettiEffect "896aefbf261176e9.html" click randomRange "8d5daa218cc02de8.html"
TargetType
randomRange calls

Impact (Incoming)

graph LR applyConfettiEffect["applyConfettiEffect"] resolveTarget["resolveTarget"] applyEffect["applyEffect"] resolveTarget -->|uses| applyConfettiEffect applyEffect -->|calls| applyConfettiEffect style applyConfettiEffect fill:#dbeafe,stroke:#2563eb,stroke-width:2px click applyConfettiEffect "896aefbf261176e9.html" click resolveTarget "cefe589bdbdd3b3b.html" click applyEffect "baf0d9f2a6803bb4.html"
SourceType
resolveTarget uses
applyEffect calls