bubble-maker 0.0.0-stage → 2.0.0

package/dist/index.js

@@ -0,0 +1,736 @@
+// src/engine.ts
+var BubbleField = class {
+  constructor(o = {}) {
+    this.bubbles = [];
+    this.pointer = { x: -1e5, y: -1e5, inside: false };
+    this.focused = null;
+    this.hoverEnabled = true;
+    this.bounds = null;
+    this.pv = { x: 0, y: 0 };
+    // pointer velocity (px/s), eased
+    this.last = { x: -1e5, y: -1e5, t: 0 };
+    this.stiffness = o.stiffness ?? 40;
+    this.damping = o.damping ?? 6;
+    this.iterations = o.iterations ?? 3;
+    this.gap = o.gap ?? 2;
+    this.reaction = o.reaction ?? 3;
+  }
+  add(init) {
+    const b = {
+      px: init.x,
+      py: init.y,
+      r: init.base,
+      grow: 1.55,
+      hover: 0,
+      hx: init.x,
+      hy: init.y,
+      shape: 0,
+      alpha: 1,
+      ghost: false,
+      fixed: false,
+      kind: "pearl",
+      ...init
+    };
+    this.bubbles.push(b);
+    return b;
+  }
+  /** Gives a bubble an instant velocity (px/s). */
+  kick(b, vx, vy, dt = 1 / 60) {
+    b.px -= vx * dt;
+    b.py -= vy * dt;
+  }
+  hit(x, y) {
+    for (let i = this.bubbles.length - 1; i >= 0; i--) {
+      const b = this.bubbles[i];
+      const dx = x - b.x;
+      const dy = y - b.y;
+      if (dx * dx + dy * dy < b.r * b.r && b.alpha > 0.2) return b;
+    }
+    return null;
+  }
+  step(dtIn) {
+    const dt = Math.min(dtIn, 1 / 30);
+    const bs = this.bubbles;
+    const ease = (rate) => 1 - Math.exp(-dt * rate);
+    const hovered = this.hoverEnabled && this.pointer.inside ? this.hit(this.pointer.x, this.pointer.y) : null;
+    const friction = Math.exp(-this.damping * dt);
+    const level = Math.min(Math.max(this.reaction, 0), 10);
+    const growScale = Math.min(level / 3, 1) * (1 + Math.max(level - 3, 0) / 7 * 0.6);
+    const air = Math.max(level - 2, 0) / 8;
+    const pt = this.pointer;
+    this.last.t += dt;
+    if (pt.x !== this.last.x || pt.y !== this.last.y) {
+      if (this.last.x > -1e4 && pt.inside) {
+        const t = Math.max(this.last.t, 1 / 240);
+        this.pv.x += ((pt.x - this.last.x) / t - this.pv.x) * 0.6;
+        this.pv.y += ((pt.y - this.last.y) / t - this.pv.y) * 0.6;
+      }
+      this.last.x = pt.x;
+      this.last.y = pt.y;
+      this.last.t = 0;
+    } else if (this.last.t > 0.06) {
+      this.pv.x *= 1 - ease(10);
+      this.pv.y *= 1 - ease(10);
+    }
+    const blowing = air > 0 && this.hoverEnabled && pt.inside;
+    const reach = 60 + 160 * air;
+    for (const b of bs) {
+      const on = b === hovered || b === this.focused ? 1 : 0;
+      b.hover += (on - b.hover) * ease(9);
+      const target = b.base * (1 + (b.grow - 1) * growScale * b.hover);
+      b.r += (target - b.r) * ease(11);
+      if (b.fixed) {
+        b.px = b.x;
+        b.py = b.y;
+        continue;
+      }
+      const vx = (b.x - b.px) * friction;
+      const vy = (b.y - b.py) * friction;
+      let ax = this.stiffness * (b.hx - b.x);
+      let ay = this.stiffness * (b.hy - b.y);
+      if (blowing && b.alpha > 0.2 && b !== hovered) {
+        const dx = b.x - pt.x;
+        const dy = b.y - pt.y;
+        const d = Math.hypot(dx, dy) || 1;
+        const gap = d - b.r;
+        if (gap > 0 && gap < reach) {
+          const f = (1 - gap / reach) ** 2;
+          ax += dx / d * 1600 * air * f + (this.pv.x - vx / dt) * 6 * air * f;
+          ay += dy / d * 1600 * air * f + (this.pv.y - vy / dt) * 6 * air * f;
+        }
+      }
+      b.px = b.x;
+      b.py = b.y;
+      b.x += vx + ax * dt * dt;
+      b.y += vy + ay * dt * dt;
+    }
+    for (let it = 0; it < this.iterations; it++) {
+      for (let i = 0; i < bs.length; i++) {
+        const a = bs[i];
+        if (a.ghost) continue;
+        for (let j = i + 1; j < bs.length; j++) {
+          const b = bs[j];
+          if (b.ghost) continue;
+          const dx = b.x - a.x;
+          const dy = b.y - a.y;
+          const min = a.r + b.r + this.gap;
+          const d2 = dx * dx + dy * dy;
+          if (d2 >= min * min || d2 < 1e-6) continue;
+          const d = Math.sqrt(d2);
+          const overlap = min - d;
+          const nx = dx / d;
+          const ny = dy / d;
+          const ma = a.r * a.r * (1 + a.hover * 4);
+          const mb = b.r * b.r * (1 + b.hover * 4);
+          let wa = a.fixed ? 0 : mb / (ma + mb);
+          let wb = b.fixed ? 0 : ma / (ma + mb);
+          if (a.fixed && b.fixed) continue;
+          if (a.fixed) wb = 1;
+          if (b.fixed) wa = 1;
+          a.x -= nx * overlap * wa;
+          a.y -= ny * overlap * wa;
+          b.x += nx * overlap * wb;
+          b.y += ny * overlap * wb;
+        }
+      }
+    }
+    const box = this.bounds;
+    if (box) {
+      for (const b of bs) {
+        if (b.fixed) continue;
+        b.x = Math.min(Math.max(b.x, box.x + b.r), box.x + box.w - b.r);
+        b.y = Math.min(Math.max(b.y, box.y + b.r), box.y + box.h - b.r);
+      }
+    }
+  }
+};
+function prng(seed = 2011) {
+  let s = seed >>> 0;
+  return () => {
+    s = s + 1831565813 >>> 0;
+    let t = s;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+var clamp = (v, a = 0, b = 1) => Math.min(Math.max(v, a), b);
+var lerp = (a, b, t) => a + (b - a) * t;
+var smooth = (e0, e1, x) => {
+  const t = clamp((x - e0) / (e1 - e0));
+  return t * t * (3 - 2 * t);
+};
+var easeInOut = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+
+// src/color.ts
+function parseColor(input) {
+  const s = input.trim().toLowerCase();
+  if (s.startsWith("#")) {
+    let h = s.slice(1);
+    if (h.length === 3 || h.length === 4) h = [...h].map((c) => c + c).join("");
+    if (h.length !== 6 && h.length !== 8) throw new Error(`bubble-maker: invalid colour "${input}"`);
+    const v = parseInt(h, 16);
+    if (Number.isNaN(v)) throw new Error(`bubble-maker: invalid colour "${input}"`);
+    return h.length === 6 ? [v >> 16 & 255, v >> 8 & 255, v & 255, 1] : [v >>> 24 & 255, v >> 16 & 255, v >> 8 & 255, (v & 255) / 255];
+  }
+  const m = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)(?:[\s,/]+([\d.]+%?))?\s*\)$/.exec(s);
+  if (!m) throw new Error(`bubble-maker: invalid colour "${input}"`);
+  const a = m[4] === void 0 ? 1 : m[4].endsWith("%") ? parseFloat(m[4]) / 100 : parseFloat(m[4]);
+  return [Math.round(+m[1]), Math.round(+m[2]), Math.round(+m[3]), Math.min(1, Math.max(0, a))];
+}
+var rgbaString = (c, alpha = 1) => `rgba(${c[0]},${c[1]},${c[2]},${(c[3] * alpha).toFixed(3)})`;
+
+// src/palettes.ts
+var clone = (p) => ({ ...p, opacity: [...p.opacity], face: [...p.face] });
+var defaultPalettes = Object.freeze({
+  // lustrous pearl: milky, slightly translucent, faint nacre at the edge
+  pearl: {
+    light: "#fffffd",
+    body: "#faf7f0",
+    edge: "#eee6d6",
+    rim: "#dcd0ba",
+    opacity: [0.96, 0.9, 0.92, 0.95],
+    clarity: 0.3,
+    face: ["#fdfbf6", "#e6ddcc"],
+    shine: 1,
+    nacre: { color: "255,226,214", alpha: 0.28 },
+    caustic: { color: "255,248,228", alpha: 0.55 },
+    rimShade: "rgba(255,248,230,0.72)",
+    rimWidth: 0.06
+  },
+  // champagne: soft satin, a touch of transparency, no metallic bands
+  gold: {
+    light: "#f2dfac",
+    body: "#dcbe7c",
+    edge: "#c4a15a",
+    rim: "#ac8b44",
+    opacity: [1, 1, 1, 1],
+    clarity: 0.3,
+    face: ["#e4cb92", "#b99650"],
+    shine: 0.62,
+    nacre: null,
+    glow: "240, 206, 128",
+    caustic: { color: "255,234,184", alpha: 0.38 },
+    rimShade: "rgba(255,236,186,0.55)",
+    rimWidth: 0.06
+  },
+  // crystal / soap: the room shows through, the edge catches the light
+  glass: {
+    light: "#ffffff",
+    body: "#fffdf5",
+    edge: "#fffaec",
+    rim: "#ffffff",
+    opacity: [0.04, 0.1, 0.38, 0.7],
+    clarity: 0,
+    face: ["rgba(255,255,255,0.35)", "rgba(234,216,168,0.25)"],
+    shine: 1,
+    nacre: { color: "255,214,170", alpha: 0.22 },
+    caustic: { color: "255,248,228", alpha: 0.55 },
+    rimShade: "rgba(255,248,230,0.72)",
+    rimWidth: 0.045
+  }
+});
+var current = Object.fromEntries(Object.entries(defaultPalettes).map(([k, v]) => [k, clone(v)]));
+var version = 0;
+var paletteVersion = () => version;
+function registerPalettes(palettes) {
+  for (const [kind, p] of Object.entries(palettes)) {
+    const base = current[kind];
+    const merged = { ...base ?? {}, ...p };
+    for (const f of ["light", "body", "edge", "rim", "opacity", "clarity", "face"]) {
+      if (merged[f] === void 0) throw new Error(`bubble-maker: palette "${kind}" is missing "${f}"`);
+    }
+    current[kind] = merged;
+  }
+  version++;
+}
+function getPalette(kind) {
+  return current[kind] ?? current.pearl;
+}
+function listPalettes() {
+  return Object.keys(current);
+}
+function resetPalettes() {
+  current = Object.fromEntries(Object.entries(defaultPalettes).map(([k, v]) => [k, clone(v)]));
+  version++;
+}
+
+// src/draw.ts
+var SIN60 = Math.sqrt(3) / 2;
+var TAU = Math.PI * 2;
+function cellPath(ctx, x, y, a, t) {
+  const c = a * (1 - t);
+  const R = (a - c) / SIN60;
+  ctx.beginPath();
+  if (R < 0.01) {
+    ctx.arc(x, y, a, 0, TAU);
+    return;
+  }
+  for (let i = 0; i < 6; i++) {
+    const th = Math.PI / 3 * i;
+    ctx.arc(x + R * Math.cos(th), y + R * Math.sin(th), c, th - Math.PI / 6, th + Math.PI / 6);
+  }
+  ctx.closePath();
+}
+var SEE = [0.35, 0.75, 0.45, 0.2];
+var prepared = /* @__PURE__ */ new Map();
+var seen = -1;
+function prepare(pal) {
+  const cols = [pal.light, pal.body, pal.edge, pal.rim].map(parseColor);
+  const tint = pal.caustic?.color ?? "255,248,228";
+  return {
+    stops: [0, 0.62, 0.9, 1].map((st, i) => [st, cols[i], pal.opacity[i] * (1 - pal.clarity * SEE[i]), pal.opacity[i]]),
+    face: [pal.face[0], pal.face[1]],
+    nacre: pal.nacre === null ? null : pal.nacre ? [pal.nacre.color, pal.nacre.alpha] : ["255,226,214", 0.28],
+    causticTint: tint,
+    causticAlpha: pal.caustic?.alpha ?? 0.55,
+    glow: pal.glow ?? null,
+    shine: pal.shine ?? 1,
+    rimShade: pal.rimShade ?? "rgba(255,248,230,0.72)",
+    rimWidth: pal.rimWidth ?? 0.06
+  };
+}
+function palette(kind) {
+  if (seen !== paletteVersion()) {
+    prepared.clear();
+    seen = paletteVersion();
+  }
+  let p = prepared.get(kind);
+  if (!p) {
+    p = prepare(getPalette(kind));
+    prepared.set(kind, p);
+  }
+  return p;
+}
+function nearestLight(x, y, lights) {
+  let best = lights[0];
+  let bd = Infinity;
+  for (const l of lights) {
+    const d = (l.x - x) ** 2 + (l.y - y) ** 2;
+    if (d < bd) {
+      bd = d;
+      best = l;
+    }
+  }
+  return best;
+}
+var ROOM = ["rgba(250,244,232,0.5)", "rgba(226,212,186,0.62)"];
+function paintBubble(ctx, b, o = {}) {
+  const a = b.r;
+  const t = b.shape;
+  if (a < 0.5 || b.alpha <= 0.01) return;
+  const P = palette(b.kind);
+  const lights = o.lights?.length ? o.lights : [{ x: b.x - 1e3, y: b.y - 1600 }];
+  const L = nearestLight(b.x, b.y, lights);
+  let lx = L.x - b.x;
+  let ly = L.y - b.y;
+  const ll = Math.hypot(lx, ly) || 1;
+  lx /= ll;
+  ly /= ll;
+  ctx.save();
+  ctx.globalAlpha = b.alpha;
+  ctx.translate(b.x, b.y);
+  const vx = b.x - b.px;
+  const vy = b.y - b.py;
+  const stretch = o.flex ? Math.min(Math.hypot(vx, vy) / (a * 1.5 + 4), 0.12) * (1 - t) : 0;
+  if (stretch > 0.01) {
+    const ang = Math.atan2(vy, vx);
+    ctx.rotate(ang);
+    ctx.scale(1 + stretch * 0.6, 1 - stretch * 0.4);
+    ctx.rotate(-ang);
+  }
+  let body;
+  if (t > 0.6) {
+    body = ctx.createLinearGradient(lx * a, ly * a, -lx * a, -ly * a);
+    body.addColorStop(0, P.face[0]);
+    body.addColorStop(1, P.face[1]);
+  } else {
+    body = ctx.createRadialGradient(lx * a * 0.35, ly * a * 0.35, a * 0.05, 0, 0, a);
+    const k = Math.min(1, t / 0.6);
+    const solid = k * k * (3 - 2 * k);
+    for (const [s, c, clear, firm] of P.stops) body.addColorStop(s, rgbaString(c, clear + (firm - clear) * solid));
+    if (o.dark) {
+      const [r0, r1] = o.room ?? ROOM;
+      const room = ctx.createRadialGradient(lx * a * 0.3, ly * a * 0.3, 0, 0, 0, a);
+      room.addColorStop(0, r0);
+      room.addColorStop(1, r1);
+      cellPath(ctx, 0, 0, a, t);
+      ctx.fillStyle = room;
+      ctx.fill();
+    }
+  }
+  if (o.wallShadow && t > 0.6) {
+    ctx.shadowColor = `rgba(96, 72, 30, ${0.32 * (t - 0.6) / 0.4})`;
+    ctx.shadowBlur = a * 0.7;
+    ctx.shadowOffsetX = -lx * a * 0.18;
+    ctx.shadowOffsetY = a * 0.22;
+  }
+  if (P.glow && o.glow) {
+    ctx.shadowColor = `rgba(${P.glow}, ${0.65 * o.glow})`;
+    ctx.shadowBlur = a * 1.8 * o.glow;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 0;
+  }
+  cellPath(ctx, 0, 0, a, t);
+  ctx.fillStyle = body;
+  ctx.fill();
+  ctx.shadowColor = "transparent";
+  ctx.shadowBlur = 0;
+  ctx.shadowOffsetX = 0;
+  ctx.shadowOffsetY = 0;
+  ctx.save();
+  cellPath(ctx, 0, 0, a, t);
+  ctx.clip();
+  if (P.nacre && t < 0.7) {
+    const n = ctx.createRadialGradient(-lx * a * 0.55, -ly * a * 0.55, 0, -lx * a * 0.55, -ly * a * 0.55, a * 0.9);
+    n.addColorStop(0, `rgba(${P.nacre[0]},${P.nacre[1]})`);
+    n.addColorStop(0.5, "rgba(214,236,240,0.14)");
+    n.addColorStop(1, "rgba(255,255,255,0)");
+    ctx.fillStyle = n;
+    ctx.fillRect(-a, -a, a * 2, a * 2);
+  }
+  const bubbleness = 1 - Math.min(1, t / 0.75);
+  for (const l of lights) {
+    let dx = l.x - b.x;
+    let dy = l.y - b.y;
+    const d = Math.hypot(dx, dy) || 1;
+    dx /= d;
+    dy /= d;
+    const near = l === L ? 1 : 0.55;
+    const px = dx * a * 0.52;
+    const py = dy * a * 0.52;
+    const w = a * (0.16 + 0.1 * near);
+    const h = a * (0.07 + 0.05 * near);
+    const g = ctx.createRadialGradient(px, py, 0, px, py, w);
+    const strength = Math.min(1, P.shine * near * (0.35 + 0.65 * bubbleness));
+    g.addColorStop(0, `rgba(255,255,255,${strength})`);
+    g.addColorStop(1, "rgba(255,255,255,0)");
+    ctx.fillStyle = g;
+    ctx.beginPath();
+    ctx.ellipse(px, py, w, h, Math.atan2(dy, dx) + Math.PI / 2, 0, TAU);
+    ctx.fill();
+    if (near === 1 && bubbleness > 0 && a > 6) {
+      const core = ctx.createRadialGradient(px, py, 0, px, py, a * 0.075);
+      core.addColorStop(0, `rgba(255,255,255,${(0.95 * bubbleness).toFixed(3)})`);
+      core.addColorStop(1, "rgba(255,255,255,0)");
+      ctx.fillStyle = core;
+      ctx.beginPath();
+      ctx.ellipse(px, py, a * 0.075, a * 0.05, Math.atan2(dy, dx) + Math.PI / 2, 0, TAU);
+      ctx.fill();
+    }
+  }
+  if (bubbleness > 0) {
+    const cx = -lx * a * 0.58;
+    const cy = -ly * a * 0.58;
+    const c = ctx.createRadialGradient(cx, cy, 0, cx, cy, a * 0.42);
+    c.addColorStop(0, `rgba(${P.causticTint},${(P.causticAlpha * bubbleness).toFixed(3)})`);
+    c.addColorStop(1, `rgba(${P.causticTint},0)`);
+    ctx.fillStyle = c;
+    ctx.fillRect(-a, -a, a * 2, a * 2);
+  }
+  if (t > 0.5) {
+    const s = ctx.createLinearGradient(lx * a, ly * a, -lx * a, -ly * a);
+    s.addColorStop(0, `rgba(255,255,255,${0.32 * (t - 0.5) * 2})`);
+    s.addColorStop(0.45, "rgba(255,255,255,0)");
+    ctx.fillStyle = s;
+    ctx.fillRect(-a, -a, a * 2, a * 2);
+  }
+  ctx.restore();
+  const rim = ctx.createLinearGradient(lx * a, ly * a, -lx * a, -ly * a);
+  rim.addColorStop(0, "rgba(255,255,255,1)");
+  rim.addColorStop(0.35, "rgba(255,255,255,0)");
+  rim.addColorStop(0.7, "rgba(255,255,255,0)");
+  rim.addColorStop(1, P.rimShade);
+  ctx.lineWidth = Math.max(0.8, a * P.rimWidth);
+  ctx.strokeStyle = rim;
+  cellPath(ctx, 0, 0, a - ctx.lineWidth / 2, t);
+  ctx.stroke();
+  ctx.restore();
+}
+
+// src/bubbles.ts
+var DEFAULT_KINDS = { pearl: 0.62, gold: 0.24, glass: 0.14 };
+function createBubbles(target, options = {}) {
+  const canvas = typeof target === "string" ? document.querySelector(target) : target;
+  const ctx = canvas?.getContext("2d");
+  if (!canvas || !ctx) throw new Error("bubble-maker: a <canvas> element is needed");
+  const o = {
+    count: "auto",
+    maxBubbles: 90,
+    size: [0.035, 0.11],
+    kinds: DEFAULT_KINDS,
+    reaction: 5,
+    hoverGrow: 1.6,
+    float: 0.015,
+    flex: true,
+    clickToCreate: true,
+    honeycomb: 0.045,
+    background: null,
+    maxDpr: 2,
+    seed: 7,
+    respectReducedMotion: true,
+    dark: false,
+    ...options
+  };
+  if (o.palettes) registerPalettes(o.palettes);
+  const rand = prng(o.seed);
+  const field = new BubbleField({ stiffness: 18, damping: 3.2, iterations: 4, gap: 2, ...o.physics, reaction: o.reaction });
+  const meta = /* @__PURE__ */ new Map();
+  const reducedMotion = o.respectReducedMotion && typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+  let W = 0;
+  let H = 0;
+  let unit = 1;
+  let compressed = false;
+  let morph = 0;
+  let running = false;
+  let visible = true;
+  let last = 0;
+  let raf = 0;
+  let destroyed = false;
+  const pickKind = () => {
+    const entries = Object.entries(o.kinds);
+    let total = 0;
+    for (const [, w] of entries) total += w;
+    let r = rand() * total;
+    for (const [k, w] of entries) if ((r -= w) <= 0) return k;
+    return entries[0]?.[0] ?? "pearl";
+  };
+  const phone = () => W < 600;
+  const randomRadius = () => unit * (phone() ? o.size[0] * 1.5 + rand() * o.size[1] * 0.7 : o.size[0] + rand() * (o.size[1] - o.size[0]));
+  function add(init = {}) {
+    const x = init.x ?? lerp(W * 0.08, W * 0.92, rand());
+    const y = init.y ?? lerp(H * 0.12, H * 0.88, rand());
+    const r = init.radius ?? randomRadius();
+    const b = field.add({ x, y, base: r * 0.2, kind: init.kind ?? pickKind(), grow: o.hoverGrow });
+    meta.set(b, { x, y, r, phase: rand() * Math.PI * 2 });
+    if (compressed) lattice();
+    return b;
+  }
+  function resize() {
+    const r = canvas.getBoundingClientRect();
+    W = r.width;
+    H = r.height;
+    const dpr = Math.min(window.devicePixelRatio || 1, o.maxDpr);
+    canvas.width = Math.max(1, Math.round(W * dpr));
+    canvas.height = Math.max(1, Math.round(H * dpr));
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    unit = Math.min(W, H * 1.4);
+    field.bounds = { x: 0, y: 0, w: W, h: H };
+    for (const m of meta.values()) {
+      m.x = Math.min(m.x, W - 10);
+      m.y = Math.min(m.y, H - 10);
+    }
+    if (compressed) lattice();
+  }
+  function lattice() {
+    const list = [...meta.keys()];
+    const a = unit * (phone() ? o.honeycomb * 1.5 : o.honeycomb);
+    const R = (2 * a + 2) / Math.sqrt(3);
+    const slots = [];
+    const n2 = Math.ceil(Math.sqrt(list.length)) + 3;
+    for (let q = -n2; q <= n2; q++) {
+      for (let r = -n2; r <= n2; r++) {
+        const x = W / 2 + 1.5 * R * q;
+        const y = H / 2 + Math.sqrt(3) * R * (r + q / 2);
+        if (x < a || x > W - a || y < a || y > H - a) continue;
+        slots.push({ x, y, d: Math.hypot(x - W / 2, (y - H / 2) * 1.2) });
+      }
+    }
+    slots.sort((s1, s2) => s1.d - s2.d);
+    const pool = new Set(list);
+    for (const m of meta.values()) delete m.slot;
+    for (const s of slots) {
+      if (!pool.size) break;
+      let best = null;
+      let bd = Infinity;
+      for (const b of pool) {
+        const d = (b.x - s.x) ** 2 + (b.y - s.y) ** 2;
+        if (d < bd) {
+          bd = d;
+          best = b;
+        }
+      }
+      if (!best) break;
+      pool.delete(best);
+      meta.get(best).slot = { x: s.x, y: s.y, a };
+    }
+  }
+  const lightsNow = () => typeof o.lights === "function" ? o.lights(W, H) : o.lights ?? [{ x: W * 0.3, y: -H * 0.35 }, { x: W * 0.72, y: -H * 0.3 }];
+  function frame(now) {
+    if (!running || destroyed) return;
+    const dt = Math.min(Math.max((now - last) / 1e3, 0), 0.25);
+    last = now;
+    const t = now / 1e3;
+    morph = lerp(morph, compressed ? 1 : 0, 1 - Math.exp(-dt * 3));
+    field.hoverEnabled = !compressed;
+    for (const [b, m] of meta) {
+      if (compressed && m.slot) {
+        b.hx = m.slot.x;
+        b.hy = m.slot.y;
+        b.base = lerp(b.base, m.slot.a, 0.12);
+      } else {
+        b.hx = m.x + Math.sin(t * 0.7 + m.phase) * unit * o.float;
+        b.hy = m.y + Math.cos(t * 0.6 + m.phase) * unit * o.float;
+        b.base = lerp(b.base, m.r, 0.08);
+      }
+      b.shape = smooth(0.35, 1, morph);
+      b.grow = o.hoverGrow;
+    }
+    const steps = Math.min(8, Math.max(1, Math.ceil(dt * 60)));
+    for (let i = 0; i < steps; i++) field.step(dt / steps);
+    draw();
+    if (visible) raf = requestAnimationFrame(frame);
+    else running = false;
+  }
+  function draw() {
+    if (o.background) {
+      ctx.fillStyle = o.background;
+      ctx.fillRect(0, 0, W, H);
+    } else ctx.clearRect(0, 0, W, H);
+    const lights = lightsNow();
+    for (const b of meta.keys()) paintBubble(ctx, b, { lights, glow: morph * 0.5, wallShadow: morph > 0.4, flex: o.flex, dark: o.dark });
+  }
+  function start() {
+    if (running || destroyed) return;
+    running = true;
+    last = performance.now();
+    raf = requestAnimationFrame(frame);
+  }
+  function stop() {
+    running = false;
+    cancelAnimationFrame(raf);
+  }
+  const pointerAt = (e) => {
+    const r = canvas.getBoundingClientRect();
+    field.pointer.x = e.clientX - r.left;
+    field.pointer.y = e.clientY - r.top;
+    field.pointer.inside = true;
+  };
+  const onMove = (e) => pointerAt(e);
+  const onLeave = () => field.pointer.inside = false;
+  const onDown = (e) => e.pointerType !== "mouse" && pointerAt(e);
+  let releaseTimer = 0;
+  const onUp = (e) => {
+    if (e.pointerType === "mouse") return;
+    clearTimeout(releaseTimer);
+    releaseTimer = window.setTimeout(() => field.pointer.inside = false, 450);
+  };
+  const onClick = (e) => {
+    if (!o.clickToCreate) return;
+    const r = canvas.getBoundingClientRect();
+    const x = e.clientX - r.left;
+    const y = e.clientY - r.top;
+    if (field.hit(x, y)) return;
+    if (meta.size >= o.maxBubbles) return;
+    const b = add({ x, y, radius: unit * (phone() ? 0.05 + rand() * 0.06 : 0.03 + rand() * 0.05) });
+    o.onCreate?.(b);
+  };
+  canvas.addEventListener("pointermove", onMove);
+  canvas.addEventListener("pointerleave", onLeave);
+  canvas.addEventListener("pointerdown", onDown);
+  canvas.addEventListener("pointerup", onUp);
+  canvas.addEventListener("pointercancel", onUp);
+  canvas.addEventListener("click", onClick);
+  const ro = typeof ResizeObserver === "function" ? new ResizeObserver(() => resize()) : null;
+  ro?.observe(canvas);
+  const io = typeof IntersectionObserver === "function" ? new IntersectionObserver(([entry]) => {
+    visible = entry.isIntersecting;
+    if (visible) start();
+  }) : null;
+  io?.observe(canvas);
+  resize();
+  const n = o.count === "auto" ? Math.round(Math.min(48, Math.max(20, W * H / 9e3))) : o.count;
+  for (let i = 0; i < n; i++) add();
+  for (let i = 0; i < 200; i++) field.step(1 / 60);
+  if (reducedMotion) {
+    compressed = true;
+    morph = 1;
+    lattice();
+    for (const [b, m] of meta) {
+      b.x = b.px = m.slot?.x ?? b.x;
+      b.y = b.py = m.slot?.y ?? b.y;
+      b.base = b.r = m.slot?.a ?? b.base;
+      b.shape = 1;
+    }
+    draw();
+  } else start();
+  return {
+    field,
+    options: o,
+    get bubbles() {
+      return [...meta.keys()];
+    },
+    get compressed() {
+      return compressed;
+    },
+    add,
+    remove(b) {
+      meta.delete(b);
+      const i = field.bubbles.indexOf(b);
+      if (i >= 0) field.bubbles.splice(i, 1);
+      if (compressed) lattice();
+    },
+    clear() {
+      meta.clear();
+      field.bubbles.length = 0;
+    },
+    compress() {
+      compressed = true;
+      lattice();
+    },
+    release() {
+      compressed = false;
+    },
+    toggle() {
+      compressed = !compressed;
+      if (compressed) lattice();
+      return compressed;
+    },
+    shake(strength = 2400) {
+      compressed = false;
+      for (const b of meta.keys()) field.kick(b, (rand() - 0.5) * strength, (rand() - 0.5) * strength);
+    },
+    setReaction(level) {
+      field.reaction = level;
+    },
+    setPalette(kind, palette2) {
+      registerPalettes({ [kind]: palette2 });
+    },
+    resize,
+    start,
+    stop,
+    destroy() {
+      destroyed = true;
+      stop();
+      clearTimeout(releaseTimer);
+      ro?.disconnect();
+      io?.disconnect();
+      canvas.removeEventListener("pointermove", onMove);
+      canvas.removeEventListener("pointerleave", onLeave);
+      canvas.removeEventListener("pointerdown", onDown);
+      canvas.removeEventListener("pointerup", onUp);
+      canvas.removeEventListener("pointercancel", onUp);
+      canvas.removeEventListener("click", onClick);
+      meta.clear();
+      field.bubbles.length = 0;
+    }
+  };
+}
+export {
+  BubbleField,
+  cellPath,
+  clamp,
+  createBubbles,
+  defaultPalettes,
+  easeInOut,
+  getPalette,
+  lerp,
+  listPalettes,
+  paintBubble,
+  parseColor,
+  prng,
+  registerPalettes,
+  resetPalettes,
+  smooth
+};
+//# sourceMappingURL=index.js.map