destroy-the-text 3.2.1 → 3.2.3

package/dist/Letra.d.ts.map

@@ -1 +1 @@
-{"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;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;gBAE3B,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG;IA0BhD,MAAM;IAyBN,OAAO,IAAI,OAAO;IAIlB,OAAO,CAAC,qBAAqB;CAGhC"}

package/dist/Letra.js

@@ -14,18 +14,33 @@ export class Letra {
         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 native DOM API for transform
+        const element = this.container[0];
+        element.style.transform = `translate(${x}px, ${y}px)`;
+        element.style.willChange = "transform";
         $("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() {
         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)`);
+        // Fade out effect near end of life
+        const timeAlive = Date.now() - this.startTime;
+        const fadeOutStart = this.lifespan * 0.7;
+        if (timeAlive > fadeOutStart) {
+            const fadeOutDuration = this.lifespan - fadeOutStart;
+            const fadeProgress = (timeAlive - fadeOutStart) / fadeOutDuration;
+            const opacity = Math.max(0, 1 - fadeProgress);
+            this.container.css("opacity", opacity.toString());
+        }
+        // Use native DOM API for transform
+        const element = this.container[0];
+        element.style.transform = `translate(${this.x}px, ${this.y}px)`;
         // Auto-cleanup when dead
         if (!this.isAlive()) {
             this.container.remove();

package/dist/Pixel.d.ts.map

@@ -1 +1 @@
-{"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;gBAEZ,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IA0B/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;gBAEZ,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IA8B/C,MAAM;IAiCN,OAAO,IAAI,OAAO;IAIlB,OAAO,CAAC,qBAAqB;IAItB,OAAO;CAGjB"}

package/dist/Pixel.js

@@ -11,10 +11,12 @@ export class Pixel {
         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");
+        // Use native DOM API for transform to avoid jQuery issues
+        const element = this.container[0];
+        element.style.transform = `translate(${this.x}px, ${this.y}px)`;
+        element.style.willChange = "transform";
         $("body").append(this.container);
-        console.log("🎯 Pixel created at", { x: this.x, y: this.y, color, element: this.container[0] });
+        console.log("🎯 Pixel created at", { x: this.x, y: this.y, color, element: this.container[0], transform: element.style.transform });
         this.direction = { x: this.getPositiveOrNegative() * Math.random(), y: 0 };
         Pixel.activePixels.push(this);
         if (Pixel.activePixels.length > Pixel.MAX_PIXELS) {
@@ -35,7 +37,18 @@ export class Pixel {
             this.direction.x = 0;
             this.container.css("opacity", "0.8");
         }
-        this.container.css("transform", `translate(${this.x}px, ${this.y}px)`);
+        // Fade out effect near end of life
+        const timeAlive = Date.now() - this.startTime;
+        const fadeOutStart = this.lifespan * 0.7; // Start fade out at 70% of lifespan
+        if (timeAlive > fadeOutStart) {
+            const fadeOutDuration = this.lifespan - fadeOutStart;
+            const fadeProgress = (timeAlive - fadeOutStart) / fadeOutDuration;
+            const opacity = Math.max(0, 1 - fadeProgress);
+            this.container.css("opacity", opacity.toString());
+        }
+        // Use native DOM API for transform
+        const element = this.container[0];
+        element.style.transform = `translate(${this.x}px, ${this.y}px)`;
         // Auto-cleanup when dead
         if (!this.isAlive()) {
             this.destroy();

package/dist/Spark.d.ts.map

@@ -1 +1 @@
-{"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;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;gBAE3B,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM;IAsChC,MAAM;IAyBN,OAAO,IAAI,OAAO;IAIX,OAAO;CAOf"}

package/dist/Spark.js

@@ -17,9 +17,11 @@ export class Spark {
             height: "3px",
             boxShadow: `0 0 4px ${color}`,
             zIndex: 100,
-            transform: `translate(${x}px, ${y}px)`,
-            "will-change": "transform",
         });
+        // Use native DOM API for transform
+        const element = this.container[0];
+        element.style.transform = `translate(${x}px, ${y}px)`;
+        element.style.willChange = "transform";
         $("body").append(this.container);
         const angle = Math.random() * Math.PI * 2;
         const speed = 2 + Math.random() * 3;
@@ -35,7 +37,18 @@ export class Spark {
         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)`);
+        // Fade out effect
+        const timeAlive = Date.now() - this.startTime;
+        const fadeOutStart = this.lifespan * 0.6;
+        if (timeAlive > fadeOutStart) {
+            const fadeOutDuration = this.lifespan - fadeOutStart;
+            const fadeProgress = (timeAlive - fadeOutStart) / fadeOutDuration;
+            const opacity = Math.max(0, 1 - fadeProgress);
+            this.container.css("opacity", opacity.toString());
+        }
+        // Use native DOM API for transform
+        const element = this.container[0];
+        element.style.transform = `translate(${this.x}px, ${this.y}px)`;
         // Auto-cleanup when dead
         if (!this.isAlive()) {
             this.destroy();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "destroy-the-text",
-  "version": "3.2.1",
+  "version": "3.2.3",
   "description": "Destroy any text of your website. Easy to use. And very useless",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",