particle-network-bg 1.0.0 → 1.0.2

package/README.md

@@ -89,6 +89,8 @@ function App() {
 ```
 
 > **Note:** Config is applied on mount. The canvas resizes to the window. When gradients are enabled, a background `<div>` is automatically created behind the canvas for smooth CSS-based gradient rendering.
+>
+> Pulse animations are automatically phase-randomized so particles don't pulse in sync.
 
 ## Configuration
 
@@ -160,29 +162,63 @@ new ParticleNetwork(canvas, {
     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)
+    blobSpeed: 1,             // blob deformation speed multiplier (0 = frozen, 2 = double speed)
   },
 });
 ```
 
 ## Particle Types
 
-Use `particleTypes` to mix circle, asset, and liquid glass particles with full control:
+Use `particleTypes` to mix circle, asset, and liquid glass particles with full control. Each entry can carry **per-type overrides** that shadow the global config:
 
 ```js
 new ParticleNetwork(canvas, {
+  particleCount: 100,
+  particleColor: "#000000",
+  particleOpacity: 1,
+  pulseEnabled: false,
   particleTypes: [
-    { type: "circle", percentage: 50 },
-    { type: "liquidGlass", percentage: 30 },
-    { type: "asset", asset: "star", count: 20, liquidGlass: true },
+    // 50% circles — override color and enable pulse just for these
+    { type: "circle", percentage: 50, color: "#ff6600", pulse: true, pulseSpeed: 0.03 },
+    // 30% liquid glass — override glass config just for these
+    { type: "liquidGlass", percentage: 30, liquidGlass: { color: "#00ccff", opacity: 0.8 } },
+    // 20 asset particles with custom opacity
+    { type: "asset", asset: "star", count: 20, opacity: 0.7 },
   ],
   assets: { star: "https://..." },
-  liquidGlass: { color: "#88ccff", blur: 12, contrast: 25, ... },
+  liquidGlass: { color: "#88ccff", blur: 12, contrast: 25 },
 });
 ```
 
-- **`circle`**: Normal circles
-- **`liquidGlass`**: Liquid glass blobs (merge when close)
-- **`asset`**: Icons/images; use `liquidGlass: true` to combine with glass
+Per-type values are a **shallow override** on top of the root config. Omitted fields fall back to the global value, so existing usage without `particleTypes` stays unchanged.
+
+### Circle type overrides
+
+| Field        | Type    | Description                                  |
+| ------------ | ------- | -------------------------------------------- |
+| `color`      | string  | Particle color (hex). Overrides `particleColor` |
+| `opacity`    | number  | Particle opacity (0–1). Overrides `particleOpacity` |
+| `minRadius`  | number  | Min radius (px). Overrides root `minRadius`  |
+| `maxRadius`  | number  | Max radius (px). Overrides root `maxRadius`  |
+| `pulse`      | boolean | Enable pulse. Overrides `pulseEnabled`       |
+| `pulseSpeed` | number  | Pulse speed. Overrides root `pulseSpeed`     |
+
+### Liquid glass type overrides
+
+| Field        | Type                      | Description                                                    |
+| ------------ | ------------------------- | -------------------------------------------------------------- |
+| `liquidGlass`| `Partial<LiquidGlassConfig>` | Shallow-merged over root `liquidGlass` (color, opacity, minRadius, etc.) |
+| `pulse`      | boolean                   | Enable pulse. Overrides `pulseEnabled`                         |
+| `pulseSpeed` | number                    | Pulse speed. Overrides root `pulseSpeed`                       |
+
+### Asset type overrides
+
+| Field        | Type                                     | Description                                                       |
+| ------------ | ---------------------------------------- | ----------------------------------------------------------------- |
+| `liquidGlass`| `boolean \| Partial<LiquidGlassConfig>`  | `true` for glass rendering, or partial config for per-type glass  |
+| `opacity`    | number                                   | Particle opacity (0–1). Overrides `particleOpacity`               |
+| `pulse`      | boolean                                  | Enable pulse. Overrides `pulseEnabled`                            |
+| `pulseSpeed` | number                                   | Pulse speed. Overrides root `pulseSpeed`                          |
 
 ## Connection Rules
 
@@ -311,7 +347,7 @@ function App() {
       </ChildParticle>
 
       {/* Liquid glass blob particle */}
-      <GlassChildParticle id="clock" x={600} y={400} radius={60}>
+      <GlassChildParticle id="clock" x={600} y={400} radius={60} glassColor="#ff6600" glassOpacity={0.8}>
         <span>🕐</span>
       </GlassChildParticle>
 
@@ -338,6 +374,9 @@ function App() {
 | `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           |
+| `glassOpacity`   | number    | —        | Opacity (0–1) for liquid glass. Overrides global `liquidGlass.opacity` |
+| `glassColor`     | string    | —        | Color (hex) for liquid glass. Overrides global `liquidGlass.color` |
+| `liquidGlassConfig` | `Partial<LiquidGlassConfig>` | — | Full liquid glass config override, merged over global `liquidGlass` |
 | `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                        |
@@ -358,7 +397,9 @@ network.addChildParticle({
   radius: 50,
   anchorForce: 0.05,
   mouseInfluence: 0.1,
-  liquidGlass: false,
+  liquidGlass: true,
+  glassOpacity: 0.7,                 // override global liquidGlass.opacity
+  glassColor: "#ff6600",             // override global liquidGlass.color
 });
 
 // Update its anchor (e.g. on scroll/resize)
@@ -403,6 +444,9 @@ interface ChildParticleConfig {
   anchorForce?: number;
   mouseInfluence?: number;
   liquidGlass?: boolean;
+  glassOpacity?: number;              // overrides global liquidGlass.opacity
+  glassColor?: string;                // overrides global liquidGlass.color
+  liquidGlassConfig?: Partial<LiquidGlassConfig>; // merged over global liquidGlass
 }
 
 interface ChildParticlePosition {
@@ -445,6 +489,9 @@ import type {
   LiquidGlassConfig,
   LiquidGlassHighlightPosition,
   ParticleTypeEntry,
+  CircleTypeEntry,
+  LiquidGlassTypeEntry,
+  AssetTypeEntry,
   ParticleAssetConfig,
   ChildParticleConfig,
   ChildParticlePosition,

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

@@ -43,6 +43,7 @@ var DEFAULT_LIQUID_GLASS = {
   shadowStrength: 0.4,
   secondaryReflection: 0.25,
   secondaryHighlightPosition: "bottom-right",
+  blobSpeed: 1,
   minRadius: 20,
   maxRadius: 40
 };
@@ -158,7 +159,7 @@ var ParticleNetwork = class {
       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)`;
+      el.style.transform = `translate3d(${Math.round(px - w / 2)}px, ${Math.round(py - h / 2)}px, 0)`;
       if (isRect) {
         const br = particle.borderRadius ?? Math.min(w, h) / 2;
         el.style.borderRadius = br + "px";
@@ -314,7 +315,14 @@ var ParticleNetwork = class {
       if (!Array.isArray(config.particleTypes)) {
         throw new Error("particleTypes must be an array");
       }
-      if (!config.assets || typeof config.assets !== "object") {
+      let hasAssetEntries = false;
+      for (const entry of config.particleTypes) {
+        if (entry?.type === "asset") {
+          hasAssetEntries = true;
+          break;
+        }
+      }
+      if (hasAssetEntries && (!config.assets || typeof config.assets !== "object")) {
         throw new Error("assets map is required when using particleTypes with asset entries");
       }
       for (let i = 0; i < config.particleTypes.length; i++) {
@@ -334,8 +342,9 @@ var ParticleNetwork = class {
           if (typeof pt.asset !== "string" || !pt.asset) {
             throw new Error(`particleTypes[${i}].asset must be a non-empty string`);
           }
-          if (!config.assets[pt.asset]) {
-            throw new Error(`particleTypes[${i}]: asset "${pt.asset}" not found in assets`);
+          const assetKey = pt.asset;
+          if (!config.assets?.[assetKey]) {
+            throw new Error(`particleTypes[${i}]: asset "${assetKey}" not found in assets`);
           }
         }
       }
@@ -432,6 +441,8 @@ var ParticleNetwork = class {
     this.particles.forEach((p) => {
       delete p.assetId;
       delete p.liquidGlass;
+      delete p.typeConfig;
+      delete p.pulsePhase;
     });
     if (particleTypes?.length) {
       const counts = [];
@@ -444,15 +455,16 @@ var ParticleNetwork = class {
         }
         if (count > 0) {
           if (pt.type === "circle") {
-            counts.push({ liquidGlass: false, count });
+            counts.push({ entry: pt, liquidGlass: false, count });
           } else if (pt.type === "asset") {
             counts.push({
+              entry: pt,
               assetId: pt.asset,
-              liquidGlass: pt.liquidGlass ?? false,
+              liquidGlass: !!pt.liquidGlass,
               count
             });
           } else {
-            counts.push({ liquidGlass: true, count });
+            counts.push({ entry: pt, liquidGlass: true, count });
           }
         }
       }
@@ -463,9 +475,10 @@ var ParticleNetwork = class {
         [indices[i], indices[j]] = [indices[j], indices[i]];
       }
       let idx = 0;
-      for (const { assetId, liquidGlass, count } of counts) {
+      for (const { entry, assetId, liquidGlass, count } of counts) {
         for (let c = 0; c < count && idx < indices.length; c++, idx++) {
           const p = this.particles[indices[idx]];
+          p.typeConfig = entry;
           if (assetId) p.assetId = assetId;
           p.liquidGlass = liquidGlass;
           if (liquidGlass) this.resizeAsLiquidGlass(p);
@@ -498,6 +511,14 @@ var ParticleNetwork = class {
     if (!particleTypes?.length && (this.config.liquidGlassPercentage != null || this.config.liquidGlassCount != null)) {
       this.assignLiquidGlass();
     }
+    this.particles.forEach((p) => {
+      if (p.isChild) return;
+      const tc = p.typeConfig;
+      const doPulse = tc?.pulse ?? this.config.pulseEnabled;
+      if (doPulse) {
+        p.pulsePhase = Math.random() * Math.PI * 2;
+      }
+    });
     this.assignMouseBehavior();
   }
   assignLiquidGlass() {
@@ -524,8 +545,10 @@ var ParticleNetwork = class {
   }
   resizeAsLiquidGlass(p) {
     const lg = this.getLiquidGlassConfig();
-    const min = lg.minRadius ?? DEFAULT_LIQUID_GLASS.minRadius;
-    const max = lg.maxRadius ?? DEFAULT_LIQUID_GLASS.maxRadius;
+    const tc = p.typeConfig;
+    const perTypeLg = tc && "liquidGlass" in tc && typeof tc.liquidGlass === "object" ? tc.liquidGlass : void 0;
+    const min = perTypeLg?.minRadius ?? lg.minRadius ?? DEFAULT_LIQUID_GLASS.minRadius;
+    const max = perTypeLg?.maxRadius ?? lg.maxRadius ?? DEFAULT_LIQUID_GLASS.maxRadius;
     p.radius = Math.random() * (max - min) + min;
     delete p.currentRadius;
     this.initBlob(p);
@@ -596,9 +619,13 @@ var ParticleNetwork = class {
       if (particle.isChild) {
         particle.currentRadius = particle.radius;
       } else {
-        if (this.config.pulseEnabled) {
-          this.pulseAngle += this.config.pulseSpeed;
-          const pulseScale = Math.sin(this.pulseAngle) * 0.5 + 1;
+        const tc = particle.typeConfig;
+        const doPulse = tc?.pulse ?? this.config.pulseEnabled;
+        if (doPulse) {
+          const speed = tc?.pulseSpeed ?? this.config.pulseSpeed;
+          this.pulseAngle += speed;
+          const phase = particle.pulsePhase ?? 0;
+          const pulseScale = Math.sin(this.pulseAngle + phase) * 0.5 + 1;
           particle.currentRadius = particle.radius * pulseScale;
         } else {
           particle.currentRadius = particle.radius;
@@ -798,7 +825,22 @@ var ParticleNetwork = class {
     blob.mouseStretchY *= 1 - smoothing;
   }
   draw3DFluidSphere(particle) {
-    const lg = this.getLiquidGlassConfig();
+    const tc = particle.typeConfig;
+    let perTypeLg = tc && "liquidGlass" in tc && typeof tc.liquidGlass === "object" ? tc.liquidGlass : void 0;
+    if (particle.isChild && particle.childId) {
+      const childConfig = this.childParticleConfigs.get(particle.childId);
+      if (childConfig) {
+        const overrides = {
+          ...childConfig.liquidGlassConfig ?? {},
+          ...childConfig.glassOpacity != null && { opacity: childConfig.glassOpacity },
+          ...childConfig.glassColor != null && { color: childConfig.glassColor }
+        };
+        if (Object.keys(overrides).length > 0) {
+          perTypeLg = { ...perTypeLg ?? {}, ...overrides };
+        }
+      }
+    }
+    const lg = perTypeLg ? { ...this.getLiquidGlassConfig(), ...perTypeLg } : this.getLiquidGlassConfig();
     const r = particle.currentRadius ?? particle.radius;
     if (r <= 0) return;
     if (!particle.blob) this.initBlob(particle);
@@ -806,46 +848,60 @@ var ParticleNetwork = class {
     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;
+    const hasExplicitChildOpacity = particle.isChild && particle.childId && (() => {
+      const cfg = this.childParticleConfigs.get(particle.childId);
+      return cfg?.glassOpacity != null || cfg?.liquidGlassConfig?.opacity != null;
+    })();
+    let opacity = lg.opacity ?? DEFAULT_LIQUID_GLASS.opacity;
+    if (!hasExplicitChildOpacity) {
+      opacity *= this.config.particleOpacity;
+      if (this.config.depthEffectEnabled) {
+        opacity *= 0.6 + 0.4 * particle.z;
+      }
     }
     if (opacity <= 0) return;
-    blob.rotation += blob.rotSpeed;
+    const blobSpeed = lg.blobSpeed ?? 1;
+    blob.rotation += blob.rotSpeed * blobSpeed;
     for (let m = 0; m < blob.phases.length; m++) {
-      blob.phases[m] += blob.phaseSpeeds[m];
+      blob.phases[m] += blob.phaseSpeeds[m] * blobSpeed;
     }
-    blob.hlAngle += blob.hlAngleSpeed;
+    blob.hlAngle += blob.hlAngleSpeed * blobSpeed;
     this.updateBlobMouse(particle);
     const color = lg.color ?? DEFAULT_LIQUID_GLASS.color;
     const baseR = parseInt(color.slice(1, 3), 16);
     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 refl = (lg.reflectionStrength ?? DEFAULT_LIQUID_GLASS.reflectionStrength) / DEFAULT_LIQUID_GLASS.reflectionStrength;
     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));
-    const lgr = Math.min(255, baseG + Math.round((255 - baseG) * 0.55));
-    const lb = Math.min(255, baseB + Math.round((255 - baseB) * 0.55));
+    const lr = Math.min(255, baseR + Math.round((255 - baseR) * 0.55 * refl));
+    const lgr = Math.min(255, baseG + Math.round((255 - baseG) * 0.55 * refl));
+    const lb = Math.min(255, baseB + Math.round((255 - baseB) * 0.55 * refl));
     const dr = Math.max(0, Math.round(baseR * (1 - shadowStr * 0.35)));
     const dg = Math.max(0, Math.round(baseG * (1 - shadowStr * 0.35)));
     const db = Math.max(0, Math.round(baseB * (1 - shadowStr * 0.35)));
     this.ctx.save();
-    const grad = this.ctx.createRadialGradient(
-      hlX,
-      hlY,
-      gradR * 0.05,
-      cx,
-      cy,
-      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.ctx.globalAlpha = 1;
+    if (hasExplicitChildOpacity && opacity >= 0.99) {
+      this.ctx.fillStyle = `rgba(${baseR},${baseG},${baseB}, ${opacity})`;
+    } else {
+      const grad = this.ctx.createRadialGradient(
+        hlX,
+        hlY,
+        gradR * 0.05,
+        cx,
+        cy,
+        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;
+    }
     if (isRect) {
       const halfW = particle.width / 2;
       const halfH = particle.height / 2;
@@ -883,7 +939,9 @@ var ParticleNetwork = class {
         this.draw3DFluidSphere(particle);
         return;
       }
-      let opacity = this.config.particleOpacity;
+      const tc = particle.typeConfig;
+      const tcOpacity = tc && "opacity" in tc ? tc.opacity : void 0;
+      let opacity = tcOpacity ?? this.config.particleOpacity;
       if (this.config.depthEffectEnabled) {
         opacity *= 0.6 + 0.4 * particle.z;
       }
@@ -900,8 +958,9 @@ var ParticleNetwork = class {
           this.ctx.drawImage(img, x, y, size, size);
         }
       } else if (particle.isChild && particle.width != null && particle.height != null) {
+        const color = (tc && "color" in tc ? tc.color : void 0) ?? defaultColor;
         this.ctx.globalAlpha = opacity;
-        this.ctx.fillStyle = defaultColor;
+        this.ctx.fillStyle = color;
         const w = particle.width;
         const h = particle.height;
         const br = particle.borderRadius ?? Math.min(w, h) / 2;
@@ -911,8 +970,9 @@ var ParticleNetwork = class {
         this.ctx.roundRect(x, y, w, h, br);
         this.ctx.fill();
       } else {
+        const color = (tc && "color" in tc ? tc.color : void 0) ?? defaultColor;
         this.ctx.globalAlpha = opacity;
-        this.ctx.fillStyle = defaultColor;
+        this.ctx.fillStyle = color;
         this.ctx.beginPath();
         this.ctx.arc(particle.x, particle.y, r, 0, Math.PI * 2);
         this.ctx.fill();

package/dist/index.d.mts

@@ -38,23 +38,40 @@ interface LiquidGlassConfig {
     minRadius?: number;
     /** Maximum radius (px) for liquid glass particles (overrides root maxRadius). */
     maxRadius?: number;
+    /** Blob deformation speed multiplier (default 1). 0 = frozen, 2 = double speed. */
+    blobSpeed?: number;
 }
-/** Particle type entry for mixing circle, asset, liquidGlass. */
-type ParticleTypeEntry = {
+interface CircleTypeEntry {
     type: "circle";
+    percentage?: number;
     count?: number;
+    color?: string;
+    opacity?: number;
+    minRadius?: number;
+    maxRadius?: number;
+    pulse?: boolean;
+    pulseSpeed?: number;
+}
+interface LiquidGlassTypeEntry {
+    type: "liquidGlass";
     percentage?: number;
-} | {
+    count?: number;
+    liquidGlass?: Partial<LiquidGlassConfig>;
+    pulse?: boolean;
+    pulseSpeed?: number;
+}
+interface AssetTypeEntry {
     type: "asset";
     asset: string;
-    count?: number;
     percentage?: number;
-    liquidGlass?: boolean;
-} | {
-    type: "liquidGlass";
     count?: number;
-    percentage?: number;
-};
+    liquidGlass?: boolean | Partial<LiquidGlassConfig>;
+    opacity?: number;
+    pulse?: boolean;
+    pulseSpeed?: number;
+}
+/** Particle type entry for mixing circle, asset, liquidGlass with optional per-type overrides. */
+type ParticleTypeEntry = CircleTypeEntry | LiquidGlassTypeEntry | AssetTypeEntry;
 /** Configuration for a child particle that holds a UI component. */
 interface ChildParticleConfig {
     /** Unique identifier linking this particle to a React/DOM child. */
@@ -79,6 +96,12 @@ interface ChildParticleConfig {
     mouseInfluence?: number;
     /** Render as liquid glass particle. Default false. */
     liquidGlass?: boolean;
+    /** Opacity (0–1) for liquid glass child particles. Overrides global liquidGlass.opacity. */
+    glassOpacity?: number;
+    /** Color (hex) for liquid glass child particles. Overrides global liquidGlass.color. */
+    glassColor?: string;
+    /** Full liquid glass config override for child particles. Merged over global liquidGlass. */
+    liquidGlassConfig?: Partial<LiquidGlassConfig>;
 }
 /** Emitted position data for a child particle each frame. */
 interface ChildParticlePosition {
@@ -191,6 +214,10 @@ interface Particle {
     borderRadius?: number;
     /** CSS overflow for the child content overlay. */
     overflow?: string;
+    /** Per-type config entry (shallow overrides root config). */
+    typeConfig?: ParticleTypeEntry;
+    /** Random phase offset (0–2π) for pulse animation. Makes particles pulse out of sync. */
+    pulsePhase?: number;
     /** Smoothed x for overlay positioning. */
     smoothX?: number;
     /** Smoothed y for overlay positioning. */
@@ -276,4 +303,4 @@ declare class ParticleNetwork {
     reset(defaults: Partial<ParticleNetworkConfig>): void;
 }
 
-export { type ChildParticleConfig, type ChildParticlePosition, type ConnectionRules, type GradientType, type LiquidGlassConfig, type LiquidGlassHighlightPosition, type Particle, type ParticleAssetConfig, ParticleNetwork, type ParticleNetworkConfig, type ParticleTypeEntry };
+export { type AssetTypeEntry, type ChildParticleConfig, type ChildParticlePosition, type CircleTypeEntry, type ConnectionRules, type GradientType, type LiquidGlassConfig, type LiquidGlassHighlightPosition, type LiquidGlassTypeEntry, type Particle, type ParticleAssetConfig, ParticleNetwork, type ParticleNetworkConfig, type ParticleTypeEntry };

package/dist/index.d.ts

@@ -38,23 +38,40 @@ interface LiquidGlassConfig {
     minRadius?: number;
     /** Maximum radius (px) for liquid glass particles (overrides root maxRadius). */
     maxRadius?: number;
+    /** Blob deformation speed multiplier (default 1). 0 = frozen, 2 = double speed. */
+    blobSpeed?: number;
 }
-/** Particle type entry for mixing circle, asset, liquidGlass. */
-type ParticleTypeEntry = {
+interface CircleTypeEntry {
     type: "circle";
+    percentage?: number;
     count?: number;
+    color?: string;
+    opacity?: number;
+    minRadius?: number;
+    maxRadius?: number;
+    pulse?: boolean;
+    pulseSpeed?: number;
+}
+interface LiquidGlassTypeEntry {
+    type: "liquidGlass";
     percentage?: number;
-} | {
+    count?: number;
+    liquidGlass?: Partial<LiquidGlassConfig>;
+    pulse?: boolean;
+    pulseSpeed?: number;
+}
+interface AssetTypeEntry {
     type: "asset";
     asset: string;
-    count?: number;
     percentage?: number;
-    liquidGlass?: boolean;
-} | {
-    type: "liquidGlass";
     count?: number;
-    percentage?: number;
-};
+    liquidGlass?: boolean | Partial<LiquidGlassConfig>;
+    opacity?: number;
+    pulse?: boolean;
+    pulseSpeed?: number;
+}
+/** Particle type entry for mixing circle, asset, liquidGlass with optional per-type overrides. */
+type ParticleTypeEntry = CircleTypeEntry | LiquidGlassTypeEntry | AssetTypeEntry;
 /** Configuration for a child particle that holds a UI component. */
 interface ChildParticleConfig {
     /** Unique identifier linking this particle to a React/DOM child. */
@@ -79,6 +96,12 @@ interface ChildParticleConfig {
     mouseInfluence?: number;
     /** Render as liquid glass particle. Default false. */
     liquidGlass?: boolean;
+    /** Opacity (0–1) for liquid glass child particles. Overrides global liquidGlass.opacity. */
+    glassOpacity?: number;
+    /** Color (hex) for liquid glass child particles. Overrides global liquidGlass.color. */
+    glassColor?: string;
+    /** Full liquid glass config override for child particles. Merged over global liquidGlass. */
+    liquidGlassConfig?: Partial<LiquidGlassConfig>;
 }
 /** Emitted position data for a child particle each frame. */
 interface ChildParticlePosition {
@@ -191,6 +214,10 @@ interface Particle {
     borderRadius?: number;
     /** CSS overflow for the child content overlay. */
     overflow?: string;
+    /** Per-type config entry (shallow overrides root config). */
+    typeConfig?: ParticleTypeEntry;
+    /** Random phase offset (0–2π) for pulse animation. Makes particles pulse out of sync. */
+    pulsePhase?: number;
     /** Smoothed x for overlay positioning. */
     smoothX?: number;
     /** Smoothed y for overlay positioning. */
@@ -276,4 +303,4 @@ declare class ParticleNetwork {
     reset(defaults: Partial<ParticleNetworkConfig>): void;
 }
 
-export { type ChildParticleConfig, type ChildParticlePosition, type ConnectionRules, type GradientType, type LiquidGlassConfig, type LiquidGlassHighlightPosition, type Particle, type ParticleAssetConfig, ParticleNetwork, type ParticleNetworkConfig, type ParticleTypeEntry };
+export { type AssetTypeEntry, type ChildParticleConfig, type ChildParticlePosition, type CircleTypeEntry, type ConnectionRules, type GradientType, type LiquidGlassConfig, type LiquidGlassHighlightPosition, type LiquidGlassTypeEntry, type Particle, type ParticleAssetConfig, ParticleNetwork, type ParticleNetworkConfig, type ParticleTypeEntry };

package/dist/index.js

@@ -67,6 +67,7 @@ var DEFAULT_LIQUID_GLASS = {
   shadowStrength: 0.4,
   secondaryReflection: 0.25,
   secondaryHighlightPosition: "bottom-right",
+  blobSpeed: 1,
   minRadius: 20,
   maxRadius: 40
 };
@@ -182,7 +183,7 @@ var ParticleNetwork = class {
       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)`;
+      el.style.transform = `translate3d(${Math.round(px - w / 2)}px, ${Math.round(py - h / 2)}px, 0)`;
       if (isRect) {
         const br = particle.borderRadius ?? Math.min(w, h) / 2;
         el.style.borderRadius = br + "px";
@@ -338,7 +339,14 @@ var ParticleNetwork = class {
       if (!Array.isArray(config.particleTypes)) {
         throw new Error("particleTypes must be an array");
       }
-      if (!config.assets || typeof config.assets !== "object") {
+      let hasAssetEntries = false;
+      for (const entry of config.particleTypes) {
+        if (entry?.type === "asset") {
+          hasAssetEntries = true;
+          break;
+        }
+      }
+      if (hasAssetEntries && (!config.assets || typeof config.assets !== "object")) {
         throw new Error("assets map is required when using particleTypes with asset entries");
       }
       for (let i = 0; i < config.particleTypes.length; i++) {
@@ -358,8 +366,9 @@ var ParticleNetwork = class {
           if (typeof pt.asset !== "string" || !pt.asset) {
             throw new Error(`particleTypes[${i}].asset must be a non-empty string`);
           }
-          if (!config.assets[pt.asset]) {
-            throw new Error(`particleTypes[${i}]: asset "${pt.asset}" not found in assets`);
+          const assetKey = pt.asset;
+          if (!config.assets?.[assetKey]) {
+            throw new Error(`particleTypes[${i}]: asset "${assetKey}" not found in assets`);
           }
         }
       }
@@ -456,6 +465,8 @@ var ParticleNetwork = class {
     this.particles.forEach((p) => {
       delete p.assetId;
       delete p.liquidGlass;
+      delete p.typeConfig;
+      delete p.pulsePhase;
     });
     if (particleTypes?.length) {
       const counts = [];
@@ -468,15 +479,16 @@ var ParticleNetwork = class {
         }
         if (count > 0) {
           if (pt.type === "circle") {
-            counts.push({ liquidGlass: false, count });
+            counts.push({ entry: pt, liquidGlass: false, count });
           } else if (pt.type === "asset") {
             counts.push({
+              entry: pt,
               assetId: pt.asset,
-              liquidGlass: pt.liquidGlass ?? false,
+              liquidGlass: !!pt.liquidGlass,
               count
             });
           } else {
-            counts.push({ liquidGlass: true, count });
+            counts.push({ entry: pt, liquidGlass: true, count });
           }
         }
       }
@@ -487,9 +499,10 @@ var ParticleNetwork = class {
         [indices[i], indices[j]] = [indices[j], indices[i]];
       }
       let idx = 0;
-      for (const { assetId, liquidGlass, count } of counts) {
+      for (const { entry, assetId, liquidGlass, count } of counts) {
         for (let c = 0; c < count && idx < indices.length; c++, idx++) {
           const p = this.particles[indices[idx]];
+          p.typeConfig = entry;
           if (assetId) p.assetId = assetId;
           p.liquidGlass = liquidGlass;
           if (liquidGlass) this.resizeAsLiquidGlass(p);
@@ -522,6 +535,14 @@ var ParticleNetwork = class {
     if (!particleTypes?.length && (this.config.liquidGlassPercentage != null || this.config.liquidGlassCount != null)) {
       this.assignLiquidGlass();
     }
+    this.particles.forEach((p) => {
+      if (p.isChild) return;
+      const tc = p.typeConfig;
+      const doPulse = tc?.pulse ?? this.config.pulseEnabled;
+      if (doPulse) {
+        p.pulsePhase = Math.random() * Math.PI * 2;
+      }
+    });
     this.assignMouseBehavior();
   }
   assignLiquidGlass() {
@@ -548,8 +569,10 @@ var ParticleNetwork = class {
   }
   resizeAsLiquidGlass(p) {
     const lg = this.getLiquidGlassConfig();
-    const min = lg.minRadius ?? DEFAULT_LIQUID_GLASS.minRadius;
-    const max = lg.maxRadius ?? DEFAULT_LIQUID_GLASS.maxRadius;
+    const tc = p.typeConfig;
+    const perTypeLg = tc && "liquidGlass" in tc && typeof tc.liquidGlass === "object" ? tc.liquidGlass : void 0;
+    const min = perTypeLg?.minRadius ?? lg.minRadius ?? DEFAULT_LIQUID_GLASS.minRadius;
+    const max = perTypeLg?.maxRadius ?? lg.maxRadius ?? DEFAULT_LIQUID_GLASS.maxRadius;
     p.radius = Math.random() * (max - min) + min;
     delete p.currentRadius;
     this.initBlob(p);
@@ -620,9 +643,13 @@ var ParticleNetwork = class {
       if (particle.isChild) {
         particle.currentRadius = particle.radius;
       } else {
-        if (this.config.pulseEnabled) {
-          this.pulseAngle += this.config.pulseSpeed;
-          const pulseScale = Math.sin(this.pulseAngle) * 0.5 + 1;
+        const tc = particle.typeConfig;
+        const doPulse = tc?.pulse ?? this.config.pulseEnabled;
+        if (doPulse) {
+          const speed = tc?.pulseSpeed ?? this.config.pulseSpeed;
+          this.pulseAngle += speed;
+          const phase = particle.pulsePhase ?? 0;
+          const pulseScale = Math.sin(this.pulseAngle + phase) * 0.5 + 1;
           particle.currentRadius = particle.radius * pulseScale;
         } else {
           particle.currentRadius = particle.radius;
@@ -822,7 +849,22 @@ var ParticleNetwork = class {
     blob.mouseStretchY *= 1 - smoothing;
   }
   draw3DFluidSphere(particle) {
-    const lg = this.getLiquidGlassConfig();
+    const tc = particle.typeConfig;
+    let perTypeLg = tc && "liquidGlass" in tc && typeof tc.liquidGlass === "object" ? tc.liquidGlass : void 0;
+    if (particle.isChild && particle.childId) {
+      const childConfig = this.childParticleConfigs.get(particle.childId);
+      if (childConfig) {
+        const overrides = {
+          ...childConfig.liquidGlassConfig ?? {},
+          ...childConfig.glassOpacity != null && { opacity: childConfig.glassOpacity },
+          ...childConfig.glassColor != null && { color: childConfig.glassColor }
+        };
+        if (Object.keys(overrides).length > 0) {
+          perTypeLg = { ...perTypeLg ?? {}, ...overrides };
+        }
+      }
+    }
+    const lg = perTypeLg ? { ...this.getLiquidGlassConfig(), ...perTypeLg } : this.getLiquidGlassConfig();
     const r = particle.currentRadius ?? particle.radius;
     if (r <= 0) return;
     if (!particle.blob) this.initBlob(particle);
@@ -830,46 +872,60 @@ var ParticleNetwork = class {
     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;
+    const hasExplicitChildOpacity = particle.isChild && particle.childId && (() => {
+      const cfg = this.childParticleConfigs.get(particle.childId);
+      return cfg?.glassOpacity != null || cfg?.liquidGlassConfig?.opacity != null;
+    })();
+    let opacity = lg.opacity ?? DEFAULT_LIQUID_GLASS.opacity;
+    if (!hasExplicitChildOpacity) {
+      opacity *= this.config.particleOpacity;
+      if (this.config.depthEffectEnabled) {
+        opacity *= 0.6 + 0.4 * particle.z;
+      }
     }
     if (opacity <= 0) return;
-    blob.rotation += blob.rotSpeed;
+    const blobSpeed = lg.blobSpeed ?? 1;
+    blob.rotation += blob.rotSpeed * blobSpeed;
     for (let m = 0; m < blob.phases.length; m++) {
-      blob.phases[m] += blob.phaseSpeeds[m];
+      blob.phases[m] += blob.phaseSpeeds[m] * blobSpeed;
     }
-    blob.hlAngle += blob.hlAngleSpeed;
+    blob.hlAngle += blob.hlAngleSpeed * blobSpeed;
     this.updateBlobMouse(particle);
     const color = lg.color ?? DEFAULT_LIQUID_GLASS.color;
     const baseR = parseInt(color.slice(1, 3), 16);
     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 refl = (lg.reflectionStrength ?? DEFAULT_LIQUID_GLASS.reflectionStrength) / DEFAULT_LIQUID_GLASS.reflectionStrength;
     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));
-    const lgr = Math.min(255, baseG + Math.round((255 - baseG) * 0.55));
-    const lb = Math.min(255, baseB + Math.round((255 - baseB) * 0.55));
+    const lr = Math.min(255, baseR + Math.round((255 - baseR) * 0.55 * refl));
+    const lgr = Math.min(255, baseG + Math.round((255 - baseG) * 0.55 * refl));
+    const lb = Math.min(255, baseB + Math.round((255 - baseB) * 0.55 * refl));
     const dr = Math.max(0, Math.round(baseR * (1 - shadowStr * 0.35)));
     const dg = Math.max(0, Math.round(baseG * (1 - shadowStr * 0.35)));
     const db = Math.max(0, Math.round(baseB * (1 - shadowStr * 0.35)));
     this.ctx.save();
-    const grad = this.ctx.createRadialGradient(
-      hlX,
-      hlY,
-      gradR * 0.05,
-      cx,
-      cy,
-      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.ctx.globalAlpha = 1;
+    if (hasExplicitChildOpacity && opacity >= 0.99) {
+      this.ctx.fillStyle = `rgba(${baseR},${baseG},${baseB}, ${opacity})`;
+    } else {
+      const grad = this.ctx.createRadialGradient(
+        hlX,
+        hlY,
+        gradR * 0.05,
+        cx,
+        cy,
+        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;
+    }
     if (isRect) {
       const halfW = particle.width / 2;
       const halfH = particle.height / 2;
@@ -907,7 +963,9 @@ var ParticleNetwork = class {
         this.draw3DFluidSphere(particle);
         return;
       }
-      let opacity = this.config.particleOpacity;
+      const tc = particle.typeConfig;
+      const tcOpacity = tc && "opacity" in tc ? tc.opacity : void 0;
+      let opacity = tcOpacity ?? this.config.particleOpacity;
       if (this.config.depthEffectEnabled) {
         opacity *= 0.6 + 0.4 * particle.z;
       }
@@ -924,8 +982,9 @@ var ParticleNetwork = class {
           this.ctx.drawImage(img, x, y, size, size);
         }
       } else if (particle.isChild && particle.width != null && particle.height != null) {
+        const color = (tc && "color" in tc ? tc.color : void 0) ?? defaultColor;
         this.ctx.globalAlpha = opacity;
-        this.ctx.fillStyle = defaultColor;
+        this.ctx.fillStyle = color;
         const w = particle.width;
         const h = particle.height;
         const br = particle.borderRadius ?? Math.min(w, h) / 2;
@@ -935,8 +994,9 @@ var ParticleNetwork = class {
         this.ctx.roundRect(x, y, w, h, br);
         this.ctx.fill();
       } else {
+        const color = (tc && "color" in tc ? tc.color : void 0) ?? defaultColor;
         this.ctx.globalAlpha = opacity;
-        this.ctx.fillStyle = defaultColor;
+        this.ctx.fillStyle = color;
         this.ctx.beginPath();
         this.ctx.arc(particle.x, particle.y, r, 0, Math.PI * 2);
         this.ctx.fill();

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import {
   ParticleNetwork
-} from "./chunk-VMVSPMPB.mjs";
+} from "./chunk-JZTYQ6XI.mjs";
 export {
   ParticleNetwork
 };

package/dist/react.d.mts

@@ -1,7 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { ReactNode, CSSProperties, RefObject } from 'react';
-import { ParticleNetworkConfig } from './index.mjs';
+import { LiquidGlassConfig, ParticleNetworkConfig, ParticleNetwork } from './index.mjs';
 
+declare const ParticleNetworkContext: react.Context<ParticleNetwork | null>;
 declare function useParticleNetwork(config?: Partial<ParticleNetworkConfig>): RefObject<HTMLCanvasElement | null>;
 interface ParticleNetworkBgProps {
     config?: Partial<ParticleNetworkConfig>;
@@ -27,6 +29,12 @@ interface ChildParticleProps {
     anchorForce?: number;
     /** Mouse influence multiplier (0-1). Default 0.1. */
     mouseInfluence?: number;
+    /** Opacity (0-1) for liquid glass. Only applies when liquidGlass is true. */
+    glassOpacity?: number;
+    /** Color (hex) for liquid glass. Only applies when liquidGlass is true. */
+    glassColor?: string;
+    /** Full liquid glass config override. Merged over global liquidGlass. */
+    liquidGlassConfig?: Partial<LiquidGlassConfig>;
     children?: ReactNode;
     style?: CSSProperties;
     className?: string;
@@ -49,10 +57,16 @@ interface GlassChildParticleProps {
     anchorForce?: number;
     /** Mouse influence multiplier (0-1). Default 0.1. */
     mouseInfluence?: number;
+    /** Opacity (0-1) for the glass background. Default uses global liquidGlass.opacity. */
+    glassOpacity?: number;
+    /** Color (hex) for the glass background. Default uses global liquidGlass.color. */
+    glassColor?: string;
+    /** Full liquid glass config override. Merged over global liquidGlass. */
+    liquidGlassConfig?: Partial<LiquidGlassConfig>;
     children?: ReactNode;
     style?: CSSProperties;
     className?: string;
 }
 declare function GlassChildParticle(props: GlassChildParticleProps): react_jsx_runtime.JSX.Element;
 
-export { ChildParticle, type ChildParticleProps, GlassChildParticle, type GlassChildParticleProps, ParticleNetworkBg, type ParticleNetworkBgProps, useParticleNetwork };
+export { ChildParticle, type ChildParticleProps, GlassChildParticle, type GlassChildParticleProps, ParticleNetworkBg, type ParticleNetworkBgProps, ParticleNetworkContext, useParticleNetwork };

package/dist/react.d.ts

@@ -1,7 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { ReactNode, CSSProperties, RefObject } from 'react';
-import { ParticleNetworkConfig } from './index.js';
+import { LiquidGlassConfig, ParticleNetworkConfig, ParticleNetwork } from './index.js';
 
+declare const ParticleNetworkContext: react.Context<ParticleNetwork | null>;
 declare function useParticleNetwork(config?: Partial<ParticleNetworkConfig>): RefObject<HTMLCanvasElement | null>;
 interface ParticleNetworkBgProps {
     config?: Partial<ParticleNetworkConfig>;
@@ -27,6 +29,12 @@ interface ChildParticleProps {
     anchorForce?: number;
     /** Mouse influence multiplier (0-1). Default 0.1. */
     mouseInfluence?: number;
+    /** Opacity (0-1) for liquid glass. Only applies when liquidGlass is true. */
+    glassOpacity?: number;
+    /** Color (hex) for liquid glass. Only applies when liquidGlass is true. */
+    glassColor?: string;
+    /** Full liquid glass config override. Merged over global liquidGlass. */
+    liquidGlassConfig?: Partial<LiquidGlassConfig>;
     children?: ReactNode;
     style?: CSSProperties;
     className?: string;
@@ -49,10 +57,16 @@ interface GlassChildParticleProps {
     anchorForce?: number;
     /** Mouse influence multiplier (0-1). Default 0.1. */
     mouseInfluence?: number;
+    /** Opacity (0-1) for the glass background. Default uses global liquidGlass.opacity. */
+    glassOpacity?: number;
+    /** Color (hex) for the glass background. Default uses global liquidGlass.color. */
+    glassColor?: string;
+    /** Full liquid glass config override. Merged over global liquidGlass. */
+    liquidGlassConfig?: Partial<LiquidGlassConfig>;
     children?: ReactNode;
     style?: CSSProperties;
     className?: string;
 }
 declare function GlassChildParticle(props: GlassChildParticleProps): react_jsx_runtime.JSX.Element;
 
-export { ChildParticle, type ChildParticleProps, GlassChildParticle, type GlassChildParticleProps, ParticleNetworkBg, type ParticleNetworkBgProps, useParticleNetwork };
+export { ChildParticle, type ChildParticleProps, GlassChildParticle, type GlassChildParticleProps, ParticleNetworkBg, type ParticleNetworkBgProps, ParticleNetworkContext, useParticleNetwork };

package/dist/react.js

@@ -23,6 +23,7 @@ __export(react_exports, {
   ChildParticle: () => ChildParticle,
   GlassChildParticle: () => GlassChildParticle,
   ParticleNetworkBg: () => ParticleNetworkBg,
+  ParticleNetworkContext: () => ParticleNetworkContext,
   useParticleNetwork: () => useParticleNetwork
 });
 module.exports = __toCommonJS(react_exports);
@@ -74,6 +75,7 @@ var DEFAULT_LIQUID_GLASS = {
   shadowStrength: 0.4,
   secondaryReflection: 0.25,
   secondaryHighlightPosition: "bottom-right",
+  blobSpeed: 1,
   minRadius: 20,
   maxRadius: 40
 };
@@ -189,7 +191,7 @@ var ParticleNetwork = class {
       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)`;
+      el.style.transform = `translate3d(${Math.round(px - w / 2)}px, ${Math.round(py - h / 2)}px, 0)`;
       if (isRect) {
         const br = particle.borderRadius ?? Math.min(w, h) / 2;
         el.style.borderRadius = br + "px";
@@ -345,7 +347,14 @@ var ParticleNetwork = class {
       if (!Array.isArray(config.particleTypes)) {
         throw new Error("particleTypes must be an array");
       }
-      if (!config.assets || typeof config.assets !== "object") {
+      let hasAssetEntries = false;
+      for (const entry of config.particleTypes) {
+        if (entry?.type === "asset") {
+          hasAssetEntries = true;
+          break;
+        }
+      }
+      if (hasAssetEntries && (!config.assets || typeof config.assets !== "object")) {
         throw new Error("assets map is required when using particleTypes with asset entries");
       }
       for (let i = 0; i < config.particleTypes.length; i++) {
@@ -365,8 +374,9 @@ var ParticleNetwork = class {
           if (typeof pt.asset !== "string" || !pt.asset) {
             throw new Error(`particleTypes[${i}].asset must be a non-empty string`);
           }
-          if (!config.assets[pt.asset]) {
-            throw new Error(`particleTypes[${i}]: asset "${pt.asset}" not found in assets`);
+          const assetKey = pt.asset;
+          if (!config.assets?.[assetKey]) {
+            throw new Error(`particleTypes[${i}]: asset "${assetKey}" not found in assets`);
           }
         }
       }
@@ -463,6 +473,8 @@ var ParticleNetwork = class {
     this.particles.forEach((p) => {
       delete p.assetId;
       delete p.liquidGlass;
+      delete p.typeConfig;
+      delete p.pulsePhase;
     });
     if (particleTypes?.length) {
       const counts = [];
@@ -475,15 +487,16 @@ var ParticleNetwork = class {
         }
         if (count > 0) {
           if (pt.type === "circle") {
-            counts.push({ liquidGlass: false, count });
+            counts.push({ entry: pt, liquidGlass: false, count });
           } else if (pt.type === "asset") {
             counts.push({
+              entry: pt,
               assetId: pt.asset,
-              liquidGlass: pt.liquidGlass ?? false,
+              liquidGlass: !!pt.liquidGlass,
               count
             });
           } else {
-            counts.push({ liquidGlass: true, count });
+            counts.push({ entry: pt, liquidGlass: true, count });
           }
         }
       }
@@ -494,9 +507,10 @@ var ParticleNetwork = class {
         [indices[i], indices[j]] = [indices[j], indices[i]];
       }
       let idx = 0;
-      for (const { assetId, liquidGlass, count } of counts) {
+      for (const { entry, assetId, liquidGlass, count } of counts) {
         for (let c = 0; c < count && idx < indices.length; c++, idx++) {
           const p = this.particles[indices[idx]];
+          p.typeConfig = entry;
           if (assetId) p.assetId = assetId;
           p.liquidGlass = liquidGlass;
           if (liquidGlass) this.resizeAsLiquidGlass(p);
@@ -529,6 +543,14 @@ var ParticleNetwork = class {
     if (!particleTypes?.length && (this.config.liquidGlassPercentage != null || this.config.liquidGlassCount != null)) {
       this.assignLiquidGlass();
     }
+    this.particles.forEach((p) => {
+      if (p.isChild) return;
+      const tc = p.typeConfig;
+      const doPulse = tc?.pulse ?? this.config.pulseEnabled;
+      if (doPulse) {
+        p.pulsePhase = Math.random() * Math.PI * 2;
+      }
+    });
     this.assignMouseBehavior();
   }
   assignLiquidGlass() {
@@ -555,8 +577,10 @@ var ParticleNetwork = class {
   }
   resizeAsLiquidGlass(p) {
     const lg = this.getLiquidGlassConfig();
-    const min = lg.minRadius ?? DEFAULT_LIQUID_GLASS.minRadius;
-    const max = lg.maxRadius ?? DEFAULT_LIQUID_GLASS.maxRadius;
+    const tc = p.typeConfig;
+    const perTypeLg = tc && "liquidGlass" in tc && typeof tc.liquidGlass === "object" ? tc.liquidGlass : void 0;
+    const min = perTypeLg?.minRadius ?? lg.minRadius ?? DEFAULT_LIQUID_GLASS.minRadius;
+    const max = perTypeLg?.maxRadius ?? lg.maxRadius ?? DEFAULT_LIQUID_GLASS.maxRadius;
     p.radius = Math.random() * (max - min) + min;
     delete p.currentRadius;
     this.initBlob(p);
@@ -627,9 +651,13 @@ var ParticleNetwork = class {
       if (particle.isChild) {
         particle.currentRadius = particle.radius;
       } else {
-        if (this.config.pulseEnabled) {
-          this.pulseAngle += this.config.pulseSpeed;
-          const pulseScale = Math.sin(this.pulseAngle) * 0.5 + 1;
+        const tc = particle.typeConfig;
+        const doPulse = tc?.pulse ?? this.config.pulseEnabled;
+        if (doPulse) {
+          const speed = tc?.pulseSpeed ?? this.config.pulseSpeed;
+          this.pulseAngle += speed;
+          const phase = particle.pulsePhase ?? 0;
+          const pulseScale = Math.sin(this.pulseAngle + phase) * 0.5 + 1;
           particle.currentRadius = particle.radius * pulseScale;
         } else {
           particle.currentRadius = particle.radius;
@@ -829,7 +857,22 @@ var ParticleNetwork = class {
     blob.mouseStretchY *= 1 - smoothing;
   }
   draw3DFluidSphere(particle) {
-    const lg = this.getLiquidGlassConfig();
+    const tc = particle.typeConfig;
+    let perTypeLg = tc && "liquidGlass" in tc && typeof tc.liquidGlass === "object" ? tc.liquidGlass : void 0;
+    if (particle.isChild && particle.childId) {
+      const childConfig = this.childParticleConfigs.get(particle.childId);
+      if (childConfig) {
+        const overrides = {
+          ...childConfig.liquidGlassConfig ?? {},
+          ...childConfig.glassOpacity != null && { opacity: childConfig.glassOpacity },
+          ...childConfig.glassColor != null && { color: childConfig.glassColor }
+        };
+        if (Object.keys(overrides).length > 0) {
+          perTypeLg = { ...perTypeLg ?? {}, ...overrides };
+        }
+      }
+    }
+    const lg = perTypeLg ? { ...this.getLiquidGlassConfig(), ...perTypeLg } : this.getLiquidGlassConfig();
     const r = particle.currentRadius ?? particle.radius;
     if (r <= 0) return;
     if (!particle.blob) this.initBlob(particle);
@@ -837,46 +880,60 @@ var ParticleNetwork = class {
     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;
+    const hasExplicitChildOpacity = particle.isChild && particle.childId && (() => {
+      const cfg = this.childParticleConfigs.get(particle.childId);
+      return cfg?.glassOpacity != null || cfg?.liquidGlassConfig?.opacity != null;
+    })();
+    let opacity = lg.opacity ?? DEFAULT_LIQUID_GLASS.opacity;
+    if (!hasExplicitChildOpacity) {
+      opacity *= this.config.particleOpacity;
+      if (this.config.depthEffectEnabled) {
+        opacity *= 0.6 + 0.4 * particle.z;
+      }
     }
     if (opacity <= 0) return;
-    blob.rotation += blob.rotSpeed;
+    const blobSpeed = lg.blobSpeed ?? 1;
+    blob.rotation += blob.rotSpeed * blobSpeed;
     for (let m = 0; m < blob.phases.length; m++) {
-      blob.phases[m] += blob.phaseSpeeds[m];
+      blob.phases[m] += blob.phaseSpeeds[m] * blobSpeed;
     }
-    blob.hlAngle += blob.hlAngleSpeed;
+    blob.hlAngle += blob.hlAngleSpeed * blobSpeed;
     this.updateBlobMouse(particle);
     const color = lg.color ?? DEFAULT_LIQUID_GLASS.color;
     const baseR = parseInt(color.slice(1, 3), 16);
     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 refl = (lg.reflectionStrength ?? DEFAULT_LIQUID_GLASS.reflectionStrength) / DEFAULT_LIQUID_GLASS.reflectionStrength;
     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));
-    const lgr = Math.min(255, baseG + Math.round((255 - baseG) * 0.55));
-    const lb = Math.min(255, baseB + Math.round((255 - baseB) * 0.55));
+    const lr = Math.min(255, baseR + Math.round((255 - baseR) * 0.55 * refl));
+    const lgr = Math.min(255, baseG + Math.round((255 - baseG) * 0.55 * refl));
+    const lb = Math.min(255, baseB + Math.round((255 - baseB) * 0.55 * refl));
     const dr = Math.max(0, Math.round(baseR * (1 - shadowStr * 0.35)));
     const dg = Math.max(0, Math.round(baseG * (1 - shadowStr * 0.35)));
     const db = Math.max(0, Math.round(baseB * (1 - shadowStr * 0.35)));
     this.ctx.save();
-    const grad = this.ctx.createRadialGradient(
-      hlX,
-      hlY,
-      gradR * 0.05,
-      cx,
-      cy,
-      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.ctx.globalAlpha = 1;
+    if (hasExplicitChildOpacity && opacity >= 0.99) {
+      this.ctx.fillStyle = `rgba(${baseR},${baseG},${baseB}, ${opacity})`;
+    } else {
+      const grad = this.ctx.createRadialGradient(
+        hlX,
+        hlY,
+        gradR * 0.05,
+        cx,
+        cy,
+        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;
+    }
     if (isRect) {
       const halfW = particle.width / 2;
       const halfH = particle.height / 2;
@@ -914,7 +971,9 @@ var ParticleNetwork = class {
         this.draw3DFluidSphere(particle);
         return;
       }
-      let opacity = this.config.particleOpacity;
+      const tc = particle.typeConfig;
+      const tcOpacity = tc && "opacity" in tc ? tc.opacity : void 0;
+      let opacity = tcOpacity ?? this.config.particleOpacity;
       if (this.config.depthEffectEnabled) {
         opacity *= 0.6 + 0.4 * particle.z;
       }
@@ -931,8 +990,9 @@ var ParticleNetwork = class {
           this.ctx.drawImage(img, x, y, size, size);
         }
       } else if (particle.isChild && particle.width != null && particle.height != null) {
+        const color = (tc && "color" in tc ? tc.color : void 0) ?? defaultColor;
         this.ctx.globalAlpha = opacity;
-        this.ctx.fillStyle = defaultColor;
+        this.ctx.fillStyle = color;
         const w = particle.width;
         const h = particle.height;
         const br = particle.borderRadius ?? Math.min(w, h) / 2;
@@ -942,8 +1002,9 @@ var ParticleNetwork = class {
         this.ctx.roundRect(x, y, w, h, br);
         this.ctx.fill();
       } else {
+        const color = (tc && "color" in tc ? tc.color : void 0) ?? defaultColor;
         this.ctx.globalAlpha = opacity;
-        this.ctx.fillStyle = defaultColor;
+        this.ctx.fillStyle = color;
         this.ctx.beginPath();
         this.ctx.arc(particle.x, particle.y, r, 0, Math.PI * 2);
         this.ctx.fill();
@@ -1294,6 +1355,9 @@ function BaseChildParticle({
   anchorForce,
   mouseInfluence,
   liquidGlass,
+  glassOpacity,
+  glassColor,
+  liquidGlassConfig,
   children,
   style,
   className
@@ -1313,7 +1377,10 @@ function BaseChildParticle({
       overflow,
       anchorForce,
       mouseInfluence,
-      liquidGlass
+      liquidGlass,
+      glassOpacity,
+      glassColor,
+      liquidGlassConfig
     });
     setOverlayEl(instance.getChildOverlayElement(id));
     return () => {
@@ -1333,9 +1400,12 @@ function BaseChildParticle({
       overflow,
       anchorForce,
       mouseInfluence,
-      liquidGlass
+      liquidGlass,
+      glassOpacity,
+      glassColor,
+      liquidGlassConfig
     });
-  }, [instance, id, x, y, radius, width, height, borderRadius, overflow, anchorForce, mouseInfluence, liquidGlass]);
+  }, [instance, id, x, y, radius, width, height, borderRadius, overflow, anchorForce, mouseInfluence, liquidGlass, glassOpacity, glassColor, liquidGlassConfig]);
   if (!overlayEl) return null;
   const isRect = width != null && height != null;
   const portalBorderRadius = isRect ? (borderRadius ?? Math.min(width, height) / 2) + "px" : "50%";
@@ -1365,5 +1435,6 @@ function BaseChildParticle({
   ChildParticle,
   GlassChildParticle,
   ParticleNetworkBg,
+  ParticleNetworkContext,
   useParticleNetwork
 });

package/dist/react.mjs

@@ -1,6 +1,6 @@
 import {
   ParticleNetwork
-} from "./chunk-VMVSPMPB.mjs";
+} from "./chunk-JZTYQ6XI.mjs";
 
 // src/react.tsx
 import {
@@ -78,6 +78,9 @@ function BaseChildParticle({
   anchorForce,
   mouseInfluence,
   liquidGlass,
+  glassOpacity,
+  glassColor,
+  liquidGlassConfig,
   children,
   style,
   className
@@ -97,7 +100,10 @@ function BaseChildParticle({
       overflow,
       anchorForce,
       mouseInfluence,
-      liquidGlass
+      liquidGlass,
+      glassOpacity,
+      glassColor,
+      liquidGlassConfig
     });
     setOverlayEl(instance.getChildOverlayElement(id));
     return () => {
@@ -117,9 +123,12 @@ function BaseChildParticle({
       overflow,
       anchorForce,
       mouseInfluence,
-      liquidGlass
+      liquidGlass,
+      glassOpacity,
+      glassColor,
+      liquidGlassConfig
     });
-  }, [instance, id, x, y, radius, width, height, borderRadius, overflow, anchorForce, mouseInfluence, liquidGlass]);
+  }, [instance, id, x, y, radius, width, height, borderRadius, overflow, anchorForce, mouseInfluence, liquidGlass, glassOpacity, glassColor, liquidGlassConfig]);
   if (!overlayEl) return null;
   const isRect = width != null && height != null;
   const portalBorderRadius = isRect ? (borderRadius ?? Math.min(width, height) / 2) + "px" : "50%";
@@ -148,5 +157,6 @@ export {
   ChildParticle,
   GlassChildParticle,
   ParticleNetworkBg,
+  ParticleNetworkContext,
   useParticleNetwork
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "particle-network-bg",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Interactive particle network animation for backgrounds",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",