@konfetti-js/core 0.3.0

package/dist/index.cjs

@@ -0,0 +1,833 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Konfetti: () => Konfetti,
+  PRESET_NAMES: () => PRESET_NAMES,
+  cannon: () => cannon,
+  continuous: () => continuous,
+  create: () => create,
+  destroy: () => destroy,
+  explosion: () => explosion,
+  fire: () => fire,
+  fireFromElement: () => fireFromElement,
+  firePreset: () => firePreset,
+  fireworks: () => fireworks,
+  isPresetName: () => isPresetName,
+  originFromElement: () => originFromElement,
+  pride: () => pride,
+  rain: () => rain,
+  reset: () => reset,
+  sideCannons: () => sideCannons,
+  snow: () => snow
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/shapes.ts
+function drawCircle(ctx, size) {
+  ctx.beginPath();
+  ctx.arc(0, 0, size / 2, 0, Math.PI * 2);
+  ctx.fill();
+}
+function drawSquare(ctx, size) {
+  const halfSize = size / 2;
+  ctx.fillRect(-halfSize, -halfSize, size, size);
+}
+var SHAPES = ["circle", "square"];
+var RENDERERS = [drawCircle, drawSquare];
+function isShape(value) {
+  return SHAPES.includes(value);
+}
+function shapeToIndex(shape) {
+  return Math.max(0, SHAPES.indexOf(shape));
+}
+function getShapeRenderer(index) {
+  return RENDERERS[index] ?? drawCircle;
+}
+
+// src/utils.ts
+var DEFAULT_COLORS = [
+  "#26ccff",
+  // cyan
+  "#a25afd",
+  // purple
+  "#ff5e7e",
+  // pink
+  "#88ff5a",
+  // green
+  "#fcff42",
+  // yellow
+  "#ffa62d",
+  // orange
+  "#ff36ff"
+  // magenta
+];
+var DEFAULT_OPTIONS = {
+  particleCount: 50,
+  angle: 90,
+  spread: 45,
+  startVelocity: 45,
+  decay: 0.9,
+  gravity: 1,
+  drift: 0,
+  ticks: 200,
+  origin: { x: 0.5, y: 0.5 },
+  colors: DEFAULT_COLORS,
+  shapes: ["circle", "square"],
+  scalar: 1,
+  zIndex: 100,
+  disableForReducedMotion: true
+};
+function finite(value, fallback) {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+function resolveOptions(options = {}) {
+  const d = DEFAULT_OPTIONS;
+  const colors = Array.isArray(options.colors) ? options.colors.filter((c) => typeof c === "string" && c.length > 0) : [];
+  const shapes = Array.isArray(options.shapes) ? options.shapes.filter(isShape) : [];
+  return {
+    particleCount: Math.max(0, Math.round(finite(options.particleCount, d.particleCount))),
+    angle: finite(options.angle, d.angle),
+    spread: finite(options.spread, d.spread),
+    startVelocity: finite(options.startVelocity, d.startVelocity),
+    decay: clamp(finite(options.decay, d.decay), 0, 1),
+    gravity: finite(options.gravity, d.gravity),
+    drift: finite(options.drift, d.drift),
+    ticks: Math.max(1, finite(options.ticks, d.ticks)),
+    origin: {
+      x: finite(options.origin?.x, d.origin.x),
+      y: finite(options.origin?.y, d.origin.y)
+    },
+    colors: colors.length > 0 ? colors : [...d.colors],
+    shapes: shapes.length > 0 ? shapes : [...d.shapes],
+    scalar: Math.max(0, finite(options.scalar, d.scalar)),
+    zIndex: finite(options.zIndex, d.zIndex),
+    disableForReducedMotion: options.disableForReducedMotion ?? d.disableForReducedMotion
+  };
+}
+function mergeOptions(base, override) {
+  const merged = { ...base };
+  if (override) {
+    for (const [key, value] of Object.entries(override)) {
+      if (value !== void 0) merged[key] = value;
+    }
+    if (override.origin) merged.origin = mergeOrigin(base.origin, override.origin);
+  }
+  return merged;
+}
+function mergeOrigin(base, override) {
+  return {
+    ...base,
+    ...override?.x !== void 0 && { x: override.x },
+    ...override?.y !== void 0 && { y: override.y }
+  };
+}
+function degToRad(deg) {
+  return deg * (Math.PI / 180);
+}
+function randomRange(min, max) {
+  return Math.random() * (max - min) + min;
+}
+function randomItem(arr) {
+  return arr[Math.floor(Math.random() * arr.length)];
+}
+function isBrowser() {
+  return typeof window !== "undefined" && typeof document !== "undefined";
+}
+function prefersReducedMotion() {
+  if (typeof window === "undefined") return false;
+  const mediaQuery = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+  return mediaQuery?.matches ?? false;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
+// src/particle.ts
+var MAX_PARTICLES = 1e4;
+var MAX_PALETTE = 256;
+var ParticlePool = class {
+  constructor(initialCapacity = 512) {
+    /** Number of active particles */
+    this.activeCount = 0;
+    /**
+     * Colors in use; particles store an index into this list, so any CSS color
+     * works without parsing it
+     */
+    this.palette = [];
+    this.colorIds = /* @__PURE__ */ new Map();
+    this.data = new Float32Array(initialCapacity * 16 /* SIZE */);
+  }
+  /** How many particles fit before the buffer has to grow */
+  get capacity() {
+    return this.data.length / 16 /* SIZE */;
+  }
+  /**
+   * Remove every particle
+   */
+  reset() {
+    this.activeCount = 0;
+    this.clearPalette();
+  }
+  /**
+   * Spawn particles with the given options
+   */
+  spawn(options, canvasWidth, canvasHeight) {
+    const count = Math.min(options.particleCount, MAX_PARTICLES - this.activeCount);
+    if (count <= 0) return;
+    this.ensureCapacity(this.activeCount + count);
+    const data = this.data;
+    const originX = options.origin.x * canvasWidth;
+    const originY = options.origin.y * canvasHeight;
+    const angleRad = degToRad(options.angle);
+    const spreadRad = degToRad(options.spread);
+    for (let i = 0; i < count; i++) {
+      const idx = (this.activeCount + i) * 16 /* SIZE */;
+      const particleAngle = angleRad + randomRange(-spreadRad / 2, spreadRad / 2);
+      const velocity = options.startVelocity * randomRange(0.5, 1);
+      data[idx + 0 /* X */] = originX;
+      data[idx + 1 /* Y */] = originY;
+      data[idx + 2 /* VelocityX */] = Math.cos(particleAngle) * velocity;
+      data[idx + 3 /* VelocityY */] = -Math.sin(particleAngle) * velocity;
+      data[idx + 4 /* Rotation */] = randomRange(0, Math.PI * 2);
+      data[idx + 5 /* RotationSpeed */] = randomRange(-0.1, 0.1);
+      data[idx + 6 /* Tilt */] = randomRange(0, Math.PI * 2);
+      data[idx + 7 /* TiltSpeed */] = randomRange(0.05, 0.15);
+      data[idx + 8 /* Color */] = this.colorId(randomItem(options.colors));
+      data[idx + 9 /* Shape */] = shapeToIndex(randomItem(options.shapes));
+      data[idx + 10 /* Scalar */] = options.scalar * randomRange(0.8, 1.2);
+      data[idx + 11 /* Life */] = options.ticks;
+      data[idx + 12 /* MaxLife */] = options.ticks;
+      data[idx + 13 /* Drift */] = options.drift + randomRange(-0.5, 0.5);
+      data[idx + 14 /* Gravity */] = options.gravity;
+      data[idx + 15 /* Decay */] = options.decay;
+    }
+    this.activeCount += count;
+  }
+  /**
+   * Remove dead particles, keeping live ones packed at the front
+   */
+  compact() {
+    const data = this.data;
+    let writeIdx = 0;
+    for (let readIdx = 0; readIdx < this.activeCount; readIdx++) {
+      const srcIdx = readIdx * 16 /* SIZE */;
+      if (data[srcIdx + 11 /* Life */] <= 0) continue;
+      if (writeIdx !== readIdx) {
+        const dstIdx = writeIdx * 16 /* SIZE */;
+        data.copyWithin(dstIdx, srcIdx, srcIdx + 16 /* SIZE */);
+      }
+      writeIdx++;
+    }
+    this.activeCount = writeIdx;
+    if (writeIdx === 0) {
+      this.clearPalette();
+    } else if (this.palette.length > MAX_PALETTE) {
+      this.prunePalette();
+    }
+  }
+  /**
+   * Keep only colors that live particles still use, renumbering them, so a long
+   * stream with random colors does not grow the palette forever
+   */
+  prunePalette() {
+    const data = this.data;
+    const oldPalette = [...this.palette];
+    const remap = /* @__PURE__ */ new Map();
+    this.clearPalette();
+    for (let i = 0; i < this.activeCount; i++) {
+      const idx = i * 16 /* SIZE */ + 8 /* Color */;
+      const oldId = data[idx];
+      let newId = remap.get(oldId);
+      if (newId === void 0) {
+        newId = this.colorId(oldPalette[oldId]);
+        remap.set(oldId, newId);
+      }
+      data[idx] = newId;
+    }
+  }
+  colorId(color) {
+    let id = this.colorIds.get(color);
+    if (id === void 0) {
+      id = this.palette.length;
+      this.palette.push(color);
+      this.colorIds.set(color, id);
+    }
+    return id;
+  }
+  clearPalette() {
+    this.palette.length = 0;
+    this.colorIds.clear();
+  }
+  ensureCapacity(needed) {
+    if (needed <= this.capacity) return;
+    let capacity = this.capacity;
+    while (capacity < needed) capacity *= 2;
+    const grown = new Float32Array(Math.min(capacity, MAX_PARTICLES) * 16 /* SIZE */);
+    grown.set(this.data.subarray(0, this.activeCount * 16 /* SIZE */));
+    this.data = grown;
+  }
+};
+
+// src/physics.ts
+function updateParticles(pool, dt) {
+  const data = pool.data;
+  for (let i = 0; i < pool.activeCount; i++) {
+    const idx = i * 16 /* SIZE */;
+    let vx = data[idx + 2 /* VelocityX */];
+    let vy = data[idx + 3 /* VelocityY */];
+    const tilt = data[idx + 6 /* Tilt */];
+    vy += data[idx + 14 /* Gravity */] * dt;
+    vx += data[idx + 13 /* Drift */] * Math.sin(tilt) * dt;
+    const damping = data[idx + 15 /* Decay */] ** dt;
+    vx *= damping;
+    vy *= damping;
+    data[idx + 2 /* VelocityX */] = vx;
+    data[idx + 3 /* VelocityY */] = vy;
+    data[idx + 0 /* X */] += vx * dt;
+    data[idx + 1 /* Y */] += vy * dt;
+    data[idx + 4 /* Rotation */] += data[idx + 5 /* RotationSpeed */] * dt;
+    data[idx + 6 /* Tilt */] = tilt + data[idx + 7 /* TiltSpeed */] * dt;
+    data[idx + 11 /* Life */] -= dt;
+  }
+  pool.compact();
+  return pool.activeCount > 0;
+}
+
+// src/presets.ts
+var FIREWORK_COLORS = ["#ff0000", "#ffff00", "#00ff00", "#00ffff", "#ff00ff"];
+var FIREWORK = {
+  particleCount: 80,
+  angle: 90,
+  spread: 360,
+  startVelocity: 35,
+  decay: 0.91,
+  gravity: 1,
+  colors: FIREWORK_COLORS
+};
+var PRIDE_COLORS = [
+  "#e40303",
+  // red
+  "#ff8c00",
+  // orange
+  "#ffed00",
+  // yellow
+  "#008026",
+  // green
+  "#004dff",
+  // blue
+  "#750787"
+  // purple
+];
+var PRESETS = {
+  // Burst of confetti from bottom center shooting up
+  cannon: {
+    followsOrigin: true,
+    bursts: [
+      {
+        options: {
+          particleCount: 100,
+          angle: 90,
+          spread: 70,
+          startVelocity: 50,
+          decay: 0.91,
+          gravity: 1,
+          origin: { x: 0.5, y: 1 }
+        }
+      }
+    ]
+  },
+  // 360 degree burst from center
+  explosion: {
+    followsOrigin: true,
+    bursts: [
+      {
+        options: {
+          particleCount: 150,
+          angle: 90,
+          spread: 360,
+          startVelocity: 40,
+          decay: 0.92,
+          gravity: 0.8,
+          origin: { x: 0.5, y: 0.5 }
+        }
+      }
+    ]
+  },
+  // Three bursts across the top half
+  fireworks: {
+    followsOrigin: false,
+    bursts: [
+      { delay: 0, options: { ...FIREWORK, origin: { x: 0.3, y: 0.4 } } },
+      { delay: 150, options: { ...FIREWORK, origin: { x: 0.5, y: 0.3 } } },
+      { delay: 300, options: { ...FIREWORK, origin: { x: 0.7, y: 0.4 } } }
+    ]
+  },
+  // Particles falling from the top
+  rain: {
+    followsOrigin: false,
+    bursts: [
+      {
+        options: {
+          particleCount: 50,
+          angle: 270,
+          spread: 60,
+          startVelocity: 10,
+          decay: 0.95,
+          gravity: 0.5,
+          drift: 0,
+          origin: { x: 0.5, y: 0 },
+          ticks: 300
+        }
+      }
+    ]
+  },
+  // Gentle falling white flakes
+  snow: {
+    followsOrigin: false,
+    bursts: [
+      {
+        options: {
+          particleCount: 30,
+          angle: 270,
+          spread: 120,
+          startVelocity: 5,
+          decay: 0.98,
+          gravity: 0.3,
+          drift: 1,
+          origin: { x: 0.5, y: -0.1 },
+          ticks: 400,
+          colors: ["#ffffff", "#e0e0e0", "#c0c0c0"],
+          shapes: ["circle"]
+        }
+      }
+    ]
+  },
+  // Bursts from both sides
+  sideCannons: {
+    followsOrigin: false,
+    bursts: [
+      {
+        options: {
+          particleCount: 50,
+          angle: 60,
+          spread: 55,
+          startVelocity: 50,
+          origin: { x: 0, y: 0.7 }
+        }
+      },
+      {
+        options: {
+          particleCount: 50,
+          angle: 120,
+          spread: 55,
+          startVelocity: 50,
+          origin: { x: 1, y: 0.7 }
+        }
+      }
+    ]
+  },
+  // Rainbow colors
+  pride: {
+    followsOrigin: true,
+    bursts: [
+      {
+        options: {
+          particleCount: 100,
+          spread: 70,
+          origin: { x: 0.5, y: 0.6 },
+          colors: PRIDE_COLORS
+        }
+      }
+    ]
+  }
+};
+var CONTINUOUS_DEFAULTS = {
+  particleCount: 10,
+  angle: 90,
+  spread: 55,
+  startVelocity: 45,
+  origin: { x: 0.5, y: 1 }
+};
+var PRESET_NAMES = Object.keys(PRESETS);
+function isPresetName(value) {
+  return typeof value === "string" && PRESET_NAMES.includes(value);
+}
+
+// src/renderer.ts
+var BASE_SIZE = 10;
+function createOverlayCanvas() {
+  const canvas = document.createElement("canvas");
+  canvas.className = "konfetti-canvas";
+  canvas.setAttribute("aria-hidden", "true");
+  Object.assign(canvas.style, {
+    position: "fixed",
+    top: "0",
+    left: "0",
+    width: "100%",
+    height: "100%",
+    pointerEvents: "none",
+    zIndex: "100"
+  });
+  document.body.appendChild(canvas);
+  return canvas;
+}
+var Renderer = class {
+  constructor(canvas) {
+    /** Size in CSS pixels; the backing store is this times the pixel ratio */
+    this.width = 0;
+    this.height = 0;
+    this.pixelRatio = 1;
+    /** Particle indices grouped by palette color, reused between frames */
+    this.buckets = [];
+    this.ownsCanvas = !canvas;
+    this.canvas = canvas ?? createOverlayCanvas();
+    this.ctx = this.canvas.getContext("2d");
+    this.resize();
+  }
+  /**
+   * Match the canvas to its display size. The full-screen canvas also renders at
+   * the screen's pixel density; a canvas you pass in keeps one pixel per CSS
+   * pixel, because without a CSS size its display size follows its pixel size
+   * and would grow on every resize.
+   */
+  resize() {
+    if (this.ownsCanvas) {
+      this.width = window.innerWidth;
+      this.height = window.innerHeight;
+      this.pixelRatio = window.devicePixelRatio || 1;
+    } else {
+      const rect = this.canvas.getBoundingClientRect();
+      this.width = rect.width;
+      this.height = rect.height;
+      this.pixelRatio = 1;
+    }
+    this.canvas.width = Math.round(this.width * this.pixelRatio);
+    this.canvas.height = Math.round(this.height * this.pixelRatio);
+  }
+  /**
+   * Canvas size in CSS pixels
+   */
+  getDimensions() {
+    return { width: this.width, height: this.height };
+  }
+  /**
+   * Set the stacking order; only applies to the full-screen canvas we own
+   */
+  setZIndex(zIndex) {
+    if (this.ownsCanvas) this.canvas.style.zIndex = String(zIndex);
+  }
+  /**
+   * Clear the canvas
+   */
+  clear() {
+    if (!this.ctx) return;
+    this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+  /**
+   * Draw all particles, batched by color to limit fillStyle changes
+   */
+  render(pool) {
+    this.clear();
+    const ctx = this.ctx;
+    if (!ctx) return;
+    const data = pool.data;
+    const ratio = this.pixelRatio;
+    const buckets = this.buckets;
+    for (const bucket of buckets) bucket.length = 0;
+    for (let i = 0; i < pool.activeCount; i++) {
+      const colorId = data[i * 16 /* SIZE */ + 8 /* Color */];
+      if (!buckets[colorId]) buckets[colorId] = [];
+      buckets[colorId].push(i);
+    }
+    for (let colorId = 0; colorId < buckets.length; colorId++) {
+      const bucket = buckets[colorId];
+      if (!bucket || bucket.length === 0) continue;
+      ctx.fillStyle = pool.palette[colorId];
+      for (const particle of bucket) {
+        const idx = particle * 16 /* SIZE */;
+        const tilt = data[idx + 6 /* Tilt */];
+        const rotation = data[idx + 4 /* Rotation */];
+        const opacity = Math.min(
+          1,
+          data[idx + 11 /* Life */] / data[idx + 12 /* MaxLife */] * 2
+        );
+        const size = BASE_SIZE * data[idx + 10 /* Scalar */] * (0.8 + 0.2 * Math.cos(tilt));
+        if (size < 0.5 || opacity < 0.01) continue;
+        const cos = Math.cos(rotation);
+        const sin = Math.sin(rotation);
+        const squash = 0.6 + 0.4 * Math.abs(Math.cos(tilt));
+        ctx.globalAlpha = opacity;
+        ctx.setTransform(
+          ratio * cos,
+          ratio * sin,
+          -ratio * sin * squash,
+          ratio * cos * squash,
+          ratio * data[idx + 0 /* X */],
+          ratio * data[idx + 1 /* Y */]
+        );
+        getShapeRenderer(data[idx + 9 /* Shape */])(ctx, size);
+      }
+    }
+    ctx.globalAlpha = 1;
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+  }
+  /**
+   * Destroy renderer and remove the canvas if we created it
+   */
+  destroy() {
+    this.clear();
+    if (this.ownsCanvas) this.canvas.remove();
+  }
+};
+
+// src/konfetti.ts
+var FRAME_MS = 1e3 / 60;
+var MAX_STEP = 4;
+var Konfetti = class {
+  constructor(canvas, createOptions = {}) {
+    this.pool = new ParticlePool();
+    this.renderer = null;
+    this.frameId = null;
+    /** Timestamp of the previous frame, or when the loop was scheduled */
+    this.lastTime = 0;
+    this.paused = false;
+    this.destroyed = false;
+    this.resizeWithWindow = false;
+    this.timeouts = /* @__PURE__ */ new Set();
+    this.intervals = /* @__PURE__ */ new Set();
+    this.handleResize = () => {
+      this.renderer?.resize();
+    };
+    this.handleVisibilityChange = () => {
+      if (document.hidden) {
+        this.cancelFrame();
+      } else {
+        this.scheduleFrame();
+      }
+    };
+    this.tick = (time) => {
+      this.frameId = null;
+      if (!this.renderer) return;
+      const dt = clamp((time - this.lastTime) / FRAME_MS, 0, MAX_STEP);
+      this.lastTime = time;
+      const hasParticles = updateParticles(this.pool, dt);
+      this.renderer.render(this.pool);
+      if (hasParticles) {
+        this.frameId = requestAnimationFrame(this.tick);
+      }
+    };
+    if (!isBrowser()) {
+      this.destroyed = true;
+      return;
+    }
+    this.renderer = new Renderer(canvas);
+    this.resizeWithWindow = createOptions.resize !== false;
+    if (this.resizeWithWindow) window.addEventListener("resize", this.handleResize);
+    document.addEventListener("visibilitychange", this.handleVisibilityChange);
+  }
+  /**
+   * Fire one burst. Skipped while the page is hidden, after destroy(), and for
+   * visitors who prefer reduced motion (unless disableForReducedMotion is false).
+   */
+  fire(options) {
+    if (this.destroyed || !this.renderer || document.hidden) return;
+    const resolved = resolveOptions(options);
+    if (resolved.disableForReducedMotion && prefersReducedMotion()) return;
+    this.renderer.setZIndex(resolved.zIndex);
+    const { width, height } = this.renderer.getDimensions();
+    this.pool.spawn(resolved, width, height);
+    this.scheduleFrame();
+  }
+  /**
+   * Fire a built-in preset; options override the preset's own values
+   */
+  preset(name, options) {
+    if (!isPresetName(name) || this.destroyed) return;
+    for (const burst of PRESETS[name].bursts) {
+      const merged = mergeOptions(burst.options, options);
+      if (burst.delay) {
+        const id = setTimeout(() => {
+          this.timeouts.delete(id);
+          this.fire(merged);
+        }, burst.delay);
+        this.timeouts.add(id);
+      } else {
+        this.fire(merged);
+      }
+    }
+  }
+  /**
+   * Fire a small burst every `interval` ms until the returned function is
+   * called, or until reset() or destroy()
+   */
+  continuous(options, interval = 250) {
+    if (this.destroyed) return () => {
+    };
+    const merged = mergeOptions(CONTINUOUS_DEFAULTS, options);
+    const delay = Number.isFinite(interval) && interval >= 16 ? interval : 250;
+    const id = setInterval(() => this.fire(merged), delay);
+    this.intervals.add(id);
+    return () => {
+      clearInterval(id);
+      this.intervals.delete(id);
+    };
+  }
+  /**
+   * Pause the animation; particles stay where they are
+   */
+  pause() {
+    this.paused = true;
+    this.cancelFrame();
+  }
+  /**
+   * Resume after pause()
+   */
+  resume() {
+    this.paused = false;
+    this.scheduleFrame();
+  }
+  /**
+   * Clear all particles, cancel scheduled bursts and streams, stop animating and
+   * undo pause()
+   */
+  reset() {
+    this.paused = false;
+    this.cancelFrame();
+    for (const id of this.timeouts) clearTimeout(id);
+    for (const id of this.intervals) clearInterval(id);
+    this.timeouts.clear();
+    this.intervals.clear();
+    this.pool.reset();
+    this.renderer?.clear();
+  }
+  /**
+   * Reset, remove listeners and remove the canvas if this instance created it.
+   * The instance ignores every call afterwards.
+   */
+  destroy() {
+    if (this.destroyed) return;
+    this.reset();
+    this.destroyed = true;
+    if (this.resizeWithWindow) window.removeEventListener("resize", this.handleResize);
+    document.removeEventListener("visibilitychange", this.handleVisibilityChange);
+    this.renderer?.destroy();
+  }
+  /**
+   * Start the loop if there is something to animate and nothing prevents it
+   */
+  scheduleFrame() {
+    if (this.frameId !== null || this.paused || this.destroyed || document.hidden || this.pool.activeCount === 0) {
+      return;
+    }
+    this.lastTime = performance.now();
+    this.frameId = requestAnimationFrame(this.tick);
+  }
+  cancelFrame() {
+    if (this.frameId !== null) {
+      cancelAnimationFrame(this.frameId);
+      this.frameId = null;
+    }
+  }
+};
+
+// src/global.ts
+var globalInstance = null;
+function getGlobalInstance() {
+  if (!isBrowser()) return null;
+  globalInstance ?? (globalInstance = new Konfetti());
+  return globalInstance;
+}
+function fire(options) {
+  getGlobalInstance()?.fire(options);
+}
+function firePreset(name, options) {
+  getGlobalInstance()?.preset(name, options);
+}
+function originFromElement(element) {
+  const rect = element.getBoundingClientRect();
+  return {
+    x: (rect.left + rect.width / 2) / window.innerWidth,
+    y: (rect.top + rect.height / 2) / window.innerHeight
+  };
+}
+function fireFromElement(element, options = {}) {
+  if (!isBrowser()) return;
+  const { preset: name, ...rest } = options;
+  const preset = isPresetName(name) ? name : void 0;
+  const followsOrigin = preset ? PRESETS[preset].followsOrigin : true;
+  const merged = followsOrigin ? { ...rest, origin: mergeOrigin(originFromElement(element), rest.origin) } : rest;
+  if (preset) {
+    firePreset(preset, merged);
+  } else {
+    fire(merged);
+  }
+}
+function reset() {
+  globalInstance?.reset();
+}
+function destroy() {
+  globalInstance?.destroy();
+  globalInstance = null;
+}
+function create(canvas, createOptions) {
+  const instance = new Konfetti(canvas, createOptions);
+  const fireFn = ((options) => instance.fire(options));
+  fireFn.preset = (name, options) => instance.preset(name, options);
+  fireFn.continuous = (options, interval) => instance.continuous(options, interval);
+  fireFn.reset = () => instance.reset();
+  fireFn.destroy = () => instance.destroy();
+  return fireFn;
+}
+function continuous(options, interval) {
+  return getGlobalInstance()?.continuous(options, interval) ?? (() => {
+  });
+}
+var cannon = (options) => firePreset("cannon", options);
+var explosion = (options) => firePreset("explosion", options);
+var fireworks = (options) => firePreset("fireworks", options);
+var rain = (options) => firePreset("rain", options);
+var snow = (options) => firePreset("snow", options);
+var sideCannons = (options) => firePreset("sideCannons", options);
+var pride = (options) => firePreset("pride", options);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Konfetti,
+  PRESET_NAMES,
+  cannon,
+  continuous,
+  create,
+  destroy,
+  explosion,
+  fire,
+  fireFromElement,
+  firePreset,
+  fireworks,
+  isPresetName,
+  originFromElement,
+  pride,
+  rain,
+  reset,
+  sideCannons,
+  snow
+});
+//# sourceMappingURL=index.cjs.map