destroy-the-text 2.0.4 → 3.0.0

package/dist/AnimationManager.d.ts

@@ -1,6 +1,7 @@
 interface Animatable {
     update(): void;
     isAlive(): boolean;
+    destroy?(): void;
 }
 declare class AnimationManagerSingleton {
     private static instance;

package/dist/AnimationManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimationManager.d.ts","sourceRoot":"","sources":["../src/AnimationManager.ts"],"names":[],"mappings":"AAGA,UAAU,UAAU;IAClB,MAAM,IAAI,IAAI,CAAC;IACf,OAAO,IAAI,OAAO,CAAC;CACpB;AAED,cAAM,yBAAyB;IAC7B,OAAO,CAAC,MAAM,CAAC,QAAQ,CAA4B;IACnD,OAAO,CAAC,OAAO,CAAoB;IACnC,OAAO,CAAC,WAAW,CAAuB;IAC1C,OAAO,CAAC,SAAS,CAAS;IAE1B,OAAO;IAEP,MAAM,CAAC,WAAW,IAAI,yBAAyB;IAO/C,QAAQ,CAAC,GAAG,EAAE,UAAU;IAOxB,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,IAAI,CAiBV;IAEF,QAAQ,IAAI,MAAM;CAGnB;AAED,eAAO,MAAM,gBAAgB,2BAA0C,CAAC"}
+{"version":3,"file":"AnimationManager.d.ts","sourceRoot":"","sources":["../src/AnimationManager.ts"],"names":[],"mappings":"AAEA,UAAU,UAAU;IAClB,MAAM,IAAI,IAAI,CAAC;IACf,OAAO,IAAI,OAAO,CAAC;IACnB,OAAO,CAAC,IAAI,IAAI,CAAC;CAClB;AAED,cAAM,yBAAyB;IAC7B,OAAO,CAAC,MAAM,CAAC,QAAQ,CAA4B;IACnD,OAAO,CAAC,OAAO,CAAoB;IACnC,OAAO,CAAC,WAAW,CAAuB;IAC1C,OAAO,CAAC,SAAS,CAAS;IAE1B,OAAO;IAEP,MAAM,CAAC,WAAW,IAAI,yBAAyB;IAO/C,QAAQ,CAAC,GAAG,EAAE,UAAU;IASxB,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,IAAI,CAwBV;IAEF,QAAQ,IAAI,MAAM;CAGnB;AAED,eAAO,MAAM,gBAAgB,2BAA0C,CAAC"}

package/dist/AnimationManager.js

@@ -1,12 +1,16 @@
-// @ts-ignore - jQuery require
-const $ = require("jquery");
 class AnimationManagerSingleton {
     constructor() {
         this.objects = [];
         this.animationId = null;
         this.isRunning = false;
         this.loop = () => {
-            // Remove dead objects
+            // Remove dead objects - call destroy() on them first
+            const deadObjects = this.objects.filter((obj) => !obj.isAlive());
+            deadObjects.forEach((obj) => {
+                if (obj.destroy) {
+                    obj.destroy();
+                }
+            });
             this.objects = this.objects.filter((obj) => obj.isAlive());
             // Update all objects in one pass
             for (let i = 0; i < this.objects.length; i++) {
@@ -29,7 +33,9 @@ class AnimationManagerSingleton {
     }
     register(obj) {
         this.objects.push(obj);
+        console.log("📡 AnimationManager.register: object registered, total objects:", this.objects.length);
         if (!this.isRunning) {
+            console.log("🎬 AnimationManager starting loop...");
             this.start();
         }
     }

package/dist/DTTSounds.d.ts

@@ -1,8 +1,6 @@
 export declare const DTTSounds: {
     guns: string[];
     effects: string[];
-    setGun(paths: string[]): void;
-    setEffects(paths: string[]): void;
     playGun(): void;
     playEffect(): void;
 };

package/dist/DTTSounds.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DTTSounds.d.ts","sourceRoot":"","sources":["../src/DTTSounds.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;UACN,MAAM,EAAE;aACL,MAAM,EAAE;kBAET,MAAM,EAAE;sBAMJ,MAAM,EAAE;;;CA2B7B,CAAC"}
+{"version":3,"file":"DTTSounds.d.ts","sourceRoot":"","sources":["../src/DTTSounds.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,SAAS;;;;;CAyBrB,CAAC"}

package/dist/DTTSounds.js

@@ -1,16 +1,19 @@
+// Get the base path for assets (works in both npm package and local dev)
+function getAssetPath(filename) {
+    // Try multiple paths to support different build/import scenarios
+    const paths = [
+        // In npm package: /node_modules/destroy-the-text/assets/
+        `/node_modules/destroy-the-text/assets/${filename}`,
+        // In monorepo/dev: /destroythetext/assets/
+        `/destroythetext/assets/${filename}`,
+        // Relative to public folder (common in Vite projects)
+        `/assets/${filename}`,
+    ];
+    return paths[0]; // Return the standard npm package path
+}
 export const DTTSounds = {
-    guns: [],
-    effects: [],
-    setGun(paths) {
-        paths.forEach(path => {
-            this.guns.push(path);
-        });
-    },
-    setEffects(paths) {
-        paths.forEach(path => {
-            this.effects.push(path);
-        });
-    },
+    guns: [getAssetPath("gun.mp3")],
+    effects: [getAssetPath("effect1.mp3"), getAssetPath("effect2.mp3"), getAssetPath("effect3.mp3")],
     playGun() {
         if (this.guns.length === 0)
             return;

package/dist/DestroyTheText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DestroyTheText.d.ts","sourceRoot":"","sources":["../src/DestroyTheText.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAStD,qBAAa,cAAc;IACvB,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,QAAQ,CAA2B;IAC3C,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,KAAK,CAAa;IAC1B,OAAO,CAAC,WAAW,CAA0C;IAC7D,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,IAAI,CAA4B;IACxC,OAAO,CAAC,IAAI,CAAqB;IACjC,OAAO,CAAC,eAAe,CAAc;IACrC,OAAO,CAAC,aAAa,CAAc;IACnC,OAAO,CAAC,KAAK,CAA4B;gBAE7B,MAAM,EAAE,qBAAqB;IAuCzC,OAAO,CAAC,YAAY;IAoCpB,OAAO,CAAC,mBAAmB;IA6B3B,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,YAAY;IAmBpB,OAAO,CAAC,SAAS;CAgFpB"}
+{"version":3,"file":"DestroyTheText.d.ts","sourceRoot":"","sources":["../src/DestroyTheText.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAOtD,qBAAa,cAAc;IACvB,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,QAAQ,CAA2B;IAC3C,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,KAAK,CAAa;IAC1B,OAAO,CAAC,WAAW,CAA0C;IAC7D,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,IAAI,CAA4B;IACxC,OAAO,CAAC,IAAI,CAAqB;IACjC,OAAO,CAAC,eAAe,CAAc;IACrC,OAAO,CAAC,aAAa,CAAc;IACnC,OAAO,CAAC,KAAK,CAA4B;gBAE7B,MAAM,EAAE,qBAAqB;IAuCzC,OAAO,CAAC,YAAY;IAoCpB,OAAO,CAAC,mBAAmB;IA6B3B,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,YAAY;IAmBpB,OAAO,CAAC,SAAS;CAgFpB"}

package/dist/DestroyTheText.js

@@ -3,8 +3,7 @@ import { Pixel } from "./Pixel";
 import { Letra } from "./Letra";
 import { Spark } from "./Spark";
 import { DTTSounds } from "./DTTSounds";
-// @ts-ignore - jQuery require
-const $ = require("jquery");
+import $ from "jquery";
 export class DestroyTheText {
     constructor(params) {
         this.started = false;
@@ -147,7 +146,7 @@ export class DestroyTheText {
         }, 100);
         const puntos = $("#puntos");
         if (puntos.length) {
-            puntos.html(+puntos.html() + 1);
+            puntos.html(String(+puntos.html() + 1));
         }
         if (this.count === 1) {
             if (this.callbackEnd) {

package/dist/Letra.d.ts

@@ -6,9 +6,11 @@ export declare class Letra {
     private gravitySpeed;
     private lifespan;
     private startTime;
+    private _destroyed;
     constructor(x: number, y: number, container: any);
     update(): void;
     isAlive(): boolean;
     private getPositiveOrNegative;
+    destroy(): void;
 }
 //# sourceMappingURL=Letra.d.ts.map

package/dist/Letra.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Letra.d.ts","sourceRoot":"","sources":["../src/Letra.ts"],"names":[],"mappings":"AAKA,qBAAa,KAAK;IACd,OAAO,CAAC,CAAC,CAAS;IAClB,OAAO,CAAC,CAAC,CAAS;IAClB,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,QAAQ,CAAgB;IAChC,OAAO,CAAC,SAAS,CAAsB;gBAE3B,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG;IAoBhD,MAAM;IAaN,OAAO,IAAI,OAAO;IAIlB,OAAO,CAAC,qBAAqB;CAGhC"}
+{"version":3,"file":"Letra.d.ts","sourceRoot":"","sources":["../src/Letra.ts"],"names":[],"mappings":"AAGA,qBAAa,KAAK;IACd,OAAO,CAAC,CAAC,CAAS;IAClB,OAAO,CAAC,CAAC,CAAS;IAClB,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,QAAQ,CAAgB;IAChC,OAAO,CAAC,SAAS,CAAsB;IACvC,OAAO,CAAC,UAAU,CAAkB;gBAExB,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG;IA4BhD,MAAM;IAgCN,OAAO,IAAI,OAAO;IAIlB,OAAO,CAAC,qBAAqB;IAItB,OAAO;CAKjB"}

package/dist/Letra.js

@@ -1,35 +1,57 @@
 import { AnimationManager } from "./AnimationManager";
-// @ts-ignore - jQuery require
-const $ = require("jquery");
+import $ from "jquery";
 export class Letra {
     constructor(x, y, container) {
         this.gravitySpeed = 0;
         this.lifespan = 3000; // 3 seconds
         this.startTime = Date.now();
+        this._destroyed = false;
         this.container = container.clone();
         this.container.removeClass("oculto");
-        this.container.addClass("absolute");
         this.x = x;
         this.y = y - 20;
+        // Copy styles from parent
         this.container.css("color", container.parent().css("color"));
         this.container.css("font-size", container.parent().css("font-size"));
         this.container.css("font-weight", container.parent().css("font-weight"));
         this.container.css("font-family", container.parent().css("font-family"));
-        this.container.css("transform", `translate(${x}px, ${y}px)`);
-        this.container.css("will-change", "transform");
+        // Use jQuery for positioning with absolute positioning
+        this.container.css("position", "absolute");
+        this.container.css("z-index", "10000");
+        this.container.css("left", `${x}px`);
+        this.container.css("top", `${y}px`);
         $("body").append(this.container);
-        this.direction = { x: this.getPositiveOrNegative() * Math.random(), y: 0 };
+        // Initial upward velocity, then gravity pulls down
+        this.direction = { x: this.getPositiveOrNegative() * Math.random() * 2, y: -3 };
+        this.gravitySpeed = 0;
         // Register with global animation manager
         AnimationManager.register(this);
     }
     update() {
+        // Ensure cleanup when lifespan expires
+        if (!this.isAlive() && !this._destroyed) {
+            this.destroy();
+            return;
+        }
         this.gravitySpeed += 0.2;
-        this.y += this.gravitySpeed;
+        this.y += this.gravitySpeed + this.direction.y;
         this.x += this.direction.x;
-        this.container.css("transform", `translate(${this.x}px, ${this.y}px)`);
-        // Auto-cleanup when dead
-        if (!this.isAlive()) {
-            this.container.remove();
+        // Fade out effect near end of life
+        const timeAlive = Date.now() - this.startTime;
+        const fadeOutStart = this.lifespan * 0.7;
+        let opacity = 1;
+        if (timeAlive > fadeOutStart) {
+            const fadeOutDuration = this.lifespan - fadeOutStart;
+            const fadeProgress = (timeAlive - fadeOutStart) / fadeOutDuration;
+            opacity = Math.max(0, 1 - fadeProgress);
+        }
+        // Update positioning
+        this.container.css("left", `${this.x}px`);
+        this.container.css("top", `${this.y}px`);
+        this.container.css("opacity", opacity.toString());
+        // Remove if very faded
+        if (opacity <= 0.05) {
+            this.destroy();
         }
     }
     isAlive() {
@@ -38,4 +60,10 @@ export class Letra {
     getPositiveOrNegative() {
         return Math.floor(Math.random() * 2) === 0 ? -1 : 1;
     }
+    destroy() {
+        if (this._destroyed)
+            return; // Prevent double destroy
+        this._destroyed = true;
+        this.container.remove();
+    }
 }

package/dist/Pixel.d.ts

@@ -8,6 +8,7 @@ export declare class Pixel {
     private startTime;
     static activePixels: Pixel[];
     static MAX_PIXELS: number;
+    private _destroyed;
     constructor(x: number, y: number, color: string);
     update(): void;
     isAlive(): boolean;

package/dist/Pixel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pixel.d.ts","sourceRoot":"","sources":["../src/Pixel.ts"],"names":[],"mappings":"AAKA,qBAAa,KAAK;IACd,OAAO,CAAC,CAAC,CAAS;IAClB,OAAO,CAAC,CAAC,CAAS;IAClB,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,QAAQ,CAAgB;IAChC,OAAO,CAAC,SAAS,CAAsB;IACvC,MAAM,CAAC,YAAY,EAAE,KAAK,EAAE,CAAM;IAClC,MAAM,CAAC,UAAU,SAAO;gBAEZ,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAwB/C,MAAM;IAqBN,OAAO,IAAI,OAAO;IAIlB,OAAO,CAAC,qBAAqB;IAItB,OAAO;CAGjB"}
+{"version":3,"file":"Pixel.d.ts","sourceRoot":"","sources":["../src/Pixel.ts"],"names":[],"mappings":"AAGA,qBAAa,KAAK;IACd,OAAO,CAAC,CAAC,CAAS;IAClB,OAAO,CAAC,CAAC,CAAS;IAClB,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,QAAQ,CAAgB;IAChC,OAAO,CAAC,SAAS,CAAsB;IACvC,MAAM,CAAC,YAAY,EAAE,KAAK,EAAE,CAAM;IAClC,MAAM,CAAC,UAAU,SAAO;IACxB,OAAO,CAAC,UAAU,CAAkB;gBAExB,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAyB/C,MAAM;IAuCN,OAAO,IAAI,OAAO;IAIlB,OAAO,CAAC,qBAAqB;IAItB,OAAO;CAUjB"}

package/dist/Pixel.js

@@ -1,30 +1,35 @@
 import { AnimationManager } from "./AnimationManager";
-// @ts-ignore - jQuery require
-const $ = require("jquery");
+import $ from "jquery";
 export class Pixel {
     constructor(x, y, color) {
         this.gravitySpeed = 0;
         this.lifespan = 3000; // 3 seconds
         this.startTime = Date.now();
+        this._destroyed = false;
         const length = 25;
         this.x = x;
         this.y = y + this.getPositiveOrNegative() * Math.floor(Math.random() * length);
         this.container = $(document.createElement("div"));
         this.container.addClass("pixel");
         this.container.css("background", color);
-        this.container.css("transform", `translate(${this.x}px, ${this.y}px)`);
-        this.container.css("will-change", "transform");
+        this.container.css("left", `${this.x}px`);
+        this.container.css("top", `${this.y}px`);
         $("body").append(this.container);
         this.direction = { x: this.getPositiveOrNegative() * Math.random(), y: 0 };
         Pixel.activePixels.push(this);
         if (Pixel.activePixels.length > Pixel.MAX_PIXELS) {
             const oldPixel = Pixel.activePixels.shift();
-            oldPixel?.destroy();
+            oldPixel === null || oldPixel === void 0 ? void 0 : oldPixel.destroy();
         }
         // Register with global animation manager
         AnimationManager.register(this);
     }
     update() {
+        // Check if dead FIRST and ensure cleanup
+        if (!this.isAlive() && !this._destroyed) {
+            this.destroy();
+            return;
+        }
         this.gravitySpeed += 0.2;
         this.y += this.gravitySpeed;
         this.x += this.direction.x;
@@ -33,11 +38,22 @@ export class Pixel {
             this.y = window.innerHeight - 10;
             this.gravitySpeed = 0;
             this.direction.x = 0;
-            this.container.css("opacity", "0.8");
         }
-        this.container.css("transform", `translate(${this.x}px, ${this.y}px)`);
-        // Auto-cleanup when dead
-        if (!this.isAlive()) {
+        // Fade out effect - more aggressive
+        const timeAlive = Date.now() - this.startTime;
+        const fadeOutStart = this.lifespan * 0.6; // Start fading at 60%
+        let opacity = 1;
+        if (timeAlive > fadeOutStart) {
+            const fadeOutDuration = this.lifespan - fadeOutStart;
+            const fadeProgress = (timeAlive - fadeOutStart) / fadeOutDuration;
+            opacity = Math.max(0, 1 - fadeProgress);
+        }
+        // Update positioning and opacity
+        this.container.css("left", `${this.x}px`);
+        this.container.css("top", `${this.y}px`);
+        this.container.css("opacity", opacity.toString());
+        // Remove if very faded
+        if (opacity <= 0.05) {
             this.destroy();
         }
     }
@@ -48,7 +64,15 @@ export class Pixel {
         return Math.floor(Math.random() * 2) === 0 ? -1 : 1;
     }
     destroy() {
-        this.container.remove();
+        if (this._destroyed)
+            return; // Prevent double destroy
+        this._destroyed = true;
+        const index = Pixel.activePixels.indexOf(this);
+        if (index > -1) {
+            Pixel.activePixels.splice(index, 1);
+        }
+        const element = this.container[0];
+        element === null || element === void 0 ? void 0 : element.remove();
     }
 }
 Pixel.activePixels = [];

package/dist/Spark.d.ts

@@ -7,6 +7,7 @@ export declare class Spark {
     static activeSparks: Spark[];
     private lifespan;
     private startTime;
+    private _destroyed;
     constructor(x: number, y: number);
     update(): void;
     isAlive(): boolean;

package/dist/Spark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spark.d.ts","sourceRoot":"","sources":["../src/Spark.ts"],"names":[],"mappings":"AAKA,qBAAa,KAAK;IAChB,OAAO,CAAC,CAAC,CAAS;IAClB,OAAO,CAAC,CAAC,CAAS;IAClB,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,YAAY,CAAa;IACjC,MAAM,CAAC,YAAY,EAAE,KAAK,EAAE,CAAM;IAClC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,SAAS,CAAsB;gBAE3B,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM;IAkChC,MAAM;IAaN,OAAO,IAAI,OAAO;IAIX,OAAO;CAOf"}
+{"version":3,"file":"Spark.d.ts","sourceRoot":"","sources":["../src/Spark.ts"],"names":[],"mappings":"AAGA,qBAAa,KAAK;IAChB,OAAO,CAAC,CAAC,CAAS;IAClB,OAAO,CAAC,CAAC,CAAS;IAClB,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,YAAY,CAAa;IACjC,MAAM,CAAC,YAAY,EAAE,KAAK,EAAE,CAAM;IAClC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,SAAS,CAAsB;IACvC,OAAO,CAAC,UAAU,CAAkB;gBAExB,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM;IAgChC,MAAM;IAgCN,OAAO,IAAI,OAAO;IAIX,OAAO;CASf"}

package/dist/Spark.js

@@ -1,10 +1,10 @@
 import { AnimationManager } from "./AnimationManager";
-// @ts-ignore - jQuery require
-const $ = require("jquery");
+import $ from "jquery";
 export class Spark {
     constructor(x, y) {
         this.gravitySpeed = 0;
         this.startTime = Date.now();
+        this._destroyed = false;
         this.x = x;
         this.y = y;
         this.lifespan = 200 + Math.random() * 200;
@@ -12,15 +12,12 @@ export class Spark {
         this.container.addClass("pixel");
         const colors = ["#FFD700", "#FFA500", "#FF4500", "#FFFF00"];
         const color = colors[Math.floor(Math.random() * colors.length)];
-        this.container.css({
-            background: color,
-            width: "3px",
-            height: "3px",
-            boxShadow: `0 0 4px ${color}`,
-            zIndex: 100,
-            transform: `translate(${x}px, ${y}px)`,
-            "will-change": "transform",
-        });
+        // Use jQuery for positioning with absolute positioning
+        this.container.css("position", "absolute");
+        this.container.css("left", `${x}px`);
+        this.container.css("top", `${y}px`);
+        this.container.css("background-color", color);
+        this.container.css("box-shadow", `0 0 4px ${color}`);
         $("body").append(this.container);
         const angle = Math.random() * Math.PI * 2;
         const speed = 2 + Math.random() * 3;
@@ -33,12 +30,29 @@ export class Spark {
         AnimationManager.register(this);
     }
     update() {
+        // Ensure cleanup when lifespan expires
+        if (!this.isAlive() && !this._destroyed) {
+            this.destroy();
+            return;
+        }
         this.gravitySpeed += 0.1;
         this.y += this.gravitySpeed + this.direction.y;
         this.x += this.direction.x;
-        this.container.css("transform", `translate(${this.x}px, ${this.y}px)`);
-        // Auto-cleanup when dead
-        if (!this.isAlive()) {
+        // Fade out effect
+        const timeAlive = Date.now() - this.startTime;
+        const fadeOutStart = this.lifespan * 0.6;
+        let opacity = 1;
+        if (timeAlive > fadeOutStart) {
+            const fadeOutDuration = this.lifespan - fadeOutStart;
+            const fadeProgress = (timeAlive - fadeOutStart) / fadeOutDuration;
+            opacity = Math.max(0, 1 - fadeProgress);
+        }
+        // Update positioning
+        this.container.css("left", `${this.x}px`);
+        this.container.css("top", `${this.y}px`);
+        this.container.css("opacity", opacity.toString());
+        // Remove if very faded
+        if (opacity <= 0.05) {
             this.destroy();
         }
     }
@@ -46,6 +60,9 @@ export class Spark {
         return Date.now() - this.startTime < this.lifespan;
     }
     destroy() {
+        if (this._destroyed)
+            return; // Prevent double destroy
+        this._destroyed = true;
         this.container.remove();
         const index = Spark.activeSparks.indexOf(this);
         if (index > -1) {

package/dist/styles.js

@@ -35,7 +35,7 @@ export function addStyles() {
         color: red;
     }`);
     addCss(`.absolute {
-        position:absolute;
+        position: fixed;
         z-index: 10000;
     }`);
 }

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "destroy-the-text",
-  "version": "2.0.4",
+  "version": "3.0.0",
   "description": "Destroy any text of your website. Easy to use. And very useless",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "assets"
   ],
   "scripts": {
     "build": "tsc",
@@ -29,4 +30,4 @@
     "@types/node": "^20.0.0",
     "typescript": "^5.3.3"
   }
-}
+}

package/README.md

@@ -1,78 +0,0 @@
-# destroy-the-text
-
-Destroy any text of your website. Easy to use. And very useless.
-
-## Installation
-
-```bash
-npm i destroy-the-text --save
-```
-
-## Basic Usage
-
-```javascript
-import { DestroyTheText, Tool } from "destroy-the-text";
-
-// Simple example
-new DestroyTheText({
-    textId: "example_1",
-    arma: Tool.gun
-});
-```
-
-## Options
-
-```javascript
-new DestroyTheText({
-    textId: "example_2",
-    text: ["Example with special hand", "Example with big gun"],
-    armas: [Tool.specialHand, Tool.bigGun]
-});
-```
-
-```javascript
-new DestroyTheText({
-    textId: "example_3",
-    arma: Tool.specialHand,
-    callbackEnd: () => location.href = "./"
-});
-```
-
-## Tools
-
-- **Gun** (`Tool.gun`) - Click to shoot letters with pixel effects
-- **BigGun** (`Tool.bigGun`) - Hover to destroy letters automatically
-- **Hand** (`Tool.hand`) - Click to grab letters and make them fall
-- **SpecialHand** (`Tool.specialHand`) - Hover to grab letters and make them fall
-
-## API
-
-### DestroyTheText
-
-```typescript
-new DestroyTheText(options: DestroyTheTextOptions)
-```
-
-### DestroyTheTextOptions
-
-```typescript
-{
-  textId: string;           // ID of the element to destroy
-  arma: Tool;               // Tool to use for destruction
-  text?: string[];          // Array of sequential texts
-  armas?: Tool[];           // Array of sequential tools
-  activate?: () => void;    // Callback when destruction starts
-  callbackEnd?: () => void; // Callback when destruction ends
-}
-```
-
-### DTTSounds
-
-```typescript
-DTTSounds.setGun(paths: string[])      // Set gun sound effects
-DTTSounds.setEffects(paths: string[])  // Set hand sound effects
-```
-
-## License
-
-MIT