@tsparticles/interaction-external-attract 4.0.0-beta.9 → 4.0.0

package/browser/Attractor.js

@@ -2,15 +2,19 @@ import { ExternalInteractorBase, mouseMoveEvent, } from "@tsparticles/plugin-int
 import { isInArray, millisecondsToSeconds } from "@tsparticles/engine";
 import { clickAttract, hoverAttract } from "./Utils.js";
 import { Attract } from "./Options/Classes/Attract.js";
-const attractMode = "attract";
+const attractMode = "attract", minVelocityLengthSq = 0, minRestoreSpeed = 0.001, maxRestoreSpeed = 1, restoreEpsilon = 0.5;
 export class Attractor extends ExternalInteractorBase {
     handleClickMode;
+    _interactedThisFrame;
     _maxDistance;
     _pluginManager;
+    _restoreData;
     constructor(pluginManager, container) {
         super(container);
         this._pluginManager = pluginManager;
         this._maxDistance = 0;
+        this._interactedThisFrame = new Set();
+        this._restoreData = new Map();
         container.attract ??= { particles: [] };
         this.handleClickMode = (mode, interactivityData) => {
             const options = this.container.actualOptions, attract = options.interactivity?.modes.attract;
@@ -51,17 +55,23 @@ export class Attractor extends ExternalInteractorBase {
         container.retina.attractModeDistance = attract.distance * container.retina.pixelRatio;
     }
     interact(interactivityData) {
+        this._interactedThisFrame.clear();
         const container = this.container, options = container.actualOptions, mouseMoveStatus = interactivityData.status === mouseMoveEvent, events = options.interactivity?.events;
         if (!events) {
             return;
         }
         const { enable: hoverEnabled, mode: hoverMode } = events.onHover, { enable: clickEnabled, mode: clickMode } = events.onClick;
         if (mouseMoveStatus && hoverEnabled && isInArray(attractMode, hoverMode)) {
-            hoverAttract(this._pluginManager, this.container, interactivityData, p => this.isEnabled(interactivityData, p));
+            hoverAttract(this._pluginManager, this.container, interactivityData, p => this.isEnabled(interactivityData, p), p => {
+                this._trackInteractedParticle(p);
+            });
         }
         else if (clickEnabled && isInArray(attractMode, clickMode)) {
-            clickAttract(this._pluginManager, this.container, interactivityData, p => this.isEnabled(interactivityData, p));
+            clickAttract(this._pluginManager, this.container, interactivityData, p => this.isEnabled(interactivityData, p), p => {
+                this._trackInteractedParticle(p);
+            });
         }
+        this._restoreParticles();
     }
     isEnabled(interactivityData, particle) {
         const container = this.container, options = container.actualOptions, mouse = interactivityData.mouse, events = (particle?.interactivity ?? options.interactivity)?.events;
@@ -79,4 +89,61 @@ export class Attractor extends ExternalInteractorBase {
     }
     reset() {
     }
+    _restoreParticles() {
+        const restore = this.container.actualOptions.interactivity?.modes.attract?.restore;
+        if (!restore?.enable || !this._restoreData.size) {
+            return;
+        }
+        const now = Date.now(), restoreDelay = restore.delay * millisecondsToSeconds, restoreSpeed = Math.max(minRestoreSpeed, Math.min(maxRestoreSpeed, restore.speed));
+        for (const [particle, restoreData] of this._restoreData) {
+            if (this._interactedThisFrame.has(particle)) {
+                continue;
+            }
+            if (particle.destroyed) {
+                this._restoreData.delete(particle);
+                continue;
+            }
+            const target = restoreData.target;
+            if (now - restoreData.lastInteractionTime < restoreDelay) {
+                continue;
+            }
+            let dx = target.x - particle.position.x, dy = target.y - particle.position.y, dz = target.z - particle.position.z;
+            if (restore.follow && particle.options.move.enable) {
+                const { x: vx, y: vy, z: vz } = particle.velocity, velocityLengthSq = vx * vx + vy * vy + vz * vz;
+                if (velocityLengthSq > minVelocityLengthSq) {
+                    const parallelScale = (dx * vx + dy * vy + dz * vz) / velocityLengthSq;
+                    dx -= vx * parallelScale;
+                    dy -= vy * parallelScale;
+                    dz -= vz * parallelScale;
+                }
+            }
+            particle.position.x += dx * restoreSpeed;
+            particle.position.y += dy * restoreSpeed;
+            particle.position.z += dz * restoreSpeed;
+            if (Math.abs(dx) <= restoreEpsilon && Math.abs(dy) <= restoreEpsilon) {
+                particle.position.x = target.x;
+                particle.position.y = target.y;
+                particle.position.z = target.z;
+                this._restoreData.delete(particle);
+                continue;
+            }
+        }
+    }
+    _trackInteractedParticle(particle) {
+        this._interactedThisFrame.add(particle);
+        const restore = this.container.actualOptions.interactivity?.modes.attract?.restore;
+        if (!restore?.enable) {
+            return;
+        }
+        const now = Date.now();
+        let restoreData = this._restoreData.get(particle);
+        if (!restoreData) {
+            restoreData = {
+                target: particle.position.copy(),
+                lastInteractionTime: now,
+            };
+            this._restoreData.set(particle, restoreData);
+        }
+        restoreData.lastInteractionTime = now;
+    }
 }

package/browser/Options/Classes/Attract.js

@@ -5,6 +5,7 @@ export class Attract {
     easing;
     factor;
     maxSpeed;
+    restore;
     speed;
     constructor() {
         this.distance = 200;
@@ -13,6 +14,12 @@ export class Attract {
         this.factor = 1;
         this.maxSpeed = 50;
         this.speed = 1;
+        this.restore = {
+            enable: false,
+            delay: 0,
+            speed: 0.08,
+            follow: true,
+        };
     }
     load(data) {
         if (isNull(data)) {
@@ -36,5 +43,11 @@ export class Attract {
         if (data.speed !== undefined) {
             this.speed = data.speed;
         }
+        if (data.restore !== undefined) {
+            this.restore.enable = data.restore.enable ?? this.restore.enable;
+            this.restore.delay = data.restore.delay ?? this.restore.delay;
+            this.restore.speed = data.restore.speed ?? this.restore.speed;
+            this.restore.follow = data.restore.follow ?? this.restore.follow;
+        }
     }
 }

package/browser/Utils.js

@@ -1,6 +1,6 @@
 import { Circle, Vector, clamp, getDistances, identity, } from "@tsparticles/engine";
 const minFactor = 1, minRadius = 0, updateVector = Vector.origin;
-function processAttract(pluginManager, container, position, attractRadius, area, queryCb) {
+function processAttract(pluginManager, container, position, attractRadius, area, queryCb, onAttractParticle) {
     const attractOptions = container.actualOptions.interactivity?.modes.attract;
     if (!attractOptions) {
         return;
@@ -10,10 +10,11 @@ function processAttract(pluginManager, container, position, attractRadius, area,
         const { dx, dy, distance } = getDistances(particle.position, position), velocity = attractOptions.speed * attractOptions.factor, attractFactor = clamp(pluginManager.getEasing(attractOptions.easing)(identity - distance / attractRadius) * velocity, minFactor, attractOptions.maxSpeed);
         updateVector.x = !distance ? velocity : (dx / distance) * attractFactor;
         updateVector.y = !distance ? velocity : (dy / distance) * attractFactor;
+        onAttractParticle?.(particle);
         particle.position.subFrom(updateVector);
     }
 }
-export function clickAttract(pluginManager, container, interactivityData, enabledCb) {
+export function clickAttract(pluginManager, container, interactivityData, enabledCb, onAttractParticle) {
     container.attract ??= { particles: [] };
     const { attract } = container;
     if (!attract.finish) {
@@ -28,16 +29,16 @@ export function clickAttract(pluginManager, container, interactivityData, enable
         if (!attractRadius || attractRadius < minRadius || !mousePos) {
             return;
         }
-        processAttract(pluginManager, container, mousePos, attractRadius, new Circle(mousePos.x, mousePos.y, attractRadius), (p) => enabledCb(p));
+        processAttract(pluginManager, container, mousePos, attractRadius, new Circle(mousePos.x, mousePos.y, attractRadius), (p) => enabledCb(p), onAttractParticle);
     }
     else if (attract.clicking === false) {
         attract.particles = [];
     }
 }
-export function hoverAttract(pluginManager, container, interactivityData, enabledCb) {
+export function hoverAttract(pluginManager, container, interactivityData, enabledCb, onAttractParticle) {
     const mousePos = interactivityData.mouse.position, attractRadius = container.retina.attractModeDistance;
     if (!attractRadius || attractRadius < minRadius || !mousePos) {
         return;
     }
-    processAttract(pluginManager, container, mousePos, attractRadius, new Circle(mousePos.x, mousePos.y, attractRadius), (p) => enabledCb(p));
+    processAttract(pluginManager, container, mousePos, attractRadius, new Circle(mousePos.x, mousePos.y, attractRadius), (p) => enabledCb(p), onAttractParticle);
 }

package/browser/browser.js

@@ -0,0 +1,5 @@
+import { loadExternalAttractInteraction } from "./index.js";
+const globalObject = globalThis;
+globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
+globalObject.loadExternalAttractInteraction = loadExternalAttractInteraction;
+export * from "./index.js";

package/browser/index.js

@@ -1,11 +1,11 @@
+import { ensureInteractivityPluginLoaded } from "@tsparticles/plugin-interactivity";
+import { Attractor } from "./Attractor.js";
 export async function loadExternalAttractInteraction(engine) {
-    engine.checkVersion("4.0.0-beta.9");
-    await engine.pluginManager.register(async (e) => {
-        const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
+    engine.checkVersion("4.0.0");
+    await engine.pluginManager.register((e) => {
         ensureInteractivityPluginLoaded(e);
-        e.pluginManager.addInteractor?.("externalAttract", async (container) => {
-            const { Attractor } = await import("./Attractor.js");
-            return new Attractor(e.pluginManager, container);
+        e.pluginManager.addInteractor?.("externalAttract", container => {
+            return Promise.resolve(new Attractor(e.pluginManager, container));
         });
     });
 }

package/browser/index.lazy.js

@@ -0,0 +1,12 @@
+export async function loadExternalAttractInteraction(engine) {
+    engine.checkVersion("4.0.0");
+    await engine.pluginManager.register(async (e) => {
+        const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity/lazy");
+        ensureInteractivityPluginLoaded(e);
+        e.pluginManager.addInteractor?.("externalAttract", async (container) => {
+            const { Attractor } = await import("./Attractor.js");
+            return new Attractor(e.pluginManager, container);
+        });
+    });
+}
+export * from "./Options/Classes/Attract.js";

package/cjs/Attractor.js

@@ -2,15 +2,19 @@ import { ExternalInteractorBase, mouseMoveEvent, } from "@tsparticles/plugin-int
 import { isInArray, millisecondsToSeconds } from "@tsparticles/engine";
 import { clickAttract, hoverAttract } from "./Utils.js";
 import { Attract } from "./Options/Classes/Attract.js";
-const attractMode = "attract";
+const attractMode = "attract", minVelocityLengthSq = 0, minRestoreSpeed = 0.001, maxRestoreSpeed = 1, restoreEpsilon = 0.5;
 export class Attractor extends ExternalInteractorBase {
     handleClickMode;
+    _interactedThisFrame;
     _maxDistance;
     _pluginManager;
+    _restoreData;
     constructor(pluginManager, container) {
         super(container);
         this._pluginManager = pluginManager;
         this._maxDistance = 0;
+        this._interactedThisFrame = new Set();
+        this._restoreData = new Map();
         container.attract ??= { particles: [] };
         this.handleClickMode = (mode, interactivityData) => {
             const options = this.container.actualOptions, attract = options.interactivity?.modes.attract;
@@ -51,17 +55,23 @@ export class Attractor extends ExternalInteractorBase {
         container.retina.attractModeDistance = attract.distance * container.retina.pixelRatio;
     }
     interact(interactivityData) {
+        this._interactedThisFrame.clear();
         const container = this.container, options = container.actualOptions, mouseMoveStatus = interactivityData.status === mouseMoveEvent, events = options.interactivity?.events;
         if (!events) {
             return;
         }
         const { enable: hoverEnabled, mode: hoverMode } = events.onHover, { enable: clickEnabled, mode: clickMode } = events.onClick;
         if (mouseMoveStatus && hoverEnabled && isInArray(attractMode, hoverMode)) {
-            hoverAttract(this._pluginManager, this.container, interactivityData, p => this.isEnabled(interactivityData, p));
+            hoverAttract(this._pluginManager, this.container, interactivityData, p => this.isEnabled(interactivityData, p), p => {
+                this._trackInteractedParticle(p);
+            });
         }
         else if (clickEnabled && isInArray(attractMode, clickMode)) {
-            clickAttract(this._pluginManager, this.container, interactivityData, p => this.isEnabled(interactivityData, p));
+            clickAttract(this._pluginManager, this.container, interactivityData, p => this.isEnabled(interactivityData, p), p => {
+                this._trackInteractedParticle(p);
+            });
         }
+        this._restoreParticles();
     }
     isEnabled(interactivityData, particle) {
         const container = this.container, options = container.actualOptions, mouse = interactivityData.mouse, events = (particle?.interactivity ?? options.interactivity)?.events;
@@ -79,4 +89,61 @@ export class Attractor extends ExternalInteractorBase {
     }
     reset() {
     }
+    _restoreParticles() {
+        const restore = this.container.actualOptions.interactivity?.modes.attract?.restore;
+        if (!restore?.enable || !this._restoreData.size) {
+            return;
+        }
+        const now = Date.now(), restoreDelay = restore.delay * millisecondsToSeconds, restoreSpeed = Math.max(minRestoreSpeed, Math.min(maxRestoreSpeed, restore.speed));
+        for (const [particle, restoreData] of this._restoreData) {
+            if (this._interactedThisFrame.has(particle)) {
+                continue;
+            }
+            if (particle.destroyed) {
+                this._restoreData.delete(particle);
+                continue;
+            }
+            const target = restoreData.target;
+            if (now - restoreData.lastInteractionTime < restoreDelay) {
+                continue;
+            }
+            let dx = target.x - particle.position.x, dy = target.y - particle.position.y, dz = target.z - particle.position.z;
+            if (restore.follow && particle.options.move.enable) {
+                const { x: vx, y: vy, z: vz } = particle.velocity, velocityLengthSq = vx * vx + vy * vy + vz * vz;
+                if (velocityLengthSq > minVelocityLengthSq) {
+                    const parallelScale = (dx * vx + dy * vy + dz * vz) / velocityLengthSq;
+                    dx -= vx * parallelScale;
+                    dy -= vy * parallelScale;
+                    dz -= vz * parallelScale;
+                }
+            }
+            particle.position.x += dx * restoreSpeed;
+            particle.position.y += dy * restoreSpeed;
+            particle.position.z += dz * restoreSpeed;
+            if (Math.abs(dx) <= restoreEpsilon && Math.abs(dy) <= restoreEpsilon) {
+                particle.position.x = target.x;
+                particle.position.y = target.y;
+                particle.position.z = target.z;
+                this._restoreData.delete(particle);
+                continue;
+            }
+        }
+    }
+    _trackInteractedParticle(particle) {
+        this._interactedThisFrame.add(particle);
+        const restore = this.container.actualOptions.interactivity?.modes.attract?.restore;
+        if (!restore?.enable) {
+            return;
+        }
+        const now = Date.now();
+        let restoreData = this._restoreData.get(particle);
+        if (!restoreData) {
+            restoreData = {
+                target: particle.position.copy(),
+                lastInteractionTime: now,
+            };
+            this._restoreData.set(particle, restoreData);
+        }
+        restoreData.lastInteractionTime = now;
+    }
 }

package/cjs/Options/Classes/Attract.js

@@ -5,6 +5,7 @@ export class Attract {
     easing;
     factor;
     maxSpeed;
+    restore;
     speed;
     constructor() {
         this.distance = 200;
@@ -13,6 +14,12 @@ export class Attract {
         this.factor = 1;
         this.maxSpeed = 50;
         this.speed = 1;
+        this.restore = {
+            enable: false,
+            delay: 0,
+            speed: 0.08,
+            follow: true,
+        };
     }
     load(data) {
         if (isNull(data)) {
@@ -36,5 +43,11 @@ export class Attract {
         if (data.speed !== undefined) {
             this.speed = data.speed;
         }
+        if (data.restore !== undefined) {
+            this.restore.enable = data.restore.enable ?? this.restore.enable;
+            this.restore.delay = data.restore.delay ?? this.restore.delay;
+            this.restore.speed = data.restore.speed ?? this.restore.speed;
+            this.restore.follow = data.restore.follow ?? this.restore.follow;
+        }
     }
 }

package/cjs/Utils.js

@@ -1,6 +1,6 @@
 import { Circle, Vector, clamp, getDistances, identity, } from "@tsparticles/engine";
 const minFactor = 1, minRadius = 0, updateVector = Vector.origin;
-function processAttract(pluginManager, container, position, attractRadius, area, queryCb) {
+function processAttract(pluginManager, container, position, attractRadius, area, queryCb, onAttractParticle) {
     const attractOptions = container.actualOptions.interactivity?.modes.attract;
     if (!attractOptions) {
         return;
@@ -10,10 +10,11 @@ function processAttract(pluginManager, container, position, attractRadius, area,
         const { dx, dy, distance } = getDistances(particle.position, position), velocity = attractOptions.speed * attractOptions.factor, attractFactor = clamp(pluginManager.getEasing(attractOptions.easing)(identity - distance / attractRadius) * velocity, minFactor, attractOptions.maxSpeed);
         updateVector.x = !distance ? velocity : (dx / distance) * attractFactor;
         updateVector.y = !distance ? velocity : (dy / distance) * attractFactor;
+        onAttractParticle?.(particle);
         particle.position.subFrom(updateVector);
     }
 }
-export function clickAttract(pluginManager, container, interactivityData, enabledCb) {
+export function clickAttract(pluginManager, container, interactivityData, enabledCb, onAttractParticle) {
     container.attract ??= { particles: [] };
     const { attract } = container;
     if (!attract.finish) {
@@ -28,16 +29,16 @@ export function clickAttract(pluginManager, container, interactivityData, enable
         if (!attractRadius || attractRadius < minRadius || !mousePos) {
             return;
         }
-        processAttract(pluginManager, container, mousePos, attractRadius, new Circle(mousePos.x, mousePos.y, attractRadius), (p) => enabledCb(p));
+        processAttract(pluginManager, container, mousePos, attractRadius, new Circle(mousePos.x, mousePos.y, attractRadius), (p) => enabledCb(p), onAttractParticle);
     }
     else if (attract.clicking === false) {
         attract.particles = [];
     }
 }
-export function hoverAttract(pluginManager, container, interactivityData, enabledCb) {
+export function hoverAttract(pluginManager, container, interactivityData, enabledCb, onAttractParticle) {
     const mousePos = interactivityData.mouse.position, attractRadius = container.retina.attractModeDistance;
     if (!attractRadius || attractRadius < minRadius || !mousePos) {
         return;
     }
-    processAttract(pluginManager, container, mousePos, attractRadius, new Circle(mousePos.x, mousePos.y, attractRadius), (p) => enabledCb(p));
+    processAttract(pluginManager, container, mousePos, attractRadius, new Circle(mousePos.x, mousePos.y, attractRadius), (p) => enabledCb(p), onAttractParticle);
 }

package/cjs/browser.js

@@ -0,0 +1,5 @@
+import { loadExternalAttractInteraction } from "./index.js";
+const globalObject = globalThis;
+globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
+globalObject.loadExternalAttractInteraction = loadExternalAttractInteraction;
+export * from "./index.js";

package/cjs/index.js

@@ -1,11 +1,11 @@
+import { ensureInteractivityPluginLoaded } from "@tsparticles/plugin-interactivity";
+import { Attractor } from "./Attractor.js";
 export async function loadExternalAttractInteraction(engine) {
-    engine.checkVersion("4.0.0-beta.9");
-    await engine.pluginManager.register(async (e) => {
-        const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
+    engine.checkVersion("4.0.0");
+    await engine.pluginManager.register((e) => {
         ensureInteractivityPluginLoaded(e);
-        e.pluginManager.addInteractor?.("externalAttract", async (container) => {
-            const { Attractor } = await import("./Attractor.js");
-            return new Attractor(e.pluginManager, container);
+        e.pluginManager.addInteractor?.("externalAttract", container => {
+            return Promise.resolve(new Attractor(e.pluginManager, container));
         });
     });
 }

package/cjs/index.lazy.js

@@ -0,0 +1,12 @@
+export async function loadExternalAttractInteraction(engine) {
+    engine.checkVersion("4.0.0");
+    await engine.pluginManager.register(async (e) => {
+        const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity/lazy");
+        ensureInteractivityPluginLoaded(e);
+        e.pluginManager.addInteractor?.("externalAttract", async (container) => {
+            const { Attractor } = await import("./Attractor.js");
+            return new Attractor(e.pluginManager, container);
+        });
+    });
+}
+export * from "./Options/Classes/Attract.js";

package/esm/Attractor.js

@@ -2,15 +2,19 @@ import { ExternalInteractorBase, mouseMoveEvent, } from "@tsparticles/plugin-int
 import { isInArray, millisecondsToSeconds } from "@tsparticles/engine";
 import { clickAttract, hoverAttract } from "./Utils.js";
 import { Attract } from "./Options/Classes/Attract.js";
-const attractMode = "attract";
+const attractMode = "attract", minVelocityLengthSq = 0, minRestoreSpeed = 0.001, maxRestoreSpeed = 1, restoreEpsilon = 0.5;
 export class Attractor extends ExternalInteractorBase {
     handleClickMode;
+    _interactedThisFrame;
     _maxDistance;
     _pluginManager;
+    _restoreData;
     constructor(pluginManager, container) {
         super(container);
         this._pluginManager = pluginManager;
         this._maxDistance = 0;
+        this._interactedThisFrame = new Set();
+        this._restoreData = new Map();
         container.attract ??= { particles: [] };
         this.handleClickMode = (mode, interactivityData) => {
             const options = this.container.actualOptions, attract = options.interactivity?.modes.attract;
@@ -51,17 +55,23 @@ export class Attractor extends ExternalInteractorBase {
         container.retina.attractModeDistance = attract.distance * container.retina.pixelRatio;
     }
     interact(interactivityData) {
+        this._interactedThisFrame.clear();
         const container = this.container, options = container.actualOptions, mouseMoveStatus = interactivityData.status === mouseMoveEvent, events = options.interactivity?.events;
         if (!events) {
             return;
         }
         const { enable: hoverEnabled, mode: hoverMode } = events.onHover, { enable: clickEnabled, mode: clickMode } = events.onClick;
         if (mouseMoveStatus && hoverEnabled && isInArray(attractMode, hoverMode)) {
-            hoverAttract(this._pluginManager, this.container, interactivityData, p => this.isEnabled(interactivityData, p));
+            hoverAttract(this._pluginManager, this.container, interactivityData, p => this.isEnabled(interactivityData, p), p => {
+                this._trackInteractedParticle(p);
+            });
         }
         else if (clickEnabled && isInArray(attractMode, clickMode)) {
-            clickAttract(this._pluginManager, this.container, interactivityData, p => this.isEnabled(interactivityData, p));
+            clickAttract(this._pluginManager, this.container, interactivityData, p => this.isEnabled(interactivityData, p), p => {
+                this._trackInteractedParticle(p);
+            });
         }
+        this._restoreParticles();
     }
     isEnabled(interactivityData, particle) {
         const container = this.container, options = container.actualOptions, mouse = interactivityData.mouse, events = (particle?.interactivity ?? options.interactivity)?.events;
@@ -79,4 +89,61 @@ export class Attractor extends ExternalInteractorBase {
     }
     reset() {
     }
+    _restoreParticles() {
+        const restore = this.container.actualOptions.interactivity?.modes.attract?.restore;
+        if (!restore?.enable || !this._restoreData.size) {
+            return;
+        }
+        const now = Date.now(), restoreDelay = restore.delay * millisecondsToSeconds, restoreSpeed = Math.max(minRestoreSpeed, Math.min(maxRestoreSpeed, restore.speed));
+        for (const [particle, restoreData] of this._restoreData) {
+            if (this._interactedThisFrame.has(particle)) {
+                continue;
+            }
+            if (particle.destroyed) {
+                this._restoreData.delete(particle);
+                continue;
+            }
+            const target = restoreData.target;
+            if (now - restoreData.lastInteractionTime < restoreDelay) {
+                continue;
+            }
+            let dx = target.x - particle.position.x, dy = target.y - particle.position.y, dz = target.z - particle.position.z;
+            if (restore.follow && particle.options.move.enable) {
+                const { x: vx, y: vy, z: vz } = particle.velocity, velocityLengthSq = vx * vx + vy * vy + vz * vz;
+                if (velocityLengthSq > minVelocityLengthSq) {
+                    const parallelScale = (dx * vx + dy * vy + dz * vz) / velocityLengthSq;
+                    dx -= vx * parallelScale;
+                    dy -= vy * parallelScale;
+                    dz -= vz * parallelScale;
+                }
+            }
+            particle.position.x += dx * restoreSpeed;
+            particle.position.y += dy * restoreSpeed;
+            particle.position.z += dz * restoreSpeed;
+            if (Math.abs(dx) <= restoreEpsilon && Math.abs(dy) <= restoreEpsilon) {
+                particle.position.x = target.x;
+                particle.position.y = target.y;
+                particle.position.z = target.z;
+                this._restoreData.delete(particle);
+                continue;
+            }
+        }
+    }
+    _trackInteractedParticle(particle) {
+        this._interactedThisFrame.add(particle);
+        const restore = this.container.actualOptions.interactivity?.modes.attract?.restore;
+        if (!restore?.enable) {
+            return;
+        }
+        const now = Date.now();
+        let restoreData = this._restoreData.get(particle);
+        if (!restoreData) {
+            restoreData = {
+                target: particle.position.copy(),
+                lastInteractionTime: now,
+            };
+            this._restoreData.set(particle, restoreData);
+        }
+        restoreData.lastInteractionTime = now;
+    }
 }

package/esm/Options/Classes/Attract.js

@@ -5,6 +5,7 @@ export class Attract {
     easing;
     factor;
     maxSpeed;
+    restore;
     speed;
     constructor() {
         this.distance = 200;
@@ -13,6 +14,12 @@ export class Attract {
         this.factor = 1;
         this.maxSpeed = 50;
         this.speed = 1;
+        this.restore = {
+            enable: false,
+            delay: 0,
+            speed: 0.08,
+            follow: true,
+        };
     }
     load(data) {
         if (isNull(data)) {
@@ -36,5 +43,11 @@ export class Attract {
         if (data.speed !== undefined) {
             this.speed = data.speed;
         }
+        if (data.restore !== undefined) {
+            this.restore.enable = data.restore.enable ?? this.restore.enable;
+            this.restore.delay = data.restore.delay ?? this.restore.delay;
+            this.restore.speed = data.restore.speed ?? this.restore.speed;
+            this.restore.follow = data.restore.follow ?? this.restore.follow;
+        }
     }
 }

package/esm/Utils.js

@@ -1,6 +1,6 @@
 import { Circle, Vector, clamp, getDistances, identity, } from "@tsparticles/engine";
 const minFactor = 1, minRadius = 0, updateVector = Vector.origin;
-function processAttract(pluginManager, container, position, attractRadius, area, queryCb) {
+function processAttract(pluginManager, container, position, attractRadius, area, queryCb, onAttractParticle) {
     const attractOptions = container.actualOptions.interactivity?.modes.attract;
     if (!attractOptions) {
         return;
@@ -10,10 +10,11 @@ function processAttract(pluginManager, container, position, attractRadius, area,
         const { dx, dy, distance } = getDistances(particle.position, position), velocity = attractOptions.speed * attractOptions.factor, attractFactor = clamp(pluginManager.getEasing(attractOptions.easing)(identity - distance / attractRadius) * velocity, minFactor, attractOptions.maxSpeed);
         updateVector.x = !distance ? velocity : (dx / distance) * attractFactor;
         updateVector.y = !distance ? velocity : (dy / distance) * attractFactor;
+        onAttractParticle?.(particle);
         particle.position.subFrom(updateVector);
     }
 }
-export function clickAttract(pluginManager, container, interactivityData, enabledCb) {
+export function clickAttract(pluginManager, container, interactivityData, enabledCb, onAttractParticle) {
     container.attract ??= { particles: [] };
     const { attract } = container;
     if (!attract.finish) {
@@ -28,16 +29,16 @@ export function clickAttract(pluginManager, container, interactivityData, enable
         if (!attractRadius || attractRadius < minRadius || !mousePos) {
             return;
         }
-        processAttract(pluginManager, container, mousePos, attractRadius, new Circle(mousePos.x, mousePos.y, attractRadius), (p) => enabledCb(p));
+        processAttract(pluginManager, container, mousePos, attractRadius, new Circle(mousePos.x, mousePos.y, attractRadius), (p) => enabledCb(p), onAttractParticle);
     }
     else if (attract.clicking === false) {
         attract.particles = [];
     }
 }
-export function hoverAttract(pluginManager, container, interactivityData, enabledCb) {
+export function hoverAttract(pluginManager, container, interactivityData, enabledCb, onAttractParticle) {
     const mousePos = interactivityData.mouse.position, attractRadius = container.retina.attractModeDistance;
     if (!attractRadius || attractRadius < minRadius || !mousePos) {
         return;
     }
-    processAttract(pluginManager, container, mousePos, attractRadius, new Circle(mousePos.x, mousePos.y, attractRadius), (p) => enabledCb(p));
+    processAttract(pluginManager, container, mousePos, attractRadius, new Circle(mousePos.x, mousePos.y, attractRadius), (p) => enabledCb(p), onAttractParticle);
 }

package/esm/browser.js

@@ -0,0 +1,5 @@
+import { loadExternalAttractInteraction } from "./index.js";
+const globalObject = globalThis;
+globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
+globalObject.loadExternalAttractInteraction = loadExternalAttractInteraction;
+export * from "./index.js";

package/esm/index.js

@@ -1,11 +1,11 @@
+import { ensureInteractivityPluginLoaded } from "@tsparticles/plugin-interactivity";
+import { Attractor } from "./Attractor.js";
 export async function loadExternalAttractInteraction(engine) {
-    engine.checkVersion("4.0.0-beta.9");
-    await engine.pluginManager.register(async (e) => {
-        const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
+    engine.checkVersion("4.0.0");
+    await engine.pluginManager.register((e) => {
         ensureInteractivityPluginLoaded(e);
-        e.pluginManager.addInteractor?.("externalAttract", async (container) => {
-            const { Attractor } = await import("./Attractor.js");
-            return new Attractor(e.pluginManager, container);
+        e.pluginManager.addInteractor?.("externalAttract", container => {
+            return Promise.resolve(new Attractor(e.pluginManager, container));
         });
     });
 }