Optimize launch pulse effect to reduce animation lag

Author: Bikram Gole

script.js

@@ -185,6 +185,10 @@ let terminalHistory = [];
 let terminalHistoryIndex = 0;
 let terminalDraft = "";
 let blackflagShotLockUntil = 0;
+let pulseWaveLayer = null;
+let pulseWaveRing = null;
+let pulseCoreFlash = null;
+let sparkBatchId = 0;
 const typewriterTokens = new WeakMap();
 const heroTaglineVariants = [
   "Aura Farmer // Chaotic Fun 🚀",
@@ -504,39 +508,65 @@ function triggerPulseBackdrop(clientX = null, clientY = null) {
   const x = typeof clientX === "number" && clientX > 0 ? clientX : width * 0.5;
   const y = typeof clientY === "number" && clientY > 0 ? clientY : height * 0.35;
 
-  const layer = document.createElement("div");
-  layer.className = "pulse-wave";
-  layer.style.setProperty("--pulse-x", `${Math.round((x / width) * 100)}%`);
-  layer.style.setProperty("--pulse-y", `${Math.round((y / height) * 100)}%`);
+  const isConstrained =
+    window.matchMedia?.("(max-width: 820px)")?.matches
+    || window.matchMedia?.("(pointer: coarse)")?.matches
+    || false;
+  const isFirefoxLike = navigator.userAgent.includes("Firefox") || navigator.userAgent.includes("LibreWolf");
+
+  if (!pulseWaveLayer) {
+    pulseWaveLayer = document.createElement("div");
+    pulseWaveLayer.className = "pulse-wave";
+    pulseWaveRing = document.createElement("span");
+    pulseWaveRing.className = "pulse-wave-ring";
+    pulseWaveLayer.appendChild(pulseWaveRing);
+    document.body.appendChild(pulseWaveLayer);
+  }
 
-  document.body.appendChild(layer);
+  if (!pulseCoreFlash) {
+    pulseCoreFlash = document.createElement("span");
+    pulseCoreFlash.className = "pulse-core-flash";
+    document.body.appendChild(pulseCoreFlash);
+  }
 
-  // Force animation start reliably across restricted browsers.
-  void layer.offsetWidth;
-  layer.classList.add("is-active");
-  requestAnimationFrame(() => layer.classList.add("is-active"));
+  const px = `${Math.round((x / width) * 100)}%`;
+  const py = `${Math.round((y / height) * 100)}%`;
+  pulseWaveLayer.style.setProperty("--pulse-x", px);
+  pulseWaveLayer.style.setProperty("--pulse-y", py);
+  pulseCoreFlash.style.left = `${x}px`;
+  pulseCoreFlash.style.top = `${y}px`;
 
-  // Extra visible fallback flash for browsers that suppress blend/animation effects.
-  const flash = document.createElement("span");
-  flash.className = "pulse-core-flash";
-  flash.style.left = `${x}px`;
-  flash.style.top = `${y}px`;
-  document.body.appendChild(flash);
-  if (typeof flash.animate === "function") {
-    flash.animate(
-      [
-        { transform: "translate(-50%, -50%) scale(0.45)", opacity: 0.9 },
-        { transform: "translate(-50%, -50%) scale(3.6)", opacity: 0 },
-      ],
-      { duration: 420, easing: "cubic-bezier(0.2, 0.7, 0.3, 1)", fill: "forwards" }
-    ).onfinish = () => flash.remove();
-  } else {
-    window.setTimeout(() => flash.remove(), 450);
-  }
+  pulseWaveLayer.getAnimations().forEach((animation) => animation.cancel());
+  pulseWaveRing?.getAnimations().forEach((animation) => animation.cancel());
+  pulseCoreFlash.getAnimations().forEach((animation) => animation.cancel());
 
-  const cleanup = () => layer.remove();
-  layer.addEventListener("animationend", cleanup, { once: true });
-  window.setTimeout(cleanup, 1150);
+  const waveDuration = isConstrained ? 640 : 820;
+  const waveScaleTo = isConstrained ? 1.12 : 1.2;
+  pulseWaveLayer.animate(
+    [
+      { transform: "scale(0.92)", opacity: 0 },
+      { opacity: isFirefoxLike ? 0.62 : 0.82, offset: 0.18 },
+      { opacity: 0.3, offset: 0.6 },
+      { transform: `scale(${waveScaleTo})`, opacity: 0 },
+    ],
+    { duration: waveDuration, easing: "cubic-bezier(0.16, 0.82, 0.27, 1)", fill: "forwards" }
+  );
+
+  pulseWaveRing?.animate(
+    [
+      { transform: "translate(-50%, -50%) scale(0.34)", opacity: 0.95 },
+      { transform: `translate(-50%, -50%) scale(${isConstrained ? 9.5 : 13})`, opacity: 0 },
+    ],
+    { duration: waveDuration, easing: "ease-out", fill: "forwards" }
+  );
+
+  pulseCoreFlash.animate(
+    [
+      { transform: "translate(-50%, -50%) scale(0.45)", opacity: 0.9 },
+      { transform: "translate(-50%, -50%) scale(3.4)", opacity: 0 },
+    ],
+    { duration: isConstrained ? 320 : 420, easing: "cubic-bezier(0.2, 0.7, 0.3, 1)", fill: "forwards" }
+  );
 }
 
 function playPulseSound(pulseCount = 1) {
@@ -1779,16 +1809,30 @@ function showToast(message) {
 }
 
 function spawnSparks(total) {
-  for (let i = 0; i < total; i += 1) {
-    window.setTimeout(() => {
-      const spark = document.createElement("span");
-      spark.className = "spark";
-      spark.style.left = `${Math.random() * 98}vw`;
-      spark.style.setProperty("--dx", `${Math.random() * 110 - 55}px`);
-      document.body.appendChild(spark);
-      window.setTimeout(() => spark.remove(), 1200);
-    }, i * 38);
+  const isConstrained =
+    window.matchMedia?.("(max-width: 820px)")?.matches
+    || window.matchMedia?.("(pointer: coarse)")?.matches
+    || false;
+  const isFirefoxLike = navigator.userAgent.includes("Firefox") || navigator.userAgent.includes("LibreWolf");
+  const densityScale = isConstrained ? 0.35 : (isFirefoxLike ? 0.55 : 1);
+  const batchTotal = Math.max(3, Math.round(total * densityScale));
+  const batchId = `s${Date.now()}-${sparkBatchId += 1}`;
+  const fragment = document.createDocumentFragment();
+
+  for (let i = 0; i < batchTotal; i += 1) {
+    const spark = document.createElement("span");
+    spark.className = "spark";
+    spark.dataset.sparkBatch = batchId;
+    spark.style.left = `${Math.random() * 98}vw`;
+    spark.style.setProperty("--dx", `${Math.random() * 110 - 55}px`);
+    spark.style.setProperty("--spark-delay", `${i * 28}ms`);
+    fragment.appendChild(spark);
   }
+
+  document.body.appendChild(fragment);
+  window.setTimeout(() => {
+    document.querySelectorAll(`[data-spark-batch="${batchId}"]`).forEach((node) => node.remove());
+  }, 1400 + batchTotal * 28);
 }
 
 let matrixCanvas = null;

styles.css

@@ -2642,6 +2642,8 @@ body[data-theme="liquidglass"] .theme-cycle-btn {
   z-index: 50;
   pointer-events: none;
   animation: spark-rise 1100ms linear forwards;
+  animation-delay: var(--spark-delay, 0ms);
+  will-change: transform, opacity;
 }
 
 @keyframes spark-rise {
@@ -2662,6 +2664,7 @@ body[data-theme="liquidglass"] .theme-cycle-btn {
     radial-gradient(680px 460px at var(--pulse-x, 50%) var(--pulse-y, 35%), rgba(68, 130, 244, 0.26), transparent 78%);
   mix-blend-mode: screen;
   filter: blur(1px) saturate(132%);
+  will-change: transform, opacity;
 }
 
 body.browser-firefox .pulse-wave {
@@ -2684,10 +2687,11 @@ body.browser-firefox .pulse-wave {
   background:
     radial-gradient(circle, rgba(235, 248, 255, 0.95) 0%, rgba(145, 210, 255, 0.85) 42%, rgba(255, 170, 96, 0.52) 70%, rgba(255, 170, 96, 0) 100%);
   box-shadow: 0 0 20px rgba(151, 215, 255, 0.82), 0 0 34px rgba(255, 161, 85, 0.5);
+  opacity: 0;
+  will-change: transform, opacity;
 }
 
-.pulse-wave::after {
-  content: "";
+.pulse-wave-ring {
   position: absolute;
   left: var(--pulse-x, 50%);
   top: var(--pulse-y, 35%);
@@ -2698,26 +2702,27 @@ body.browser-firefox .pulse-wave {
   box-shadow: 0 0 16px rgba(122, 186, 255, 0.62), 0 0 28px rgba(255, 158, 74, 0.35);
   transform: translate(-50%, -50%) scale(0.34);
   opacity: 0;
+  will-change: transform, opacity;
 }
 
-.pulse-wave.is-active {
-  animation: pulse-bg-wave 840ms cubic-bezier(0.16, 0.82, 0.27, 1) forwards;
-}
-
-.pulse-wave.is-active::after {
-  animation: pulse-ring 840ms ease-out forwards;
-}
-
-@keyframes pulse-bg-wave {
-  0% { transform: scale(0.88); opacity: 0; }
-  18% { opacity: 0.9; }
-  62% { opacity: 0.35; }
-  100% { transform: scale(1.22); opacity: 0; }
+body.force-terminal-fallback .pulse-wave {
+  inset: -8%;
+  filter: none;
+  background:
+    radial-gradient(140px 140px at var(--pulse-x, 50%) var(--pulse-y, 35%), rgba(164, 218, 255, 0.85), transparent 66%),
+    radial-gradient(360px 260px at calc(var(--pulse-x, 50%) + 8%) calc(var(--pulse-y, 35%) - 8%), rgba(255, 162, 85, 0.34), transparent 72%),
+    radial-gradient(520px 380px at var(--pulse-x, 50%) var(--pulse-y, 35%), rgba(71, 139, 255, 0.26), transparent 78%);
 }
 
-@keyframes pulse-ring {
-  0% { transform: translate(-50%, -50%) scale(0.34); opacity: 0.95; }
-  100% { transform: translate(-50%, -50%) scale(14); opacity: 0; }
+@media (max-width: 820px) {
+  .pulse-wave {
+    inset: -8%;
+    filter: none;
+    background:
+      radial-gradient(140px 140px at var(--pulse-x, 50%) var(--pulse-y, 35%), rgba(164, 218, 255, 0.85), transparent 66%),
+      radial-gradient(360px 260px at calc(var(--pulse-x, 50%) + 8%) calc(var(--pulse-y, 35%) - 8%), rgba(255, 162, 85, 0.34), transparent 72%),
+      radial-gradient(520px 380px at var(--pulse-x, 50%) var(--pulse-y, 35%), rgba(71, 139, 255, 0.26), transparent 78%);
+  }
 }
 
 .matrix-layer {