particle-network-bg 1.0.0 → 1.0.1

package/README.md

@@ -166,23 +166,56 @@ new ParticleNetwork(canvas, {
 
 ## 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
 
@@ -445,6 +478,9 @@ import type {
   LiquidGlassConfig,
   LiquidGlassHighlightPosition,
   ParticleTypeEntry,
+  CircleTypeEntry,
+  LiquidGlassTypeEntry,
+  AssetTypeEntry,
   ParticleAssetConfig,
   ChildParticleConfig,
   ChildParticlePosition,

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

@@ -432,6 +432,7 @@ var ParticleNetwork = class {
     this.particles.forEach((p) => {
       delete p.assetId;
       delete p.liquidGlass;
+      delete p.typeConfig;
     });
     if (particleTypes?.length) {
       const counts = [];
@@ -444,15 +445,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 +465,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);
@@ -524,8 +527,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,8 +601,11 @@ var ParticleNetwork = class {
       if (particle.isChild) {
         particle.currentRadius = particle.radius;
       } else {
-        if (this.config.pulseEnabled) {
-          this.pulseAngle += this.config.pulseSpeed;
+        const tc = particle.typeConfig;
+        const doPulse = tc?.pulse ?? this.config.pulseEnabled;
+        if (doPulse) {
+          const speed = tc?.pulseSpeed ?? this.config.pulseSpeed;
+          this.pulseAngle += speed;
           const pulseScale = Math.sin(this.pulseAngle) * 0.5 + 1;
           particle.currentRadius = particle.radius * pulseScale;
         } else {
@@ -798,7 +806,9 @@ var ParticleNetwork = class {
     blob.mouseStretchY *= 1 - smoothing;
   }
   draw3DFluidSphere(particle) {
-    const lg = this.getLiquidGlassConfig();
+    const tc = particle.typeConfig;
+    const perTypeLg = tc && "liquidGlass" in tc && typeof tc.liquidGlass === "object" ? tc.liquidGlass : void 0;
+    const lg = perTypeLg ? { ...this.getLiquidGlassConfig(), ...perTypeLg } : this.getLiquidGlassConfig();
     const r = particle.currentRadius ?? particle.radius;
     if (r <= 0) return;
     if (!particle.blob) this.initBlob(particle);
@@ -883,7 +893,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 +912,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 +924,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

@@ -39,22 +39,37 @@ interface LiquidGlassConfig {
     /** Maximum radius (px) for liquid glass particles (overrides root maxRadius). */
     maxRadius?: 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. */
@@ -191,6 +206,8 @@ interface Particle {
     borderRadius?: number;
     /** CSS overflow for the child content overlay. */
     overflow?: string;
+    /** Per-type config entry (shallow overrides root config). */
+    typeConfig?: ParticleTypeEntry;
     /** Smoothed x for overlay positioning. */
     smoothX?: number;
     /** Smoothed y for overlay positioning. */
@@ -276,4 +293,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

@@ -39,22 +39,37 @@ interface LiquidGlassConfig {
     /** Maximum radius (px) for liquid glass particles (overrides root maxRadius). */
     maxRadius?: 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. */
@@ -191,6 +206,8 @@ interface Particle {
     borderRadius?: number;
     /** CSS overflow for the child content overlay. */
     overflow?: string;
+    /** Per-type config entry (shallow overrides root config). */
+    typeConfig?: ParticleTypeEntry;
     /** Smoothed x for overlay positioning. */
     smoothX?: number;
     /** Smoothed y for overlay positioning. */
@@ -276,4 +293,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

@@ -456,6 +456,7 @@ var ParticleNetwork = class {
     this.particles.forEach((p) => {
       delete p.assetId;
       delete p.liquidGlass;
+      delete p.typeConfig;
     });
     if (particleTypes?.length) {
       const counts = [];
@@ -468,15 +469,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 +489,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);
@@ -548,8 +551,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,8 +625,11 @@ var ParticleNetwork = class {
       if (particle.isChild) {
         particle.currentRadius = particle.radius;
       } else {
-        if (this.config.pulseEnabled) {
-          this.pulseAngle += this.config.pulseSpeed;
+        const tc = particle.typeConfig;
+        const doPulse = tc?.pulse ?? this.config.pulseEnabled;
+        if (doPulse) {
+          const speed = tc?.pulseSpeed ?? this.config.pulseSpeed;
+          this.pulseAngle += speed;
           const pulseScale = Math.sin(this.pulseAngle) * 0.5 + 1;
           particle.currentRadius = particle.radius * pulseScale;
         } else {
@@ -822,7 +830,9 @@ var ParticleNetwork = class {
     blob.mouseStretchY *= 1 - smoothing;
   }
   draw3DFluidSphere(particle) {
-    const lg = this.getLiquidGlassConfig();
+    const tc = particle.typeConfig;
+    const perTypeLg = tc && "liquidGlass" in tc && typeof tc.liquidGlass === "object" ? tc.liquidGlass : void 0;
+    const lg = perTypeLg ? { ...this.getLiquidGlassConfig(), ...perTypeLg } : this.getLiquidGlassConfig();
     const r = particle.currentRadius ?? particle.radius;
     if (r <= 0) return;
     if (!particle.blob) this.initBlob(particle);
@@ -907,7 +917,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 +936,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 +948,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-BMXQY2SK.mjs";
 export {
   ParticleNetwork
 };

package/dist/react.js

@@ -463,6 +463,7 @@ var ParticleNetwork = class {
     this.particles.forEach((p) => {
       delete p.assetId;
       delete p.liquidGlass;
+      delete p.typeConfig;
     });
     if (particleTypes?.length) {
       const counts = [];
@@ -475,15 +476,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 +496,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);
@@ -555,8 +558,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,8 +632,11 @@ var ParticleNetwork = class {
       if (particle.isChild) {
         particle.currentRadius = particle.radius;
       } else {
-        if (this.config.pulseEnabled) {
-          this.pulseAngle += this.config.pulseSpeed;
+        const tc = particle.typeConfig;
+        const doPulse = tc?.pulse ?? this.config.pulseEnabled;
+        if (doPulse) {
+          const speed = tc?.pulseSpeed ?? this.config.pulseSpeed;
+          this.pulseAngle += speed;
           const pulseScale = Math.sin(this.pulseAngle) * 0.5 + 1;
           particle.currentRadius = particle.radius * pulseScale;
         } else {
@@ -829,7 +837,9 @@ var ParticleNetwork = class {
     blob.mouseStretchY *= 1 - smoothing;
   }
   draw3DFluidSphere(particle) {
-    const lg = this.getLiquidGlassConfig();
+    const tc = particle.typeConfig;
+    const perTypeLg = tc && "liquidGlass" in tc && typeof tc.liquidGlass === "object" ? tc.liquidGlass : void 0;
+    const lg = perTypeLg ? { ...this.getLiquidGlassConfig(), ...perTypeLg } : this.getLiquidGlassConfig();
     const r = particle.currentRadius ?? particle.radius;
     if (r <= 0) return;
     if (!particle.blob) this.initBlob(particle);
@@ -914,7 +924,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 +943,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 +955,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/react.mjs

@@ -1,6 +1,6 @@
 import {
   ParticleNetwork
-} from "./chunk-VMVSPMPB.mjs";
+} from "./chunk-BMXQY2SK.mjs";
 
 // src/react.tsx
 import {

package/package.json

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