particle-network-bg 0.1.0 → 1.0.0

package/README.md

@@ -15,10 +15,10 @@ Run locally:
 
 ```bash
 # Vanilla
-cd lib/demo/vanilla && npm install && npm run dev
+cd demo/vanilla && npm install && npm run dev
 
 # React
-cd lib/demo/react && npm install && npm run dev
+cd demo/react && npm install && npm run dev
 ```
 
 ## Install
@@ -153,11 +153,13 @@ new ParticleNetwork(canvas, {
     color: "#88ccff",
     opacity: 0.6,
     reflectionStrength: 0.85,
-    highlightPosition: "top-left",
+    highlightPosition: "top-left", // "top-left" | "top" | "top-right" | "center" | "bottom-right"
     highlightColor: "#ffffff",
     shadowStrength: 0.4,
     secondaryReflection: 0.25,
     secondaryHighlightPosition: "bottom-right",
+    minRadius: 20,            // min size for liquid glass particles (overrides root minRadius)
+    maxRadius: 40,            // max size for liquid glass particles (overrides root maxRadius)
   },
 });
 ```
@@ -174,7 +176,7 @@ new ParticleNetwork(canvas, {
     { type: "asset", asset: "star", count: 20, liquidGlass: true },
   ],
   assets: { star: "https://..." },
-  liquidGlass: { mergeDistance: 40, color: "#88ccff", ... },
+  liquidGlass: { color: "#88ccff", blur: 12, contrast: 25, ... },
 });
 ```
 
@@ -289,12 +291,140 @@ new ParticleNetwork(canvas, {
 });
 ```
 
+## Child Particles
+
+Attach real UI components (React nodes or DOM elements) as physics particles. Each child particle has an anchor point it springs back to, reacts to the mouse, and can optionally render as a liquid glass blob.
+
+### React
+
+Use `ChildParticle` or `GlassChildParticle` as children of `ParticleNetworkBg`:
+
+```jsx
+import { ParticleNetworkBg, ChildParticle, GlassChildParticle } from "particle-network-bg/react";
+
+function App() {
+  return (
+    <ParticleNetworkBg config={{ particleCount: 60 }} style={{ width: "100%", height: "100vh" }}>
+      {/* Normal circle particle with a React child */}
+      <ChildParticle id="card-1" x={300} y={200} radius={50}>
+        <div style={{ color: "#fff", fontSize: 12 }}>Hello</div>
+      </ChildParticle>
+
+      {/* Liquid glass blob particle */}
+      <GlassChildParticle id="clock" x={600} y={400} radius={60}>
+        <span>🕐</span>
+      </GlassChildParticle>
+
+      {/* Rectangular child particle */}
+      <ChildParticle id="widget" x={900} y={300} width={160} height={80} borderRadius={16}>
+        <div>Widget content</div>
+      </ChildParticle>
+    </ParticleNetworkBg>
+  );
+}
+```
+
+### `ChildParticle` / `GlassChildParticle` Props
+
+| Prop             | Type      | Default  | Description                                                   |
+| ---------------- | --------- | -------- | ------------------------------------------------------------- |
+| `id`             | string    | required | Unique identifier                                             |
+| `x`              | number    | required | Anchor X position (px)                                        |
+| `y`              | number    | required | Anchor Y position (px)                                        |
+| `radius`         | number    | required | Particle radius (px). Used for physics and as size            |
+| `width`          | number    | —        | Rectangular width (px). Set with `height` for rect shape      |
+| `height`         | number    | —        | Rectangular height (px)                                       |
+| `borderRadius`   | number    | —        | Border radius (px) for rectangular shapes. Default: fully round |
+| `overflow`       | string    | `"hidden"` | CSS overflow for the child content container                |
+| `anchorForce`    | number    | `0.05`   | Spring force pulling back to anchor (0–1). Lower = more floaty |
+| `mouseInfluence` | number    | `0.1`    | Mouse influence multiplier (0–1). 0 = ignores mouse           |
+| `children`       | ReactNode | —        | Content to render inside the particle                         |
+| `style`          | CSSProperties | —   | Style applied to the inner wrapper div                        |
+| `className`      | string    | —        | Class applied to the inner wrapper div                        |
+
+### Vanilla JS
+
+Use `addChildParticle` / `removeChildParticle` on the `ParticleNetwork` instance directly:
+
+```js
+const network = new ParticleNetwork(canvas, { particleCount: 60 });
+network.start();
+
+// Add a child particle
+network.addChildParticle({
+  id: "card-1",
+  x: 300,
+  y: 200,
+  radius: 50,
+  anchorForce: 0.05,
+  mouseInfluence: 0.1,
+  liquidGlass: false,
+});
+
+// Update its anchor (e.g. on scroll/resize)
+network.updateChildParticle("card-1", { x: 400, y: 250 });
+
+// Get current positions every frame via callback
+network.onChildUpdate = (positions) => {
+  const pos = positions.get("card-1");
+  // pos.x, pos.y, pos.radius, pos.currentRadius, pos.width, pos.height, pos.rotation
+  myDomEl.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
+};
+
+// Remove
+network.removeChildParticle("card-1");
+```
+
+### Child Particle API
+
+| Method / Property                              | Description                                                          |
+| ---------------------------------------------- | -------------------------------------------------------------------- |
+| `addChildParticle(config)`                     | Register a child particle. Creates the particle with anchor physics. |
+| `removeChildParticle(id)`                      | Remove a child particle by ID.                                       |
+| `updateChildParticle(id, updates)`             | Update anchor position or any config property at runtime.            |
+| `getChildParticlePositions()`                  | Returns a `Map<string, ChildParticlePosition>` with current state.   |
+| `onChildUpdate`                                | Callback fired every frame: `(positions: Map<string, ChildParticlePosition>) => void` |
+| `getChildOverlayElement(id)`                   | Returns the DOM div overlay for a child particle (for manual use).   |
+
+### Types
+
+```ts
+import type { ChildParticleConfig, ChildParticlePosition } from "particle-network-bg";
+
+interface ChildParticleConfig {
+  id: string;
+  x: number;
+  y: number;
+  radius: number;
+  width?: number;
+  height?: number;
+  borderRadius?: number;
+  overflow?: string;
+  anchorForce?: number;
+  mouseInfluence?: number;
+  liquidGlass?: boolean;
+}
+
+interface ChildParticlePosition {
+  x: number;
+  y: number;
+  radius: number;
+  currentRadius: number;
+  width?: number;
+  height?: number;
+  rotation: number; // blob rotation in radians (liquid glass only, 0 for normal)
+}
+```
+
 ## API
 
 ### React (`particle-network-bg/react`)
 
-- `ParticleNetworkBg` – Wrapper component. Props: `config`, `style`, `className`
+- `ParticleNetworkBg` – Wrapper component. Props: `config`, `style`, `className`, `children` (for `ChildParticle` / `GlassChildParticle`)
 - `useParticleNetwork(config?)` – Hook that returns a canvas ref
+- `ChildParticle` – React child particle component (see [Child Particles](#child-particles))
+- `GlassChildParticle` – Liquid glass variant of `ChildParticle`
+- `ParticleNetworkContext` – React context exposing the `ParticleNetwork` instance; use `useContext(ParticleNetworkContext)` inside children of `ParticleNetworkBg` for direct instance access
 
 ### `ParticleNetwork` (vanilla)
 
@@ -313,7 +443,11 @@ import type {
   GradientType,
   ConnectionRules,
   LiquidGlassConfig,
+  LiquidGlassHighlightPosition,
   ParticleTypeEntry,
+  ParticleAssetConfig,
+  ChildParticleConfig,
+  ChildParticlePosition,
 } from "particle-network-bg";
 ```
 

package/dist/{chunk-A6P5SQOV.mjs → chunk-VMVSPMPB.mjs}

@@ -73,6 +73,11 @@ var ParticleNetwork = class {
     this.gradientCenter = { x: 0, y: 0 };
     this.smoothedMouseAngle = 0;
     this.gradientDiv = null;
+    this.childParticleConfigs = /* @__PURE__ */ new Map();
+    this.overlayContainer = null;
+    this.childOverlayElements = /* @__PURE__ */ new Map();
+    /** Called every frame with updated child particle positions. */
+    this.onChildUpdate = null;
     this.canvas = canvas;
     const ctx = canvas.getContext("2d", { alpha: true });
     if (!ctx) {
@@ -111,6 +116,58 @@ var ParticleNetwork = class {
     this.gradientDiv.style.cssText = "position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;";
     this.canvas.parentElement?.insertBefore(this.gradientDiv, this.canvas);
   }
+  ensureOverlayContainer() {
+    if (!this.overlayContainer) {
+      this.overlayContainer = document.createElement("div");
+      this.overlayContainer.style.cssText = "position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:hidden;";
+      this.canvas.parentElement?.appendChild(this.overlayContainer);
+    }
+    return this.overlayContainer;
+  }
+  /** Get or create the overlay div for a child particle. */
+  getChildOverlayElement(id) {
+    let el = this.childOverlayElements.get(id);
+    if (!el) {
+      const container = this.ensureOverlayContainer();
+      el = document.createElement("div");
+      el.style.cssText = "position:absolute;pointer-events:auto;display:flex;align-items:center;justify-content:center;will-change:transform;";
+      el.dataset.childParticleId = id;
+      container.appendChild(el);
+      this.childOverlayElements.set(id, el);
+    }
+    return el;
+  }
+  /** Remove the overlay div for a child particle. */
+  removeChildOverlayElement(id) {
+    const el = this.childOverlayElements.get(id);
+    if (el) {
+      el.remove();
+      this.childOverlayElements.delete(id);
+    }
+  }
+  /** Sync all child overlay divs to their particle positions. Called each frame. */
+  updateChildOverlays() {
+    for (const particle of this.particles) {
+      if (!particle.isChild || !particle.childId) continue;
+      const el = this.childOverlayElements.get(particle.childId);
+      if (!el) continue;
+      const px = particle.smoothX ?? particle.x;
+      const py = particle.smoothY ?? particle.y;
+      const isRect = particle.width != null && particle.height != null;
+      const w = isRect ? particle.width : (particle.currentRadius ?? particle.radius) * 2;
+      const h = isRect ? particle.height : (particle.currentRadius ?? particle.radius) * 2;
+      el.style.width = w + "px";
+      el.style.height = h + "px";
+      el.style.transform = `translate(${px - w / 2}px, ${py - h / 2}px)`;
+      if (isRect) {
+        const br = particle.borderRadius ?? Math.min(w, h) / 2;
+        el.style.borderRadius = br + "px";
+      } else {
+        el.style.borderRadius = "50%";
+      }
+      el.style.overflow = particle.overflow ?? "hidden";
+    }
+  }
   validateConfig(config) {
     const numericParams = [
       "particleCount",
@@ -326,6 +383,10 @@ var ParticleNetwork = class {
     this.canvas.removeEventListener("mouseleave", this.boundHandleMouseLeave);
     this.gradientDiv?.remove();
     this.gradientDiv = null;
+    this.overlayContainer?.remove();
+    this.overlayContainer = null;
+    this.childOverlayElements.clear();
+    this.childParticleConfigs.clear();
     this.stop();
   }
   handleMouseMove(e) {
@@ -347,6 +408,7 @@ var ParticleNetwork = class {
     };
   }
   createParticles() {
+    const childParticles = this.particles.filter((p) => p.isChild);
     this.particles = [];
     const total = this.config.particleCount;
     for (let i = 0; i < total; i++) {
@@ -363,6 +425,7 @@ var ParticleNetwork = class {
       });
     }
     this.assignParticleTypes();
+    this.particles.push(...childParticles);
   }
   assignParticleTypes() {
     const { particleTypes, particleAssets, particleCount } = this.config;
@@ -468,7 +531,8 @@ var ParticleNetwork = class {
     this.initBlob(p);
   }
   initBlob(p) {
-    const pointCount = 12;
+    const isRect = p.width != null && p.height != null;
+    const pointCount = isRect ? 28 : 12;
     const modeCount = 3;
     const freqs = [];
     const amps = [];
@@ -529,16 +593,20 @@ var ParticleNetwork = class {
           particle.dz = -Math.abs(particle.dz);
         }
       }
-      if (this.config.pulseEnabled) {
-        this.pulseAngle += this.config.pulseSpeed;
-        const pulseScale = Math.sin(this.pulseAngle) * 0.5 + 1;
-        particle.currentRadius = particle.radius * pulseScale;
-      } else {
+      if (particle.isChild) {
         particle.currentRadius = particle.radius;
-      }
-      if (this.config.depthEffectEnabled) {
-        const depthScale = 0.4 + 0.6 * particle.z;
-        particle.currentRadius = (particle.currentRadius ?? particle.radius) * depthScale;
+      } else {
+        if (this.config.pulseEnabled) {
+          this.pulseAngle += this.config.pulseSpeed;
+          const pulseScale = Math.sin(this.pulseAngle) * 0.5 + 1;
+          particle.currentRadius = particle.radius * pulseScale;
+        } else {
+          particle.currentRadius = particle.radius;
+        }
+        if (this.config.depthEffectEnabled) {
+          const depthScale = 0.4 + 0.6 * particle.z;
+          particle.currentRadius = (particle.currentRadius ?? particle.radius) * depthScale;
+        }
       }
       particle.x += particle.dx;
       particle.y += particle.dy;
@@ -549,8 +617,9 @@ var ParticleNetwork = class {
         if (distance < this.config.mouseRadius) {
           const force = (this.config.mouseRadius - distance) / this.config.mouseRadius;
           const angle = Math.atan2(dy, dx);
-          const fx = Math.cos(angle) * force * 0.5;
-          const fy = Math.sin(angle) * force * 0.5;
+          const mouseScale = particle.isChild ? particle.mouseInfluence ?? 0.1 : 1;
+          const fx = Math.cos(angle) * force * 0.5 * mouseScale;
+          const fy = Math.sin(angle) * force * 0.5 * mouseScale;
           if (particle.mouseAttract) {
             particle.dx += fx;
             particle.dy += fy;
@@ -560,6 +629,15 @@ var ParticleNetwork = class {
           }
         }
       }
+      if (particle.isChild && particle.anchorX != null && particle.anchorY != null) {
+        const anchorF = particle.anchorForce ?? 0.05;
+        const adx = particle.anchorX - particle.x;
+        const ady = particle.anchorY - particle.y;
+        particle.dx += adx * anchorF;
+        particle.dy += ady * anchorF;
+        particle.dx *= 0.7;
+        particle.dy *= 0.7;
+      }
       const minDist = this.config.minParticleDistance ?? 0;
       const minForce = this.config.minParticleForce ?? 0.5;
       if (minDist > 0 && minForce > 0) {
@@ -573,25 +651,37 @@ var ParticleNetwork = class {
           const gap = dist - r1 - r2;
           if (gap < minDist && dist > 1e-3) {
             const strength = (minDist - gap) / minDist * minForce;
+            const repulsionScale = particle.isChild ? 0.1 : 1;
             const ux = -dx / dist;
             const uy = -dy / dist;
-            particle.dx += ux * strength;
-            particle.dy += uy * strength;
+            particle.dx += ux * strength * repulsionScale;
+            particle.dy += uy * strength * repulsionScale;
           }
         }
       }
-      if (particle.x < 0 || particle.x > this.canvas.width) {
-        particle.dx = -particle.dx;
+      if (!particle.isChild) {
+        if (particle.x < 0 || particle.x > this.canvas.width) {
+          particle.dx = -particle.dx;
+        }
+        if (particle.y < 0 || particle.y > this.canvas.height) {
+          particle.dy = -particle.dy;
+        }
       }
-      if (particle.y < 0 || particle.y > this.canvas.height) {
-        particle.dy = -particle.dy;
+      if (!particle.isChild) {
+        const speed = Math.sqrt(
+          particle.dx * particle.dx + particle.dy * particle.dy
+        );
+        if (speed > this.config.moveSpeed) {
+          particle.dx = particle.dx / speed * this.config.moveSpeed;
+          particle.dy = particle.dy / speed * this.config.moveSpeed;
+        }
       }
-      const speed = Math.sqrt(
-        particle.dx * particle.dx + particle.dy * particle.dy
-      );
-      if (speed > this.config.moveSpeed) {
-        particle.dx = particle.dx / speed * this.config.moveSpeed;
-        particle.dy = particle.dy / speed * this.config.moveSpeed;
+      if (particle.isChild) {
+        const smoothing = 0.12;
+        if (particle.smoothX == null) particle.smoothX = particle.x;
+        if (particle.smoothY == null) particle.smoothY = particle.y;
+        particle.smoothX += (particle.x - particle.smoothX) * smoothing;
+        particle.smoothY += (particle.y - particle.smoothY) * smoothing;
       }
     });
   }
@@ -642,6 +732,46 @@ var ParticleNetwork = class {
     }
     this.ctx.closePath();
   }
+  /**
+   * Trace a blob path for a rectangular particle using superellipse interpolation.
+   * roundness: 0 = sharp rectangle, 1 = ellipse.
+   */
+  traceRectBlobPath(cx, cy, halfW, halfH, roundness, blob) {
+    const n = blob.pointCount;
+    const k = Math.max(0.15, Math.min(1, roundness));
+    const sx = blob.mouseStretchX;
+    const sy = blob.mouseStretchY;
+    const pts = [];
+    for (let i = 0; i < n; i++) {
+      const angle = i / n * Math.PI * 2;
+      const ra = angle + blob.rotation;
+      const cosA = Math.cos(angle);
+      const sinA = Math.sin(angle);
+      const signX = cosA >= 0 ? 1 : -1;
+      const signY = sinA >= 0 ? 1 : -1;
+      const bx = signX * Math.pow(Math.abs(cosA) + 1e-9, k) * halfW;
+      const by = signY * Math.pow(Math.abs(sinA) + 1e-9, k) * halfH;
+      let deform = 0;
+      for (let m = 0; m < blob.freqs.length; m++) {
+        deform += blob.amps[m] * Math.sin(blob.freqs[m] * ra + blob.phases[m]);
+      }
+      const scale = 1 + deform;
+      let px = cx + bx * scale;
+      let py = cy + by * scale;
+      px += sx * Math.cos(angle) * Math.max(0, Math.cos(angle));
+      py += sy * Math.sin(angle) * Math.max(0, Math.sin(angle));
+      pts.push({ x: px, y: py });
+    }
+    this.ctx.beginPath();
+    const last = pts[n - 1];
+    const first = pts[0];
+    this.ctx.moveTo((last.x + first.x) / 2, (last.y + first.y) / 2);
+    for (let i = 0; i < n; i++) {
+      const next = pts[(i + 1) % n];
+      this.ctx.quadraticCurveTo(pts[i].x, pts[i].y, (pts[i].x + next.x) / 2, (pts[i].y + next.y) / 2);
+    }
+    this.ctx.closePath();
+  }
   updateBlobMouse(particle) {
     const blob = particle.blob;
     if (!blob) return;
@@ -675,6 +805,7 @@ var ParticleNetwork = class {
     const blob = particle.blob;
     const cx = particle.x;
     const cy = particle.y;
+    const isRect = particle.width != null && particle.height != null;
     let opacity = (lg.opacity ?? DEFAULT_LIQUID_GLASS.opacity) * this.config.particleOpacity;
     if (this.config.depthEffectEnabled) {
       opacity *= 0.6 + 0.4 * particle.z;
@@ -691,7 +822,8 @@ var ParticleNetwork = class {
     const baseG = parseInt(color.slice(3, 5), 16);
     const baseB = parseInt(color.slice(5, 7), 16);
     const shadowStr = lg.shadowStrength ?? DEFAULT_LIQUID_GLASS.shadowStrength;
-    const hlDist = r * 0.35;
+    const gradR = isRect ? Math.max(particle.width, particle.height) / 2 : r;
+    const hlDist = gradR * 0.35;
     const hlX = cx + Math.cos(blob.hlAngle) * hlDist;
     const hlY = cy + Math.sin(blob.hlAngle) * hlDist;
     const lr = Math.min(255, baseR + Math.round((255 - baseR) * 0.55));
@@ -704,17 +836,25 @@ var ParticleNetwork = class {
     const grad = this.ctx.createRadialGradient(
       hlX,
       hlY,
-      r * 0.05,
+      gradR * 0.05,
       cx,
       cy,
-      r * 1.05
+      gradR * 1.05
     );
     grad.addColorStop(0, `rgba(${lr},${lgr},${lb}, ${opacity * 0.95})`);
     grad.addColorStop(0.4, `rgba(${baseR},${baseG},${baseB}, ${opacity * 0.8})`);
     grad.addColorStop(0.8, `rgba(${dr},${dg},${db}, ${opacity * 0.6})`);
     grad.addColorStop(1, `rgba(${dr},${dg},${db}, ${opacity * 0.25})`);
     this.ctx.fillStyle = grad;
-    this.traceBlobPath(cx, cy, r, blob);
+    if (isRect) {
+      const halfW = particle.width / 2;
+      const halfH = particle.height / 2;
+      const minDim = Math.min(halfW, halfH);
+      const roundness = particle.borderRadius != null ? Math.min(particle.borderRadius / minDim, 1) : 0.3;
+      this.traceRectBlobPath(cx, cy, halfW, halfH, roundness, blob);
+    } else {
+      this.traceBlobPath(cx, cy, r, blob);
+    }
     this.ctx.fill();
     this.ctx.restore();
   }
@@ -759,6 +899,17 @@ var ParticleNetwork = class {
         } else {
           this.ctx.drawImage(img, x, y, size, size);
         }
+      } else if (particle.isChild && particle.width != null && particle.height != null) {
+        this.ctx.globalAlpha = opacity;
+        this.ctx.fillStyle = defaultColor;
+        const w = particle.width;
+        const h = particle.height;
+        const br = particle.borderRadius ?? Math.min(w, h) / 2;
+        const x = particle.x - w / 2;
+        const y = particle.y - h / 2;
+        this.ctx.beginPath();
+        this.ctx.roundRect(x, y, w, h, br);
+        this.ctx.fill();
       } else {
         this.ctx.globalAlpha = opacity;
         this.ctx.fillStyle = defaultColor;
@@ -877,6 +1028,84 @@ var ParticleNetwork = class {
     if (!result) return "255,255,255";
     return result.slice(1).map((n) => parseInt(n, 16)).join(",");
   }
+  /** Register a child particle. Creates a new particle with anchor behavior. */
+  addChildParticle(config) {
+    if (this.childParticleConfigs.has(config.id)) {
+      this.removeChildParticle(config.id);
+    }
+    this.childParticleConfigs.set(config.id, config);
+    const particle = {
+      x: config.x,
+      y: config.y,
+      dx: 0,
+      dy: 0,
+      radius: config.radius,
+      z: 0.8 + Math.random() * 0.2,
+      dz: (Math.random() - 0.5) * this.config.depthSpeed * 2,
+      isChild: true,
+      childId: config.id,
+      anchorX: config.x,
+      anchorY: config.y,
+      anchorForce: config.anchorForce ?? 0.05,
+      mouseInfluence: config.mouseInfluence ?? 0.1,
+      width: config.width,
+      height: config.height,
+      borderRadius: config.borderRadius,
+      overflow: config.overflow,
+      smoothX: config.x,
+      smoothY: config.y
+    };
+    if (config.liquidGlass) {
+      particle.liquidGlass = true;
+      this.initBlob(particle);
+    }
+    this.particles.push(particle);
+  }
+  /** Remove a child particle by ID. */
+  removeChildParticle(id) {
+    this.childParticleConfigs.delete(id);
+    this.removeChildOverlayElement(id);
+    const idx = this.particles.findIndex((p) => p.childId === id);
+    if (idx !== -1) this.particles.splice(idx, 1);
+  }
+  /** Update a child particle's anchor position and/or config. */
+  updateChildParticle(id, updates) {
+    const config = this.childParticleConfigs.get(id);
+    if (!config) return;
+    Object.assign(config, updates);
+    const particle = this.particles.find((p) => p.childId === id);
+    if (!particle) return;
+    if (updates.x !== void 0) particle.anchorX = updates.x;
+    if (updates.y !== void 0) particle.anchorY = updates.y;
+    if (updates.radius !== void 0) particle.radius = updates.radius;
+    if (updates.anchorForce !== void 0) particle.anchorForce = updates.anchorForce;
+    if (updates.mouseInfluence !== void 0) particle.mouseInfluence = updates.mouseInfluence;
+    if (updates.width !== void 0) particle.width = updates.width;
+    if (updates.height !== void 0) particle.height = updates.height;
+    if (updates.borderRadius !== void 0) particle.borderRadius = updates.borderRadius;
+    if (updates.overflow !== void 0) particle.overflow = updates.overflow;
+    if (updates.liquidGlass !== void 0) {
+      particle.liquidGlass = updates.liquidGlass;
+      if (updates.liquidGlass && !particle.blob) this.initBlob(particle);
+    }
+  }
+  /** Get current positions of all child particles. */
+  getChildParticlePositions() {
+    const positions = /* @__PURE__ */ new Map();
+    for (const particle of this.particles) {
+      if (!particle.isChild || !particle.childId) continue;
+      positions.set(particle.childId, {
+        x: particle.smoothX ?? particle.x,
+        y: particle.smoothY ?? particle.y,
+        radius: particle.radius,
+        currentRadius: particle.currentRadius ?? particle.radius,
+        width: particle.width,
+        height: particle.height,
+        rotation: particle.blob?.rotation ?? 0
+      });
+    }
+    return positions;
+  }
   stop() {
     this.isRunning = false;
     if (this.animationId !== null) {
@@ -895,6 +1124,12 @@ var ParticleNetwork = class {
     this.updateParticles();
     this.drawParticles();
     this.drawConnections();
+    if (this.childParticleConfigs.size > 0) {
+      this.updateChildOverlays();
+      if (this.onChildUpdate) {
+        this.onChildUpdate(this.getChildParticlePositions());
+      }
+    }
     if (this.isRunning) {
       this.animationId = requestAnimationFrame(() => this.animate());
     }