diff --git a/frontend/src/html/pages/test.html b/frontend/src/html/pages/test.html
index 777d1f7dadc7..95ad7beed8a8 100644
--- a/frontend/src/html/pages/test.html
+++ b/frontend/src/html/pages/test.html
@@ -192,6 +192,9 @@
     <div id="premidTestMode" class="hidden"></div>
     <div id="premidSecondsLeft" class="hidden"></div>
   </div>
+  <div class="loading hidden">
+    <i class="fas fa-circle-notch fa-spin"></i>
+  </div>
   <div id="result" class="content-grid full-width hidden" tabindex="-1">
     <div class="wrapper">
       <div class="stats">
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 872c4197c4f5..a8491bf061dc 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -7,7 +7,7 @@
     <load src="html/warnings.html" />
     <div id="fpsCounter" class="hidden"></div>
     <div class="customBackground"></div>
-    <div id="backgroundLoader" style="display: none"></div>
+    <div id="backgroundLoader" class="hidden"></div>
     <div id="bannerCenter" class="focus"></div>
     <div id="notificationCenter">
       <div class="clearAll button invisible" style="display: none">
diff --git a/frontend/src/styles/animations.scss b/frontend/src/styles/animations.scss
index 8894c2bd63eb..d826c7659e35 100644
--- a/frontend/src/styles/animations.scss
+++ b/frontend/src/styles/animations.scss
@@ -10,6 +10,15 @@
   }
 }
 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 @keyframes caretFlashSmooth {
   0%,
   100% {
diff --git a/frontend/src/styles/core.scss b/frontend/src/styles/core.scss
index a51fab99bfb6..360a2e5dd732 100644
--- a/frontend/src/styles/core.scss
+++ b/frontend/src/styles/core.scss
@@ -192,6 +192,7 @@ body {
   background: var(--main-color);
   animation: loader 2s cubic-bezier(0.38, 0.16, 0.57, 0.82) infinite;
   z-index: 9999;
+  opacity: 0;
 }
 
 key {
diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index 8abc16b7dd92..7c04553d5a6a 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -589,7 +589,7 @@
 }
 
 #wordsInput {
-  width: 1ch;
+  width: 0;
   font-size: 1em;
   height: 1em;
   opacity: 0;
@@ -631,6 +631,22 @@
   }
 }
 
+.pageTest > .loading {
+  text-align: center;
+  & > i {
+    font-size: 2rem;
+    color: var(--main-color);
+  }
+  opacity: 0;
+  &:not(.hidden) {
+    animation-name: fadeIn;
+    animation-duration: 0.125s;
+    animation-delay: 0.5s;
+    animation-fill-mode: forwards;
+    animation-timing-function: ease;
+  }
+}
+
 #result {
   &:focus-visible {
     outline: none;
diff --git a/frontend/src/ts/elements/keymap.ts b/frontend/src/ts/elements/keymap.ts
index a8c881a008a9..66f7557e7d5a 100644
--- a/frontend/src/ts/elements/keymap.ts
+++ b/frontend/src/ts/elements/keymap.ts
@@ -16,6 +16,7 @@ import { getActiveFunboxNames } from "../test/funbox/list";
 import { areSortedArraysEqual } from "../utils/arrays";
 import { LayoutObject } from "@monkeytype/schemas/layouts";
 import { animate } from "animejs";
+import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 
 export const keyDataDelimiter = "\uE000";
 
@@ -72,62 +73,67 @@ function findKeyElements(char: string): JQuery {
 
 function highlightKey(currentKey: string): void {
   if (Config.mode === "zen") return;
-  if (currentKey === "") currentKey = " ";
-  try {
-    $(".activeKey").removeClass("activeKey");
+  requestDebouncedAnimationFrame("keymap.highlightKey", async () => {
+    if (currentKey === "") currentKey = " ";
+    try {
+      document
+        .querySelectorAll(".activeKey")
+        .forEach((el) => el.classList.remove("activeKey"));
 
-    if (Config.language.startsWith("korean")) {
-      currentKey = Hangul.disassemble(currentKey)[0] ?? currentKey;
-    }
+      if (Config.language.startsWith("korean")) {
+        currentKey = Hangul.disassemble(currentKey)[0] ?? currentKey;
+      }
 
-    const $target = findKeyElements(currentKey);
-    $target.addClass("activeKey");
-  } catch (e) {
-    if (e instanceof Error) {
-      console.log("could not update highlighted keymap key: " + e.message);
+      const $target = findKeyElements(currentKey);
+      $target.addClass("activeKey");
+    } catch (e) {
+      if (e instanceof Error) {
+        console.log("could not update highlighted keymap key: " + e.message);
+      }
     }
-  }
+  });
 }
 
 async function flashKey(key: string, correct?: boolean): Promise<void> {
   if (key === undefined) return;
+  requestDebouncedAnimationFrame(`keymap.flashKey.${key}`, async () => {
+    const $target = findKeyElements(key);
 
-  const $target = findKeyElements(key);
-
-  const elements = $target.toArray();
-  if (elements.length === 0) return;
+    const elements = $target.toArray();
+    if (elements.length === 0) return;
 
-  const themecolors = await ThemeColors.getAll();
+    const themecolors = await ThemeColors.getAll();
 
-  try {
-    let startingStyle = {
-      color: themecolors.bg,
-      backgroundColor: themecolors.sub,
-      borderColor: themecolors.sub,
-    };
-
-    if (correct || Config.blindMode) {
-      startingStyle = {
-        color: themecolors.bg,
-        backgroundColor: themecolors.main,
-        borderColor: themecolors.main,
-      };
-    } else {
-      startingStyle = {
+    try {
+      let startingStyle = {
         color: themecolors.bg,
-        backgroundColor: themecolors.error,
-        borderColor: themecolors.error,
+        backgroundColor: themecolors.sub,
+        borderColor: themecolors.sub,
       };
-    }
 
-    animate(elements, {
-      color: [startingStyle.color, themecolors.sub],
-      backgroundColor: [startingStyle.backgroundColor, themecolors.subAlt],
-      borderColor: [startingStyle.borderColor, themecolors.sub],
-      duration: 250,
-      easing: "out(5)",
-    });
-  } catch (e) {}
+      if (correct || Config.blindMode) {
+        startingStyle = {
+          color: themecolors.bg,
+          backgroundColor: themecolors.main,
+          borderColor: themecolors.main,
+        };
+      } else {
+        startingStyle = {
+          color: themecolors.bg,
+          backgroundColor: themecolors.error,
+          borderColor: themecolors.error,
+        };
+      }
+
+      animate(elements, {
+        color: [startingStyle.color, themecolors.sub],
+        backgroundColor: [startingStyle.backgroundColor, themecolors.subAlt],
+        borderColor: [startingStyle.borderColor, themecolors.sub],
+        duration: 250,
+        easing: "out(5)",
+      });
+    } catch (e) {}
+  });
 }
 
 export function hide(): void {
diff --git a/frontend/src/ts/elements/loader.ts b/frontend/src/ts/elements/loader.ts
index 4a4793dc3716..16a400d36cd1 100644
--- a/frontend/src/ts/elements/loader.ts
+++ b/frontend/src/ts/elements/loader.ts
@@ -1,31 +1,31 @@
-const element = $("#backgroundLoader");
-let timeout: NodeJS.Timeout | null = null;
-let visible = false;
+import { animate, JSAnimation } from "animejs";
+import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 
-function clearTimeout(): void {
-  if (timeout !== null) {
-    window.clearTimeout(timeout);
-    timeout = null;
-  }
-}
+const element = document.querySelector("#backgroundLoader") as HTMLElement;
+let showAnim: JSAnimation | null = null;
 
 export function show(instant = false): void {
-  if (visible) return;
-
-  if (instant) {
-    element.stop(true, true).show();
-    visible = true;
-  } else {
-    timeout = setTimeout(() => {
-      element.stop(true, true).show();
-    }, 125);
-    visible = true;
-  }
+  requestDebouncedAnimationFrame("loader.show", () => {
+    showAnim = animate(element, {
+      opacity: 1,
+      duration: 125,
+      delay: instant ? 0 : 125,
+      onBegin: () => {
+        element.classList.remove("hidden");
+      },
+    });
+  });
 }
 
 export function hide(): void {
-  if (!visible) return;
-  clearTimeout();
-  element.stop(true, true).fadeOut(125);
-  visible = false;
+  requestDebouncedAnimationFrame("loader.hide", () => {
+    showAnim?.pause();
+    animate(element, {
+      opacity: 0,
+      duration: 125,
+      onComplete: () => {
+        element.classList.add("hidden");
+      },
+    });
+  });
 }
diff --git a/frontend/src/ts/elements/monkey-power.ts b/frontend/src/ts/elements/monkey-power.ts
index b40d86d3dade..270675037ff4 100644
--- a/frontend/src/ts/elements/monkey-power.ts
+++ b/frontend/src/ts/elements/monkey-power.ts
@@ -2,6 +2,10 @@ import * as ThemeColors from "./theme-colors";
 import * as SlowTimer from "../states/slow-timer";
 import Config from "../config";
 import { isSafeNumber } from "@monkeytype/util/numbers";
+import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
+
+const html = document.querySelector("html") as HTMLElement;
+const body = document.body;
 
 type Particle = {
   x: number;
@@ -14,7 +18,7 @@ type Particle = {
 
 type CTX = {
   particles: Particle[];
-  caret?: JQuery;
+  caret?: HTMLElement;
   canvas?: HTMLCanvasElement;
   context2d?: CanvasRenderingContext2D;
   rendering: boolean;
@@ -118,7 +122,7 @@ function updateParticle(particle: Particle): void {
 }
 
 export function init(): void {
-  ctx.caret = $("#caret");
+  ctx.caret = document.querySelector("#caret") as HTMLElement;
   ctx.canvas = createCanvas();
   ctx.context2d = ctx.canvas.getContext("2d") as CanvasRenderingContext2D;
 }
@@ -155,7 +159,7 @@ function render(): void {
   }
   ctx.particles = keep;
 
-  if (ctx.particles.length && !SlowTimer.get()) {
+  if (ctx.particles.length) {
     requestAnimationFrame(render);
   } else {
     ctx.context2d.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
@@ -168,14 +172,13 @@ export function reset(immediate = false): void {
   delete ctx.resetTimeOut;
 
   clearTimeout(ctx.resetTimeOut);
-  const body = $(document.body);
-  body.css("transition", "all .25s, transform 0.8s");
-  body.css("transform", `translate(0,0)`);
+  body.style.transition = "all .25s, transform 0.8s";
+  body.style.transform = `translate(0,0)`;
   setTimeout(
     () => {
-      body.css("transition", "all .25s, transform .05s");
-      $("html").css("overflow", "inherit");
-      $("html").css("overflow-y", "scroll");
+      body.style.transition = "all .25s, transform .05s";
+      html.style.overflow = "inherit";
+      html.style.overflowY = "scroll";
     },
     immediate ? 0 : 1000,
   );
@@ -201,47 +204,46 @@ function randomColor(): string {
 export async function addPower(good = true, extra = false): Promise<void> {
   if (Config.monkeyPowerLevel === "off" || SlowTimer.get()) return;
 
-  if (Config.blindMode) good = true;
-
-  // Shake
-  if (["3", "4"].includes(Config.monkeyPowerLevel)) {
-    $("html").css("overflow", "hidden");
-    const shake = [
-      Math.round(shakeAmount - Math.random() * shakeAmount),
-      Math.round(shakeAmount - Math.random() * shakeAmount),
+  requestDebouncedAnimationFrame("monkey-power.addPower", async () => {
+    if (Config.blindMode) good = true;
+
+    // Shake
+    if (["3", "4"].includes(Config.monkeyPowerLevel)) {
+      html.style.overflow = "hidden";
+      const shake = [
+        Math.round(shakeAmount - Math.random() * shakeAmount),
+        Math.round(shakeAmount - Math.random() * shakeAmount),
+      ];
+      body.style.transform = `translate(${shake[0]}px, ${shake[1]}px)`;
+      if (isSafeNumber(ctx.resetTimeOut)) clearTimeout(ctx.resetTimeOut);
+      ctx.resetTimeOut = setTimeout(reset, 2000) as unknown as number;
+    }
+
+    // Sparks
+    const offset = ctx.caret?.getBoundingClientRect();
+    const coords = [
+      offset?.left ?? 0,
+      (offset?.top ?? 0) + (ctx.caret?.offsetHeight ?? 0) / 2,
     ];
-    $(document.body).css(
-      "transform",
-      `translate(${shake[0]}px, ${shake[1]}px)`,
-    );
-    if (isSafeNumber(ctx.resetTimeOut)) clearTimeout(ctx.resetTimeOut);
-    ctx.resetTimeOut = setTimeout(reset, 2000) as unknown as number;
-  }
 
-  // Sparks
-  const offset = ctx.caret?.offset();
-  const coords = [
-    offset?.left ?? 0,
-    (offset?.top ?? 0) + (ctx.caret?.height() ?? 0),
-  ];
-
-  for (
-    let i = Math.round(
-      (particleCreateCount[0] + Math.random() * particleCreateCount[1]) *
-        (extra ? 2 : 1),
-    );
-    i > 0;
-    i--
-  ) {
-    const color = ["2", "4"].includes(Config.monkeyPowerLevel)
-      ? randomColor()
-      : good
-        ? await ThemeColors.get("caret")
-        : await ThemeColors.get("error");
-    ctx.particles.push(
-      createParticle(...(coords as [x: number, y: number]), color),
-    );
-  }
-
-  startRender();
+    for (
+      let i = Math.round(
+        (particleCreateCount[0] + Math.random() * particleCreateCount[1]) *
+          (extra ? 2 : 1),
+      );
+      i > 0;
+      i--
+    ) {
+      const color = ["2", "4"].includes(Config.monkeyPowerLevel)
+        ? randomColor()
+        : good
+          ? await ThemeColors.get("caret")
+          : await ThemeColors.get("error");
+      ctx.particles.push(
+        createParticle(...(coords as [x: number, y: number]), color),
+      );
+    }
+
+    startRender();
+  });
 }
diff --git a/frontend/src/ts/input/handlers/before-insert-text.ts b/frontend/src/ts/input/handlers/before-insert-text.ts
index 34e2269ed095..9ca90677ff63 100644
--- a/frontend/src/ts/input/handlers/before-insert-text.ts
+++ b/frontend/src/ts/input/handlers/before-insert-text.ts
@@ -8,6 +8,7 @@ import { isSpace } from "../../utils/strings";
 import { getInputElementValue } from "../input-element";
 import { isAwaitingNextWord } from "../state";
 import { shouldInsertSpaceCharacter } from "../helpers/validation";
+import * as SlowTimer from "../../states/slow-timer";
 
 /**
  * Handles logic before inserting text into the input element.
@@ -67,14 +68,12 @@ export function onBeforeInsertText(data: string): boolean {
 
   // prevent the word from jumping to the next line if the word is too long
   // this will not work for the first word of each line, but that has a low chance of happening
-  // make sure to only check this when necessary (hide extra letters is off or input is longer than word)
-  // because this check is expensive (causes layout reflows)
-
   const dataIsNotFalsy = data !== null && data !== "";
   const inputIsLongerThanOrEqualToWord =
     TestInput.input.current.length >= TestWords.words.getCurrent().length;
 
   if (
+    !SlowTimer.get() && // don't do this check if slow timer is active
     dataIsNotFalsy &&
     !Config.blindMode &&
     !Config.hideExtraLetters &&
@@ -82,7 +81,16 @@ export function onBeforeInsertText(data: string): boolean {
     (shouldInsertSpaceAsCharacter === true || !dataIsSpace) &&
     Config.mode !== "zen"
   ) {
-    const topAfterAppend = TestUI.getActiveWordTopAfterAppend(data);
+    // make sure to only check this when really necessary
+    // because this check is expensive (causes layout reflows)
+
+    // if there is pending word data, wwe need to account for that
+    const pendingWordData = TestUI.pendingWordData.get(
+      TestState.activeWordIndex,
+    );
+    const topAfterAppend = TestUI.getActiveWordTopWithDifferentData(
+      (pendingWordData ?? TestInput.input.current) + data,
+    );
     const wordJumped = topAfterAppend > TestUI.activeWordTop;
     if (wordJumped) {
       return true;
diff --git a/frontend/src/ts/input/handlers/insert-text.ts b/frontend/src/ts/input/handlers/insert-text.ts
index 598336af93b1..00a0f7258522 100644
--- a/frontend/src/ts/input/handlers/insert-text.ts
+++ b/frontend/src/ts/input/handlers/insert-text.ts
@@ -20,7 +20,6 @@ import {
   isFunboxActiveWithProperty,
 } from "../../test/funbox/list";
 import * as Replay from "../../test/replay";
-import * as MonkeyPower from "../../elements/monkey-power";
 import Config from "../../config";
 import * as KeymapEvent from "../../observables/keymap-event";
 import * as WeakSpot from "../../test/weak-spot";
@@ -164,7 +163,6 @@ export async function onInsertText(options: OnInsertTextParams): Promise<void> {
   // general per keypress updates
   TestInput.setCurrentNotAfk();
   Replay.addReplayEvent(correct ? "correctLetter" : "incorrectLetter", data);
-  void MonkeyPower.addPower(correct);
   TestInput.incrementAccuracy(correct);
   WeakSpot.updateScore(data, correct);
   TestInput.incrementKeypressCount();
diff --git a/frontend/src/ts/pages/friends.ts b/frontend/src/ts/pages/friends.ts
index 15f2eaccdafd..ae3739b4467c 100644
--- a/frontend/src/ts/pages/friends.ts
+++ b/frontend/src/ts/pages/friends.ts
@@ -302,7 +302,7 @@ function buildFriendRow(entry: Friend): HTMLTableRowElement {
         )}</td>
         <td><span aria-label="${formatStreak(
           entry.streak?.maxLength,
-          "max streak",
+          "longest streak",
         )}" data-balloon-pos="up">
           ${formatStreak(entry.streak?.length)} 
         </span></td>
diff --git a/frontend/src/ts/sentry.ts b/frontend/src/ts/sentry.ts
index 30816c632e12..dff4aa6efc5f 100644
--- a/frontend/src/ts/sentry.ts
+++ b/frontend/src/ts/sentry.ts
@@ -26,9 +26,10 @@ export async function activateSentry(): Promise<void> {
     environment: envConfig.isDevelopment ? "development" : "production",
     integrations: [
       Sentry.browserTracingIntegration(),
-      // Sentry.replayIntegration({
-      //   unmask: ["#notificationCenter"],
-      //   block: ["#commandLine .modal .suggestions"],
+      // // Sentry.replayIntegration({
+      // //   unmask: ["#notificationCenter"],
+      // //   block: ["#commandLine .modal .suggestions"],
+      // //   // ignore: ["#wordsInput"],
       // }),
       Sentry.thirdPartyErrorFilterIntegration({
         filterKeys: ["monkeytype-frontend"],
diff --git a/frontend/src/ts/test/live-acc.ts b/frontend/src/ts/test/live-acc.ts
index 60e6527b7dfa..35c65626f153 100644
--- a/frontend/src/ts/test/live-acc.ts
+++ b/frontend/src/ts/test/live-acc.ts
@@ -3,6 +3,7 @@ import * as TestState from "../test/test-state";
 import * as ConfigEvent from "../observables/config-event";
 import { applyReducedMotion } from "../utils/misc";
 import { animate } from "animejs";
+import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 
 const textEl = document.querySelector(
   "#liveStatsTextBottom .liveAcc",
@@ -10,17 +11,21 @@ const textEl = document.querySelector(
 const miniEl = document.querySelector("#liveStatsMini .acc") as Element;
 
 export function update(acc: number): void {
-  let number = Math.floor(acc);
-  if (Config.blindMode) {
-    number = 100;
-  }
-  miniEl.innerHTML = number + "%";
-  textEl.innerHTML = number + "%";
+  requestDebouncedAnimationFrame("live-acc.update", () => {
+    let number = Math.floor(acc);
+    if (Config.blindMode) {
+      number = 100;
+    }
+    miniEl.innerHTML = number + "%";
+    textEl.innerHTML = number + "%";
+  });
 }
 
 export function reset(): void {
-  miniEl.innerHTML = "100%";
-  textEl.innerHTML = "100%";
+  requestDebouncedAnimationFrame("live-acc.reset", () => {
+    miniEl.innerHTML = "100%";
+    textEl.innerHTML = "100%";
+  });
 }
 
 let state = false;
@@ -29,39 +34,43 @@ export function show(): void {
   if (Config.liveAccStyle === "off") return;
   if (!TestState.isActive) return;
   if (state) return;
-  if (Config.liveAccStyle === "mini") {
-    miniEl.classList.remove("hidden");
-    animate(miniEl, {
-      opacity: [0, 1],
-      duration: applyReducedMotion(125),
-    });
-  } else {
-    textEl.classList.remove("hidden");
-    animate(textEl, {
-      opacity: [0, 1],
-      duration: applyReducedMotion(125),
-    });
-  }
-  state = true;
+  requestDebouncedAnimationFrame("live-acc.show", () => {
+    if (Config.liveAccStyle === "mini") {
+      miniEl.classList.remove("hidden");
+      animate(miniEl, {
+        opacity: [0, 1],
+        duration: applyReducedMotion(125),
+      });
+    } else {
+      textEl.classList.remove("hidden");
+      animate(textEl, {
+        opacity: [0, 1],
+        duration: applyReducedMotion(125),
+      });
+    }
+    state = true;
+  });
 }
 
 export function hide(): void {
   if (!state) return;
-  animate(textEl, {
-    opacity: [1, 0],
-    duration: applyReducedMotion(125),
-    onComplete: () => {
-      textEl.classList.add("hidden");
-    },
-  });
-  animate(miniEl, {
-    opacity: [1, 0],
-    duration: applyReducedMotion(125),
-    onComplete: () => {
-      miniEl.classList.add("hidden");
-    },
+  requestDebouncedAnimationFrame("live-acc.hide", () => {
+    animate(textEl, {
+      opacity: [1, 0],
+      duration: applyReducedMotion(125),
+      onComplete: () => {
+        textEl.classList.add("hidden");
+      },
+    });
+    animate(miniEl, {
+      opacity: [1, 0],
+      duration: applyReducedMotion(125),
+      onComplete: () => {
+        miniEl.classList.add("hidden");
+      },
+    });
+    state = false;
   });
-  state = false;
 }
 
 ConfigEvent.subscribe((eventKey, eventValue) => {
diff --git a/frontend/src/ts/test/live-burst.ts b/frontend/src/ts/test/live-burst.ts
index 3b808847a30b..8a683f399c89 100644
--- a/frontend/src/ts/test/live-burst.ts
+++ b/frontend/src/ts/test/live-burst.ts
@@ -4,6 +4,7 @@ import * as ConfigEvent from "../observables/config-event";
 import Format from "../utils/format";
 import { applyReducedMotion } from "../utils/misc";
 import { animate } from "animejs";
+import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 
 const textEl = document.querySelector(
   "#liveStatsTextBottom .liveBurst",
@@ -11,14 +12,18 @@ const textEl = document.querySelector(
 const miniEl = document.querySelector("#liveStatsMini .burst") as Element;
 
 export function reset(): void {
-  textEl.innerHTML = "0";
-  miniEl.innerHTML = "0";
+  requestDebouncedAnimationFrame("live-burst.reset", () => {
+    textEl.innerHTML = "0";
+    miniEl.innerHTML = "0";
+  });
 }
 
 export async function update(burst: number): Promise<void> {
-  const burstText = Format.typingSpeed(burst, { showDecimalPlaces: false });
-  miniEl.innerHTML = burstText;
-  textEl.innerHTML = burstText;
+  requestDebouncedAnimationFrame("live-burst.update", () => {
+    const burstText = Format.typingSpeed(burst, { showDecimalPlaces: false });
+    miniEl.innerHTML = burstText;
+    textEl.innerHTML = burstText;
+  });
 }
 
 let state = false;
@@ -27,39 +32,43 @@ export function show(): void {
   if (Config.liveBurstStyle === "off") return;
   if (!TestState.isActive) return;
   if (state) return;
-  if (Config.liveBurstStyle === "mini") {
-    miniEl.classList.remove("hidden");
-    animate(miniEl, {
-      opacity: [0, 1],
-      duration: applyReducedMotion(125),
-    });
-  } else {
-    textEl.classList.remove("hidden");
-    animate(textEl, {
-      opacity: [0, 1],
-      duration: applyReducedMotion(125),
-    });
-  }
-  state = true;
+  requestDebouncedAnimationFrame("live-burst.show", () => {
+    if (Config.liveBurstStyle === "mini") {
+      miniEl.classList.remove("hidden");
+      animate(miniEl, {
+        opacity: [0, 1],
+        duration: applyReducedMotion(125),
+      });
+    } else {
+      textEl.classList.remove("hidden");
+      animate(textEl, {
+        opacity: [0, 1],
+        duration: applyReducedMotion(125),
+      });
+    }
+    state = true;
+  });
 }
 
 export function hide(): void {
   if (!state) return;
-  animate(textEl, {
-    opacity: [1, 0],
-    duration: applyReducedMotion(125),
-    onComplete: () => {
-      textEl.classList.add("hidden");
-    },
-  });
-  animate(miniEl, {
-    opacity: [1, 0],
-    duration: applyReducedMotion(125),
-    onComplete: () => {
-      miniEl.classList.add("hidden");
-    },
+  requestDebouncedAnimationFrame("live-burst.hide", () => {
+    animate(textEl, {
+      opacity: [1, 0],
+      duration: applyReducedMotion(125),
+      onComplete: () => {
+        textEl.classList.add("hidden");
+      },
+    });
+    animate(miniEl, {
+      opacity: [1, 0],
+      duration: applyReducedMotion(125),
+      onComplete: () => {
+        miniEl.classList.add("hidden");
+      },
+    });
+    state = false;
   });
-  state = false;
 }
 
 ConfigEvent.subscribe((eventKey, eventValue) => {
diff --git a/frontend/src/ts/test/live-speed.ts b/frontend/src/ts/test/live-speed.ts
index d5fe1e812e74..10c5addf8d2b 100644
--- a/frontend/src/ts/test/live-speed.ts
+++ b/frontend/src/ts/test/live-speed.ts
@@ -3,6 +3,7 @@ import * as TestState from "./test-state";
 import * as ConfigEvent from "../observables/config-event";
 import Format from "../utils/format";
 import { applyReducedMotion } from "../utils/misc";
+import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import { animate } from "animejs";
 
 const textElement = document.querySelector(
@@ -11,18 +12,22 @@ const textElement = document.querySelector(
 const miniElement = document.querySelector("#liveStatsMini .speed") as Element;
 
 export function reset(): void {
-  textElement.innerHTML = "0";
-  miniElement.innerHTML = "0";
+  requestDebouncedAnimationFrame("live-speed.reset", () => {
+    textElement.innerHTML = "0";
+    miniElement.innerHTML = "0";
+  });
 }
 
 export function update(wpm: number, raw: number): void {
-  let number = wpm;
-  if (Config.blindMode) {
-    number = raw;
-  }
-  const numberText = Format.typingSpeed(number, { showDecimalPlaces: false });
-  textElement.innerHTML = numberText;
-  miniElement.innerHTML = numberText;
+  requestDebouncedAnimationFrame("live-speed.update", () => {
+    let number = wpm;
+    if (Config.blindMode) {
+      number = raw;
+    }
+    const numberText = Format.typingSpeed(number, { showDecimalPlaces: false });
+    textElement.innerHTML = numberText;
+    miniElement.innerHTML = numberText;
+  });
 }
 
 let state = false;
@@ -31,39 +36,43 @@ export function show(): void {
   if (Config.liveSpeedStyle === "off") return;
   if (!TestState.isActive) return;
   if (state) return;
-  if (Config.liveSpeedStyle === "mini") {
-    miniElement.classList.remove("hidden");
+  requestDebouncedAnimationFrame("live-speed.show", () => {
+    if (Config.liveSpeedStyle === "mini") {
+      miniElement.classList.remove("hidden");
+      animate(miniElement, {
+        opacity: [0, 1],
+        duration: applyReducedMotion(125),
+      });
+    } else {
+      textElement.classList.remove("hidden");
+      animate(textElement, {
+        opacity: [0, 1],
+        duration: applyReducedMotion(125),
+      });
+    }
+    state = true;
+  });
+}
+
+export function hide(): void {
+  if (!state) return;
+  requestDebouncedAnimationFrame("live-speed.hide", () => {
     animate(miniElement, {
-      opacity: [0, 1],
+      opacity: [1, 0],
       duration: applyReducedMotion(125),
+      onComplete: () => {
+        miniElement.classList.add("hidden");
+      },
     });
-  } else {
-    textElement.classList.remove("hidden");
     animate(textElement, {
-      opacity: [0, 1],
+      opacity: [1, 0],
       duration: applyReducedMotion(125),
+      onComplete: () => {
+        textElement.classList.add("hidden");
+      },
     });
-  }
-  state = true;
-}
-
-export function hide(): void {
-  if (!state) return;
-  animate(miniElement, {
-    opacity: [1, 0],
-    duration: applyReducedMotion(125),
-    onComplete: () => {
-      miniElement.classList.add("hidden");
-    },
-  });
-  animate(textElement, {
-    opacity: [1, 0],
-    duration: applyReducedMotion(125),
-    onComplete: () => {
-      textElement.classList.add("hidden");
-    },
+    state = false;
   });
-  state = false;
 }
 
 ConfigEvent.subscribe((eventKey, eventValue) => {
diff --git a/frontend/src/ts/test/monkey.ts b/frontend/src/ts/test/monkey.ts
index 084c4c7aff6e..82614317300f 100644
--- a/frontend/src/ts/test/monkey.ts
+++ b/frontend/src/ts/test/monkey.ts
@@ -5,12 +5,15 @@ import * as TestState from "../test/test-state";
 import * as KeyConverter from "../utils/key-converter";
 import { animate } from "animejs";
 
+const monkeyEl = document.querySelector("#monkey") as HTMLElement;
+const monkeyFastEl = document.querySelector("#monkey .fast") as HTMLElement;
+
 ConfigEvent.subscribe((eventKey) => {
   if (eventKey === "monkey" && TestState.isActive) {
     if (Config.monkey) {
-      $("#monkey").removeClass("hidden");
+      monkeyEl.classList.remove("hidden");
     } else {
-      $("#monkey").addClass("hidden");
+      monkeyEl.classList.add("hidden");
     }
   }
 });
@@ -28,17 +31,17 @@ const middleKeysState = { left: false, right: false, last: "right" };
 // 11 both hands down
 
 const elements = {
-  "00": document.querySelector("#monkey .up"),
-  "01": document.querySelector("#monkey .right"),
-  "10": document.querySelector("#monkey .left"),
-  "11": document.querySelector("#monkey .both"),
+  "00": monkeyEl.querySelector(".up"),
+  "01": monkeyEl.querySelector(".right"),
+  "10": monkeyEl.querySelector(".left"),
+  "11": monkeyEl.querySelector(".both"),
 };
 
 const elementsFast = {
-  "00": document.querySelector("#monkey .fast .up"),
-  "01": document.querySelector("#monkey .fast .right"),
-  "10": document.querySelector("#monkey .fast .left"),
-  "11": document.querySelector("#monkey .fast .both"),
+  "00": monkeyFastEl.querySelector(".up"),
+  "01": monkeyFastEl.querySelector(".right"),
+  "10": monkeyFastEl.querySelector(".left"),
+  "11": monkeyFastEl.querySelector(".both"),
 };
 
 function toBit(b: boolean): "1" | "0" {
@@ -47,7 +50,7 @@ function toBit(b: boolean): "1" | "0" {
 
 function update(): void {
   if (!Config.monkey) return;
-  if (!document.querySelector("#monkey")?.classList.contains("hidden")) {
+  if (!monkeyEl?.classList.contains("hidden")) {
     (Object.keys(elements) as (keyof typeof elements)[]).forEach((key) => {
       elements[key]?.classList.add("hidden");
     });
@@ -65,13 +68,13 @@ function update(): void {
 export function updateFastOpacity(num: number): void {
   if (!Config.monkey) return;
   const opacity = mapRange(num, 130, 180, 0, 1);
-  animate("#monkey .fast", {
+  animate(monkeyFastEl, {
     opacity: opacity,
     duration: 1000,
   });
   let animDuration = mapRange(num, 130, 180, 0.25, 0.01);
   if (animDuration === 0.25) animDuration = 0;
-  $("#monkey").css({ animationDuration: animDuration + "s" });
+  monkeyEl.style.animationDuration = animDuration + "s";
 }
 
 export function type(event: JQuery.KeyDownEvent | KeyboardEvent): void {
@@ -141,20 +144,21 @@ export function stop(event: JQuery.KeyUpEvent | KeyboardEvent): void {
 
 export function show(): void {
   if (!Config.monkey) return;
-  $("#monkey").removeClass("hidden");
-  animate("#monkey", {
+  monkeyEl.classList.remove("hidden");
+  animate(monkeyEl, {
     opacity: [0, 1],
     duration: 125,
   });
 }
 
 export function hide(): void {
-  animate("#monkey", {
+  animate(monkeyEl, {
     opacity: [1, 0],
     duration: 125,
     onComplete: () => {
-      $("#monkey").addClass("hidden").css({ animationDuration: "0s" });
-      $("#monkey .fast").css("opacity", 0);
+      monkeyEl.classList.add("hidden");
+      monkeyEl.style.animationDuration = "0s";
+      monkeyFastEl.style.opacity = "0";
     },
   });
 }
diff --git a/frontend/src/ts/test/replay.ts b/frontend/src/ts/test/replay.ts
index 126155108f17..4aa3cc104701 100644
--- a/frontend/src/ts/test/replay.ts
+++ b/frontend/src/ts/test/replay.ts
@@ -219,11 +219,6 @@ function toggleReplayDisplay(): void {
 }
 
 function startReplayRecording(): void {
-  if (!$("#resultReplay").stop(true, true).hasClass("hidden")) {
-    //hide replay display if user left it open
-    toggleReplayDisplay();
-  }
-  $("#replayStats").text("");
   replayData = [];
   replayStartTime = performance.now();
   replayRecording = true;
diff --git a/frontend/src/ts/test/result.ts b/frontend/src/ts/test/result.ts
index 0ff1f752ddb6..6c8b20fc14f5 100644
--- a/frontend/src/ts/test/result.ts
+++ b/frontend/src/ts/test/result.ts
@@ -984,6 +984,9 @@ export async function update(
   hideCrown();
   $("#resultWordsHistory .words").empty();
   $("#result #resultWordsHistory").addClass("hidden");
+  $("#result #replayStats").text("");
+  $("#result #resultReplay").addClass("hidden");
+  $("#result #replayWords").empty();
   $("#retrySavingResultButton").addClass("hidden");
   $(".pageTest #result #rateQuoteButton .icon")
     .removeClass("fas")
@@ -1072,43 +1075,40 @@ export async function update(
 
   TestConfig.hide();
 
-  void Misc.swapElements(
-    document.querySelector("#typingTest") as HTMLElement,
-    document.querySelector("#result") as HTMLElement,
-    250,
-    async () => {
-      const result = document.querySelector<HTMLElement>("#result");
-      result?.focus({
-        preventScroll: true,
-      });
-      Misc.scrollToCenterOrTop(result);
-      void AdController.renderResult();
-      TestUI.setResultCalculating(false);
-      $("#words").empty();
-      ChartController.result.resize();
-    },
-    async () => {
-      Focus.set(false);
-
-      const canQuickRestart = canQuickRestartFn(
-        Config.mode,
-        Config.words,
-        Config.time,
-        CustomText.getData(),
-        CustomTextState.isCustomTextLong() ?? false,
-      );
+  Focus.set(false);
 
-      if (
-        Config.alwaysShowWordsHistory &&
-        canQuickRestart &&
-        !GlarsesMode.get()
-      ) {
-        TestUI.toggleResultWords(true);
-      }
-      AdController.updateFooterAndVerticalAds(true);
-      void Funbox.clear();
-    },
+  const canQuickRestart = canQuickRestartFn(
+    Config.mode,
+    Config.words,
+    Config.time,
+    CustomText.getData(),
+    CustomTextState.isCustomTextLong() ?? false,
   );
+
+  if (Config.alwaysShowWordsHistory && canQuickRestart && !GlarsesMode.get()) {
+    TestUI.toggleResultWords(true);
+  }
+  AdController.updateFooterAndVerticalAds(true);
+  void Funbox.clear();
+
+  $(".pageTest .loading").addClass("hidden");
+  $("#result").removeClass("hidden");
+
+  const resultEl = document.querySelector<HTMLElement>("#result");
+  resultEl?.focus({
+    preventScroll: true,
+  });
+
+  await Misc.promiseAnimate("#result", {
+    opacity: [0, 1],
+    duration: Misc.applyReducedMotion(125),
+  });
+
+  Misc.scrollToCenterOrTop(resultEl);
+  void AdController.renderResult();
+  TestUI.setResultCalculating(false);
+  $("#words").empty();
+  ChartController.result.resize();
 }
 
 const resultChartDataVisibility = new LocalStorageWithSchema({
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index 832df666b49d..61368477b4c4 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@@ -930,11 +930,23 @@ export async function finish(difficultyFailed = false): Promise<void> {
   const now = performance.now();
   TestStats.setEnd(now);
 
+  // fade out the test and show loading
+  // because the css animation has a delay,
+  // if the test calculation is fast the loading will not show
+  await Misc.promiseAnimate("#typingTest", {
+    opacity: 0,
+    duration: Misc.applyReducedMotion(125),
+  });
+  $(".pageTest #typingTest").addClass("hidden");
+  $(".pageTest .loading").removeClass("hidden");
+  await Misc.sleep(0); //allow ui update
+
   if (TestState.isRepeated && Config.mode === "quote") {
     TestState.setRepeated(false);
   }
 
-  await Misc.sleep(1); //this is needed to make sure the last keypress is registered
+  // in case the tests ends with a keypress (not a word submission)
+  // we need to push the current input to history
   if (TestInput.input.current.length !== 0) {
     TestInput.input.pushHistory();
     TestInput.corrected.pushHistory();
diff --git a/frontend/src/ts/test/test-timer.ts b/frontend/src/ts/test/test-timer.ts
index e0acebbd408b..823f4a136e2d 100644
--- a/frontend/src/ts/test/test-timer.ts
+++ b/frontend/src/ts/test/test-timer.ts
@@ -4,7 +4,7 @@
 import Config, * as UpdateConfig from "../config";
 import * as CustomText from "./custom-text";
 import * as TimerProgress from "./timer-progress";
-import * as LiveWpm from "./live-speed";
+import * as LiveSpeed from "./live-speed";
 import * as TestStats from "./test-stats";
 import * as TestInput from "./test-input";
 import * as Monkey from "./monkey";
@@ -19,6 +19,24 @@ import * as LayoutfluidFunboxTimer from "../test/funbox/layoutfluid-funbox-timer
 import { KeymapLayout, Layout } from "@monkeytype/schemas/configs";
 import * as SoundController from "../controllers/sound-controller";
 import { clearLowFpsMode, setLowFpsMode } from "../anim";
+import { createTimer } from "animejs";
+import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
+
+let lastLoop = 0;
+const newTimer = createTimer({
+  duration: 1000,
+  loop: true,
+  autoplay: false,
+  onBegin: () => {
+    lastLoop = performance.now();
+  },
+  onLoop: () => {
+    const drift = Math.abs(1000 - (performance.now() - lastLoop));
+    lastLoop = performance.now();
+    checkIfTimerIsSlow(drift);
+    timerStep();
+  },
+});
 
 type TimerStats = {
   dateNow: number;
@@ -45,6 +63,7 @@ export function enableTimerDebug(): void {
 export function clear(): void {
   clearLowFpsMode();
   Time.set(0);
+  newTimer.reset();
   if (timer !== null) clearTimeout(timer);
 }
 
@@ -58,24 +77,10 @@ function premid(): void {
   if (timerDebug) console.timeEnd("premid");
 }
 
-function updateTimer(): void {
-  if (timerDebug) console.time("timer progress update");
-  if (
-    Config.mode === "time" ||
-    (Config.mode === "custom" && CustomText.getLimitMode() === "time")
-  ) {
-    TimerProgress.update();
-  }
-  if (timerDebug) console.timeEnd("timer progress update");
-}
-
 function calculateWpmRaw(): { wpm: number; raw: number } {
   if (timerDebug) console.time("calculate wpm and raw");
   const wpmAndRaw = TestStats.calculateWpmAndRaw();
   if (timerDebug) console.timeEnd("calculate wpm and raw");
-  if (timerDebug) console.time("update live wpm");
-  LiveWpm.update(wpmAndRaw.wpm, wpmAndRaw.raw);
-  if (timerDebug) console.timeEnd("update live wpm");
   if (timerDebug) console.time("push to history");
   TestInput.pushToWpmHistory(wpmAndRaw.wpm);
   TestInput.pushToRawHistory(wpmAndRaw.raw);
@@ -211,24 +216,77 @@ export function getTimerStats(): TimerStats[] {
   return timerStats;
 }
 
-async function timerStep(): Promise<void> {
+function timerStep(): void {
   if (timerDebug) console.time("timer step -----------------------------");
+
+  //calc
   Time.increment();
-  premid();
-  updateTimer();
-  if (Config.playTimeWarning !== "off") playTimeWarning();
   const wpmAndRaw = calculateWpmRaw();
   const acc = calculateAcc();
-  monkey(wpmAndRaw);
+
+  //ui updates
+  requestDebouncedAnimationFrame("test-timer.timerStep", () => {
+    premid();
+    monkey(wpmAndRaw);
+  });
+
+  // already using raf
+  TimerProgress.update();
+  LiveSpeed.update(wpmAndRaw.wpm, wpmAndRaw.raw);
+
+  //logic
+  if (Config.playTimeWarning !== "off") playTimeWarning();
   layoutfluid();
   const failed = checkIfFailed(wpmAndRaw, acc);
   if (!failed) checkIfTimeIsUp();
+
   if (timerDebug) console.timeEnd("timer step -----------------------------");
 }
 
+function checkIfTimerIsSlow(drift: number): void {
+  if (!slowTimerFailEnabled) return;
+  if (
+    (Config.mode === "time" && Config.time < 130 && Config.time > 0) ||
+    (Config.mode === "words" && Config.words < 250 && Config.words > 0)
+  ) {
+    if (drift > 125) {
+      //slow timer
+      SlowTimer.set();
+      setLowFpsMode();
+    }
+    if (drift > 250) {
+      slowTimerCount++;
+    }
+
+    if (drift > 500 || slowTimerCount > 5) {
+      //slow timer
+
+      Notifications.add(
+        'This could be caused by "efficiency mode" on Microsoft Edge.',
+      );
+
+      Notifications.add(
+        "Stopping the test due to bad performance. This would cause test calculations to be incorrect. If this happens a lot, please report this.",
+        -1,
+      );
+
+      TimerEvent.dispatch("fail", "slow timer");
+    }
+  }
+}
+
 export async function start(): Promise<void> {
   SlowTimer.clear();
   slowTimerCount = 0;
+  void _startNew();
+  // void _startOld();
+}
+
+async function _startNew(): Promise<void> {
+  newTimer.play();
+}
+
+async function _startOld(): Promise<void> {
   timerStats = [];
   expected = TestStats.start + interval;
   (function loop(): void {
@@ -239,38 +297,9 @@ export async function start(): Promise<void> {
       expected: expected,
       nextDelay: delay,
     });
-    if (slowTimerFailEnabled) {
-      if (
-        (Config.mode === "time" && Config.time < 130 && Config.time > 0) ||
-        (Config.mode === "words" && Config.words < 250 && Config.words > 0)
-      ) {
-        if (delay < interval / 2) {
-          //slow timer
-          SlowTimer.set();
-          setLowFpsMode();
-        }
-        if (delay < interval / 10) {
-          slowTimerCount++;
-          if (slowTimerCount > 5) {
-            //slow timer
-
-            Notifications.add(
-              'This could be caused by "efficiency mode" on Microsoft Edge.',
-            );
-
-            Notifications.add(
-              "Stopping the test due to bad performance. This would cause test calculations to be incorrect. If this happens a lot, please report this.",
-              -1,
-            );
-
-            TimerEvent.dispatch("fail", "slow timer");
-          }
-        }
-      }
-    }
+    const drift = Math.abs(interval - delay);
+    checkIfTimerIsSlow(drift);
     timer = setTimeout(function () {
-      // time++;
-
       if (!TestState.isActive) {
         if (timer !== null) clearTimeout(timer);
         SlowTimer.clear();
@@ -278,7 +307,7 @@ export async function start(): Promise<void> {
         return;
       }
 
-      void timerStep();
+      timerStep();
 
       expected += interval;
       loop();
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 972ece968389..f8050950ac44 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -44,6 +44,8 @@ import {
   getInputElement,
   isInputElementFocused,
 } from "../input/input-element";
+import * as MonkeyPower from "../elements/monkey-power";
+import * as SlowTimer from "../states/slow-timer";
 
 const debouncedZipfCheck = debounce(250, async () => {
   const supports = await JSONData.checkIfLanguageSupportsZipf(Config.language);
@@ -105,7 +107,12 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => {
 
   if (eventValue === undefined) return;
   if (eventKey === "highlightMode") {
-    if (ActivePage.get() === "test") updateActiveElement();
+    if (ActivePage.get() === "test")
+      void updateWordLetters({
+        input: TestInput.input.current,
+        wordIndex: TestState.activeWordIndex,
+        compositionData: CompositionState.getData(),
+      });
   }
 
   if (
@@ -137,6 +144,11 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => {
   if (eventKey === "burstHeatmap") void applyBurstHeatmap();
 });
 
+const wordsEl = document.querySelector(".pageTest #words") as HTMLElement;
+const wordsWrapperEl = document.querySelector(
+  ".pageTest #wordsWrapper",
+) as HTMLElement;
+
 export let activeWordTop = 0;
 export let lineTransition = false;
 export let currentTestLine = 0;
@@ -170,10 +182,9 @@ export function focusWords(force = false): void {
 
 export function keepWordsInputInTheCenter(force = false): void {
   const wordsInput = getInputElement();
-  const wordsWrapper = document.querySelector<HTMLElement>("#wordsWrapper");
-  if (wordsInput === null || wordsWrapper === null) return;
+  if (wordsInput === null || wordsWrapperEl === null) return;
 
-  const wordsWrapperHeight = wordsWrapper.offsetHeight;
+  const wordsWrapperHeight = wordsWrapperEl.offsetHeight;
   const windowHeight = window.innerHeight;
 
   // dont do anything if the wrapper can fit on screen
@@ -191,8 +202,8 @@ export function keepWordsInputInTheCenter(force = false): void {
 }
 
 export function getWordElement(index: number): HTMLElement | null {
-  const el = document.querySelector<HTMLElement>(
-    `#words .word[data-wordindex='${index}']`,
+  const el = wordsEl.querySelector<HTMLElement>(
+    `.word[data-wordindex='${index}']`,
   );
   return el;
 }
@@ -202,34 +213,54 @@ export function getActiveWordElement(): HTMLElement | null {
 }
 
 export function updateActiveElement(
-  backspace?: boolean,
-  initial = false,
+  options:
+    | { direction: "forward" | "back"; initial?: undefined }
+    | { direction?: undefined; initial: true },
 ): void {
-  const active = document.querySelector("#words .active");
-  if (!backspace) {
-    active?.classList.add("typed");
-  }
-  if (Config.mode === "zen" && backspace) {
-    active?.remove();
-  } else if (active !== null && !initial) {
-    active.classList.remove("active");
-  }
-  const newActiveWord = getActiveWordElement();
-  if (newActiveWord === null) {
-    throw new Error("activeWord is null - can't update active element");
-  }
+  requestDebouncedAnimationFrame("test-ui.updateActiveElement", () => {
+    const { direction, initial } = options;
+
+    let previousActiveWordTop: number | null = null;
+    if (initial === undefined) {
+      const previousActiveWord = wordsEl.querySelector(
+        ".active",
+      ) as HTMLElement;
+      if (direction === "forward") {
+        previousActiveWord.classList.add("typed");
+      } else if (direction === "back") {
+        if (Config.mode === "zen") {
+          previousActiveWord.remove();
+        }
+      }
+      previousActiveWord.classList.remove("active");
+      previousActiveWordTop = previousActiveWord.offsetTop;
+    }
 
-  newActiveWord.classList.add("active");
-  newActiveWord.classList.remove("error");
-  newActiveWord.classList.remove("typed");
+    const newActiveWord = getActiveWordElement();
+    if (newActiveWord === null) {
+      throw new Error("activeWord is null - can't update active element");
+    }
 
-  activeWordTop = newActiveWord.offsetTop;
+    newActiveWord.classList.add("active");
+    newActiveWord.classList.remove("error");
+    newActiveWord.classList.remove("typed");
 
-  updateWordsInputPosition();
+    activeWordTop = newActiveWord.offsetTop;
+    console.log("activewordtopupdated");
 
-  if (!initial && Config.tapeMode !== "off") {
-    void scrollTape();
-  }
+    updateWordsInputPosition();
+
+    if (!initial && Config.tapeMode !== "off") {
+      void scrollTape();
+    }
+
+    if (!Config.showAllLines && previousActiveWordTop !== null) {
+      const newActiveWordTop = newActiveWord.offsetTop;
+      if (newActiveWordTop > previousActiveWordTop) {
+        void lineJump(previousActiveWordTop);
+      }
+    }
+  });
 }
 
 function createHintsHtml(
@@ -434,47 +465,46 @@ function buildWordHTML(word: string, wordIndex: number): string {
 
 function updateWordWrapperClasses(): void {
   if (Config.tapeMode !== "off") {
-    $("#words").addClass("tape");
-    $("#wordsWrapper").addClass("tape");
+    wordsEl.classList.add("tape");
+    wordsWrapperEl.classList.add("tape");
   } else {
-    $("#words").removeClass("tape");
-    $("#wordsWrapper").removeClass("tape");
+    wordsEl.classList.remove("tape");
+    wordsWrapperEl.classList.remove("tape");
   }
 
   if (Config.blindMode) {
-    $("#words").addClass("blind");
-    $("#wordsWrapper").addClass("blind");
+    wordsEl.classList.add("blind");
+    wordsWrapperEl.classList.add("blind");
   } else {
-    $("#words").removeClass("blind");
-    $("#wordsWrapper").removeClass("blind");
+    wordsEl.classList.remove("blind");
+    wordsWrapperEl.classList.remove("blind");
   }
 
   if (Config.indicateTypos === "below" || Config.indicateTypos === "both") {
-    $("#words").addClass("indicateTyposBelow");
-    $("#wordsWrapper").addClass("indicateTyposBelow");
+    wordsEl.classList.add("indicateTyposBelow");
+    wordsWrapperEl.classList.add("indicateTyposBelow");
   } else {
-    $("#words").removeClass("indicateTyposBelow");
-    $("#wordsWrapper").removeClass("indicateTyposBelow");
+    wordsEl.classList.remove("indicateTyposBelow");
+    wordsWrapperEl.classList.remove("indicateTyposBelow");
   }
 
   if (Config.hideExtraLetters) {
-    $("#words").addClass("hideExtraLetters");
-    $("#wordsWrapper").addClass("hideExtraLetters");
+    wordsEl.classList.add("hideExtraLetters");
+    wordsWrapperEl.classList.add("hideExtraLetters");
   } else {
-    $("#words").removeClass("hideExtraLetters");
-    $("#wordsWrapper").removeClass("hideExtraLetters");
+    wordsEl.classList.remove("hideExtraLetters");
+    wordsWrapperEl.classList.remove("hideExtraLetters");
   }
 
   const existing =
-    $("#words")
-      ?.attr("class")
-      ?.split(/\s+/)
-      ?.filter((it) => !it.startsWith("highlight-")) ?? [];
+    wordsEl?.className
+      .split(/\s+/)
+      .filter((className) => !className.startsWith("highlight-")) ?? [];
   if (Config.highlightMode !== null) {
     existing.push("highlight-" + Config.highlightMode.replaceAll("_", "-"));
   }
 
-  $("#words").attr("class", existing.join(" "));
+  wordsEl.className = existing.join(" ");
 
   updateWordsWidth();
   updateWordsWrapperHeight(true);
@@ -485,9 +515,7 @@ function updateWordWrapperClasses(): void {
 }
 
 export function showWords(): void {
-  const words = $("#words");
-
-  words.empty();
+  wordsEl.innerHTML = "";
 
   if (Config.mode === "zen") {
     appendEmptyWordElement();
@@ -496,10 +524,12 @@ export function showWords(): void {
     for (let i = 0; i < TestWords.words.length; i++) {
       wordsHTML += buildWordHTML(TestWords.words.get(i), i);
     }
-    words.html(wordsHTML);
+    wordsEl.innerHTML = wordsHTML;
   }
 
-  updateActiveElement(undefined, true);
+  updateActiveElement({
+    initial: true,
+  });
   updateWordWrapperClasses();
   PaceCaret.resetCaretPosition();
 }
@@ -507,62 +537,60 @@ export function showWords(): void {
 export function appendEmptyWordElement(
   index = TestInput.input.getHistory().length,
 ): void {
-  $("#words").append(
+  wordsEl.insertAdjacentHTML(
+    "beforeend",
     `<div class='word' data-wordindex='${index}'><letter class='invisible'>_</letter></div>`,
   );
 }
 
 export function updateWordsInputPosition(): void {
-  requestDebouncedAnimationFrame("test-ui.updateWordsInputPosition", () => {
-    if (ActivePage.get() !== "test") return;
-    const isTestRightToLeft = TestState.isDirectionReversed
-      ? !TestState.isLanguageRightToLeft
-      : TestState.isLanguageRightToLeft;
+  if (ActivePage.get() !== "test") return;
+  const isTestRightToLeft = TestState.isDirectionReversed
+    ? !TestState.isLanguageRightToLeft
+    : TestState.isLanguageRightToLeft;
 
-    const el = getInputElement();
-    const wrapperElement = document.querySelector<HTMLElement>("#wordsWrapper");
+  const el = getInputElement();
 
-    if (el === null || wrapperElement === null) return;
+  if (el === null) return;
 
-    const activeWord = getActiveWordElement();
+  const activeWord = getActiveWordElement();
 
-    if (!activeWord) {
-      el.style.top = "0px";
-      el.style.left = "0px";
-      return;
-    }
+  if (!activeWord) {
+    el.style.top = "0px";
+    el.style.left = "0px";
+    return;
+  }
 
-    const letterHeight = convertRemToPixels(Config.fontSize);
-    const targetTop =
-      activeWord.offsetTop + letterHeight / 2 - el.offsetHeight / 2 + 1; //+1 for half of border
+  const letterHeight = convertRemToPixels(Config.fontSize);
+  const targetTop =
+    activeWord.offsetTop + letterHeight / 2 - el.offsetHeight / 2 + 1; //+1 for half of border
 
-    if (Config.tapeMode !== "off") {
-      el.style.maxWidth = `${100 - Config.tapeMargin}%`;
-    } else {
-      el.style.maxWidth = "";
-    }
-    if (activeWord.offsetWidth < letterHeight) {
-      el.style.width = letterHeight + "px";
-    } else {
-      el.style.width = activeWord.offsetWidth + "px";
-    }
+  if (Config.tapeMode !== "off") {
+    el.style.maxWidth = `${100 - Config.tapeMargin}%`;
+  } else {
+    el.style.maxWidth = "";
+  }
+  if (activeWord.offsetWidth < letterHeight) {
+    el.style.width = letterHeight + "px";
+  } else {
+    el.style.width = activeWord.offsetWidth + "px";
+  }
 
-    el.style.top = targetTop + "px";
+  el.style.top = targetTop + "px";
 
-    if (Config.tapeMode !== "off") {
-      el.style.left = `${
-        wrapperElement.offsetWidth * (Config.tapeMargin / 100)
-      }px`;
+  if (Config.tapeMode !== "off") {
+    el.style.left = `${
+      wordsWrapperEl.offsetWidth * (Config.tapeMargin / 100)
+    }px`;
+  } else {
+    if (activeWord.offsetWidth < letterHeight && isTestRightToLeft) {
+      el.style.left = activeWord.offsetLeft - letterHeight + "px";
     } else {
-      if (activeWord.offsetWidth < letterHeight && isTestRightToLeft) {
-        el.style.left = activeWord.offsetLeft - letterHeight + "px";
-      } else {
-        el.style.left = Math.max(0, activeWord.offsetLeft) + "px";
-      }
+      el.style.left = Math.max(0, activeWord.offsetLeft) + "px";
     }
+  }
 
-    keepWordsInputInTheCenter();
-  });
+  keepWordsInputInTheCenter();
 }
 
 let centeringActiveLine: Promise<void> = Promise.resolve();
@@ -598,14 +626,13 @@ export async function centerActiveLine(): Promise<void> {
 export function updateWordsWrapperHeight(force = false): void {
   if (ActivePage.get() !== "test" || TestState.resultVisible) return;
   if (!force && Config.mode !== "custom") return;
-  const wrapperEl = document.getElementById("wordsWrapper") as HTMLElement;
   const outOfFocusEl = document.querySelector(
     ".outOfFocusWarning",
   ) as HTMLElement;
   const activeWordEl = getActiveWordElement();
   if (!activeWordEl) return;
 
-  wrapperEl.classList.remove("hidden");
+  wordsWrapperEl.classList.remove("hidden");
 
   const wordComputedStyle = window.getComputedStyle(activeWordEl);
   const wordMargin =
@@ -622,15 +649,14 @@ export function updateWordsWrapperHeight(force = false): void {
 
   if (showAllLines) {
     //allow the wrapper to grow and shink with the words
-    wrapperEl.style.height = "";
+    wordsWrapperEl.style.height = "";
   } else if (Config.mode === "zen") {
     //zen mode, showAllLines off
-    wrapperEl.style.height = wordHeight * 2 + "px";
+    wordsWrapperEl.style.height = wordHeight * 2 + "px";
   } else {
     if (Config.tapeMode === "off") {
       //tape off, showAllLines off, non-zen mode
-      const wordElements =
-        document.querySelectorAll<HTMLElement>("#words .word");
+      const wordElements = wordsEl.querySelectorAll<HTMLElement>(".word");
       let lines = 0;
       let lastTop = 0;
       let wordIndex = 0;
@@ -650,15 +676,14 @@ export function updateWordsWrapperHeight(force = false): void {
       if (lines < 3) wrapperHeight = wrapperHeight * (3 / lines);
 
       //limit to 3 lines
-      wrapperEl.style.height = wrapperHeight + "px";
+      wordsWrapperEl.style.height = wrapperHeight + "px";
     } else {
       //show 3 lines if tape mode is on and has newlines, otherwise use words height (because of indicate typos: below)
       if (TestWords.hasNewline) {
-        wrapperEl.style.height = wordHeight * 3 + "px";
+        wordsWrapperEl.style.height = wordHeight * 3 + "px";
       } else {
-        const wordsHeight =
-          document.getElementById("words")?.offsetHeight ?? wordHeight;
-        wrapperEl.style.height = wordsHeight + "px";
+        const wordsHeight = wordsEl.offsetHeight ?? wordHeight;
+        wordsWrapperEl.style.height = wordsHeight + "px";
       }
     }
   }
@@ -670,10 +695,6 @@ function updateWordsMargin(): void {
   if (Config.tapeMode !== "off") {
     void scrollTape(true);
   } else {
-    const wordsEl = document.getElementById("words") as HTMLElement;
-
-    $(wordsEl).stop(true, false);
-
     const afterNewlineEls =
       wordsEl.querySelectorAll<HTMLElement>(".afterNewline");
     wordsEl.style.marginLeft = `0`;
@@ -688,170 +709,236 @@ export function addWord(
   word: string,
   wordIndex = TestWords.words.length - 1,
 ): void {
-  $("#words").append(buildWordHTML(word, wordIndex));
+  // if the current active word is the last word, we need to NOT use raf
+  // because other ui parts depend on the word existing
+  if (TestState.activeWordIndex === wordIndex - 1) {
+    wordsEl.insertAdjacentHTML("beforeend", buildWordHTML(word, wordIndex));
+  } else {
+    requestAnimationFrame(async () => {
+      wordsEl.insertAdjacentHTML("beforeend", buildWordHTML(word, wordIndex));
+    });
+  }
+
+  // maybe ill come back to this
+  // requestAnimationFrame(async () => {
+  //   wordsEl.insertAdjacentHTML("beforeend", buildWordHTML(word, wordIndex));
+  //   // in case word addition took a long time and some input happened in the mean time
+  //   // we need to update word letters for that word
+  //   const inputHistory = [
+  //     ...TestInput.input.getHistory(),
+  //     TestInput.input.current,
+  //   ];
+  //   const input = inputHistory[wordIndex];
+  //   if (input !== undefined && input !== "") {
+  //     await updateWordLetters({
+  //       wordIndex,
+  //       input,
+  //       compositionData: CompositionState.getData(),
+  //     });
+  //   }
+  // });
 }
 
 export function flipColors(tf: boolean): void {
   if (tf) {
-    $("#words").addClass("flipped");
+    wordsEl.classList.add("flipped");
   } else {
-    $("#words").removeClass("flipped");
+    wordsEl.classList.remove("flipped");
   }
 }
 
 export function colorful(tc: boolean): void {
   if (tc) {
-    $("#words").addClass("colorfulMode");
+    wordsEl.classList.add("colorfulMode");
   } else {
-    $("#words").removeClass("colorfulMode");
+    wordsEl.classList.remove("colorfulMode");
   }
 }
 
-export async function updateActiveWordLetters(
-  inputOverride?: string,
-): Promise<void> {
-  const input = inputOverride ?? TestInput.input.current;
-  const currentWord = TestWords.words.getCurrent();
-  if (!currentWord && Config.mode !== "zen") return;
-  let ret = "";
-  const activeWord = getActiveWordElement();
-  if (!activeWord) return;
-  const hintIndices: number[][] = [];
-
-  let newlineafter = false;
+// because of the requestAnimationFrame, multiple calls to updateWordLetters
+// can be made before the actual update happens. This map keeps track of the
+// latest input for each word and is used in before-insert-text to
+// make sure the currently typed word will not overflow to the next line
+export let pendingWordData: Map<number, string> = new Map();
+
+export async function updateWordLetters({
+  wordIndex,
+  input,
+  compositionData,
+}: {
+  wordIndex: number;
+  input: string;
+  compositionData: string;
+}): Promise<void> {
+  pendingWordData.set(wordIndex, input);
+  requestDebouncedAnimationFrame(
+    `test-ui.updateWordLetters.${wordIndex}`,
+    async () => {
+      pendingWordData.delete(wordIndex);
+      const currentWord = TestWords.words.get(wordIndex);
+      if (!currentWord && Config.mode !== "zen") return;
+      let ret = "";
+      const wordAtIndex = getWordElement(wordIndex);
+      if (!wordAtIndex) return;
+      const hintIndices: number[][] = [];
+
+      let newlineafter = false;
+
+      if (Config.mode === "zen") {
+        for (const char of input) {
+          if (char === "\t") {
+            ret += `<letter class='tabChar correct' style="opacity: 0"><i class="fas fa-long-arrow-alt-right fa-fw"></i></letter>`;
+          } else if (char === "\n") {
+            newlineafter = true;
+            ret += `<letter class='nlChar correct' style="opacity: 0"><i class="fas fa-level-down-alt fa-rotate-90 fa-fw"></i></letter>`;
+          } else {
+            ret += `<letter class="correct">${char}</letter>`;
+          }
+        }
+        if (input === "" && compositionData === "") {
+          ret += `<letter class='invisible'>_</letter>`;
+        }
 
-  if (Config.mode === "zen") {
-    for (const char of TestInput.input.current) {
-      if (char === "\t") {
-        ret += `<letter class='tabChar correct' style="opacity: 0"><i class="fas fa-long-arrow-alt-right fa-fw"></i></letter>`;
-      } else if (char === "\n") {
-        newlineafter = true;
-        ret += `<letter class='nlChar correct' style="opacity: 0"><i class="fas fa-level-down-alt fa-rotate-90 fa-fw"></i></letter>`;
+        for (const char of compositionData) {
+          ret += `<letter class="dead">${char}</letter>`;
+        }
       } else {
-        ret += `<letter class="correct">${char}</letter>`;
-      }
-    }
-    if (TestInput.input.current === "" && CompositionState.getData() === "") {
-      ret += `<letter class='invisible'>_</letter>`;
-    }
+        const funbox = findSingleActiveFunboxWithFunction("getWordHtml");
+
+        const inputChars = Strings.splitIntoCharacters(input);
+        const currentWordChars = Strings.splitIntoCharacters(currentWord);
+        for (let i = 0; i < inputChars.length; i++) {
+          const charCorrect = currentWordChars[i] === inputChars[i];
+
+          let currentLetter = currentWordChars[i] as string;
+          let tabChar = "";
+          let nlChar = "";
+          if (funbox) {
+            const cl = funbox.functions.getWordHtml(currentLetter);
+            if (cl !== "") {
+              currentLetter = cl;
+            }
+          } else if (currentLetter === "\t") {
+            tabChar = "tabChar";
+            currentLetter = `<i class="fas fa-long-arrow-alt-right fa-fw"></i>`;
+          } else if (currentLetter === "\n") {
+            nlChar = "nlChar";
+            currentLetter = `<i class="fas fa-level-down-alt fa-rotate-90 fa-fw"></i>`;
+          }
 
-    const compositionData = CompositionState.getData();
-    for (const char of compositionData) {
-      ret += `<letter class="dead">${char}</letter>`;
-    }
-  } else {
-    const funbox = findSingleActiveFunboxWithFunction("getWordHtml");
-
-    const inputChars = Strings.splitIntoCharacters(input);
-    const currentWordChars = Strings.splitIntoCharacters(currentWord);
-    for (let i = 0; i < inputChars.length; i++) {
-      const charCorrect = currentWordChars[i] === inputChars[i];
-
-      let currentLetter = currentWordChars[i] as string;
-      let tabChar = "";
-      let nlChar = "";
-      if (funbox) {
-        const cl = funbox.functions.getWordHtml(currentLetter);
-        if (cl !== "") {
-          currentLetter = cl;
+          if (charCorrect) {
+            ret += `<letter class="correct ${tabChar}${nlChar}">${currentLetter}</letter>`;
+          } else if (currentLetter === undefined) {
+            let letter = inputChars[i];
+            if (letter === " ") {
+              letter = "_";
+            } else if (letter === "\t") {
+              letter = "<i class='fas fa-long-arrow-alt-right fa-fw'></i>";
+            } else if (letter === "\n") {
+              letter =
+                "<i class='fas fa-level-down-alt fa-rotate-90 fa-fw'></i>";
+            }
+            ret += `<letter class="incorrect extra ${tabChar}${nlChar}">${letter}</letter>`;
+          } else {
+            ret +=
+              `<letter class="incorrect ${tabChar}${nlChar}">` +
+              (Config.indicateTypos === "replace" ||
+              Config.indicateTypos === "both"
+                ? inputChars[i] === " "
+                  ? "_"
+                  : inputChars[i]
+                : currentLetter) +
+              "</letter>";
+            if (
+              Config.indicateTypos === "below" ||
+              Config.indicateTypos === "both"
+            ) {
+              const lastBlock = hintIndices[hintIndices.length - 1];
+              if (lastBlock && lastBlock[lastBlock.length - 1] === i - 1)
+                lastBlock.push(i);
+              else hintIndices.push([i]);
+            }
+          }
         }
-      } else if (currentLetter === "\t") {
-        tabChar = "tabChar";
-        currentLetter = `<i class="fas fa-long-arrow-alt-right fa-fw"></i>`;
-      } else if (currentLetter === "\n") {
-        nlChar = "nlChar";
-        currentLetter = `<i class="fas fa-level-down-alt fa-rotate-90 fa-fw"></i>`;
-      }
 
-      if (charCorrect) {
-        ret += `<letter class="correct ${tabChar}${nlChar}">${currentLetter}</letter>`;
-      } else if (currentLetter === undefined) {
-        let letter = inputChars[i];
-        if (letter === " ") {
-          letter = "_";
-        } else if (letter === "\t") {
-          letter = "<i class='fas fa-long-arrow-alt-right fa-fw'></i>";
-        } else if (letter === "\n") {
-          letter = "<i class='fas fa-level-down-alt fa-rotate-90 fa-fw'></i>";
+        for (let i = 0; i < compositionData.length; i++) {
+          const compositionChar = compositionData[i];
+          let charToShow = currentWordChars[input.length + i];
+
+          if (charToShow === undefined) {
+            charToShow = compositionChar;
+          }
+
+          if (Config.indicateTypos === "replace") {
+            charToShow = compositionChar === " " ? "_" : compositionChar;
+          }
+
+          ret += `<letter class="dead">${charToShow}</letter>`;
         }
-        ret += `<letter class="incorrect extra ${tabChar}${nlChar}">${letter}</letter>`;
-      } else {
-        ret +=
-          `<letter class="incorrect ${tabChar}${nlChar}">` +
-          (Config.indicateTypos === "replace" || Config.indicateTypos === "both"
-            ? inputChars[i] === " "
-              ? "_"
-              : inputChars[i]
-            : currentLetter) +
-          "</letter>";
-        if (
-          Config.indicateTypos === "below" ||
-          Config.indicateTypos === "both"
+
+        for (
+          let i = inputChars.length + compositionData.length;
+          i < currentWordChars.length;
+          i++
         ) {
-          const lastBlock = hintIndices[hintIndices.length - 1];
-          if (lastBlock && lastBlock[lastBlock.length - 1] === i - 1)
-            lastBlock.push(i);
-          else hintIndices.push([i]);
+          const currentLetter = currentWordChars[i];
+          if (funbox?.functions?.getWordHtml) {
+            ret += funbox.functions.getWordHtml(currentLetter as string, true);
+          } else if (currentLetter === "\t") {
+            ret += `<letter class='tabChar'><i class="fas fa-long-arrow-alt-right fa-fw"></i></letter>`;
+          } else if (currentLetter === "\n") {
+            ret += `<letter class='nlChar'><i class="fas fa-level-down-alt fa-rotate-90 fa-fw"></i></letter>`;
+          } else {
+            ret += `<letter>` + currentLetter + "</letter>";
+          }
         }
       }
-    }
 
-    const compositionData = CompositionState.getData();
-    for (let i = 0; i < compositionData.length; i++) {
-      const compositionChar = compositionData[i];
-      let charToShow = currentWordChars[input.length + i];
-
-      if (charToShow === undefined) {
-        charToShow = compositionChar;
+      wordAtIndex.innerHTML = ret;
+
+      if (hintIndices?.length) {
+        const wordAtIndexLetters = wordAtIndex.querySelectorAll("letter");
+        let hintsHtml;
+        if (Config.indicateTypos === "both") {
+          hintsHtml = createHintsHtml(
+            hintIndices,
+            wordAtIndexLetters,
+            currentWord,
+          );
+        } else {
+          hintsHtml = createHintsHtml(hintIndices, wordAtIndexLetters, input);
+        }
+        wordAtIndex.insertAdjacentHTML("beforeend", hintsHtml);
+        const hintElements = wordAtIndex.getElementsByTagName("hint");
+        await joinOverlappingHints(
+          hintIndices,
+          wordAtIndexLetters,
+          hintElements,
+        );
       }
 
-      if (Config.indicateTypos === "replace") {
-        charToShow = compositionChar === " " ? "_" : compositionChar;
+      if (newlineafter)
+        wordAtIndex.insertAdjacentHTML(
+          "afterend",
+          "<div class='beforeNewline'></div><div class='newline'></div><div class='afterNewline'></div>",
+        );
+      if (Config.tapeMode !== "off") {
+        void scrollTape();
       }
-
-      ret += `<letter class="dead">${charToShow}</letter>`;
-    }
-
-    for (
-      let i = inputChars.length + compositionData.length;
-      i < currentWordChars.length;
-      i++
-    ) {
-      const currentLetter = currentWordChars[i];
-      if (funbox?.functions?.getWordHtml) {
-        ret += funbox.functions.getWordHtml(currentLetter as string, true);
-      } else if (currentLetter === "\t") {
-        ret += `<letter class='tabChar'><i class="fas fa-long-arrow-alt-right fa-fw"></i></letter>`;
-      } else if (currentLetter === "\n") {
-        ret += `<letter class='nlChar'><i class="fas fa-level-down-alt fa-rotate-90 fa-fw"></i></letter>`;
-      } else {
-        ret += `<letter>` + currentLetter + "</letter>";
+      if (Config.mode === "zen" || SlowTimer.get()) {
+        // because we block word jumps in before-insert-text
+        // this check only needs to happen in zen mode
+        // unless slow timer is on, then it needs to happen
+        // because the word jump check is disabled
+        if (!Config.showAllLines) {
+          const wordTopAfterUpdate = wordAtIndex.offsetTop;
+          if (wordTopAfterUpdate > activeWordTop) {
+            void lineJump(activeWordTop, true);
+          }
+        }
       }
-    }
-  }
-
-  activeWord.innerHTML = ret;
-
-  if (hintIndices?.length) {
-    const activeWordLetters = activeWord.querySelectorAll("letter");
-    let hintsHtml;
-    if (Config.indicateTypos === "both") {
-      hintsHtml = createHintsHtml(hintIndices, activeWordLetters, currentWord);
-    } else {
-      hintsHtml = createHintsHtml(hintIndices, activeWordLetters, input);
-    }
-    activeWord.insertAdjacentHTML("beforeend", hintsHtml);
-    const hintElements = activeWord.getElementsByTagName("hint");
-    await joinOverlappingHints(hintIndices, activeWordLetters, hintElements);
-  }
-
-  if (newlineafter)
-    $("#words").append(
-      "<div class='beforeNewline'></div><div class='newline'></div><div class='afterNewline'></div>",
-    );
-  if (Config.tapeMode !== "off") {
-    void scrollTape();
-  }
+    }, //end of raf
+  );
 }
 
 // this is needed in tape mode because sometimes we want the newline character to appear above the next line
@@ -887,10 +974,7 @@ export async function scrollTape(noAnimation = false): Promise<void> {
     ? !TestState.isLanguageRightToLeft
     : TestState.isLanguageRightToLeft;
 
-  const wordsWrapperWidth = (
-    document.querySelector("#wordsWrapper") as HTMLElement
-  ).offsetWidth;
-  const wordsEl = document.getElementById("words") as HTMLElement;
+  const wordsWrapperWidth = wordsWrapperEl.offsetWidth;
   const wordsChildrenArr = [...wordsEl.children] as HTMLElement[];
   const activeWordEl = getActiveWordElement();
   if (!activeWordEl) return;
@@ -955,7 +1039,11 @@ export async function scrollTape(noAnimation = false): Promise<void> {
     const child = wordsChildrenArr[i] as HTMLElement;
     if (child.classList.contains("word")) {
       leadingNewLine = false;
-      const wordOuterWidth = $(child).outerWidth(true) ?? 0;
+      const childComputedStyle = window.getComputedStyle(child);
+      const wordOuterWidth =
+        child.offsetWidth +
+        parseFloat(childComputedStyle.marginRight) +
+        parseFloat(childComputedStyle.marginLeft);
       const forWordLeft = Math.floor(child.offsetLeft);
       const forWordWidth = Math.floor(child.offsetWidth);
       if (
@@ -1017,22 +1105,22 @@ export async function scrollTape(noAnimation = false): Promise<void> {
   let currentWordWidth = 0;
   const inputLength = TestInput.input.current.length;
   if (Config.tapeMode === "letter" && inputLength > 0) {
-    const letters = activeWordEl.querySelectorAll("letter");
+    const letters = activeWordEl.querySelectorAll<HTMLElement>("letter");
     let lastPositiveLetterWidth = 0;
     for (let i = 0; i < inputLength; i++) {
-      const letter = letters[i] as HTMLElement;
+      const letter = letters[i];
       if (
         (Config.blindMode || Config.hideExtraLetters) &&
-        letter.classList.contains("extra")
+        letter?.classList.contains("extra")
       ) {
         continue;
       }
-      const letterOuterWidth = $(letter).outerWidth(true) ?? 0;
+      const letterOuterWidth = letter?.offsetWidth ?? 0;
       currentWordWidth += letterOuterWidth;
       if (letterOuterWidth > 0) lastPositiveLetterWidth = letterOuterWidth;
     }
     // if current letter has zero width move the tape to previous positive width letter
-    if ($(letters[inputLength] as Element).outerWidth(true) === 0)
+    if (letters[inputLength]?.offsetWidth === 0)
       currentWordWidth -= lastPositiveLetterWidth;
   }
 
@@ -1096,7 +1184,7 @@ export function updatePremid(): void {
 }
 
 function removeTestElements(lastElementIndexToRemove: number): void {
-  const wordsChildren = document.getElementById("words")?.children;
+  const wordsChildren = wordsEl.children;
 
   if (wordsChildren === undefined) return;
 
@@ -1118,7 +1206,6 @@ export async function lineJump(
   if (currentTestLine > 0 || force) {
     const hideBound = currentTop;
 
-    const wordsEl = document.getElementById("words") as HTMLElement;
     const activeWordEl = getActiveWordElement();
     if (!activeWordEl) {
       resolve();
@@ -1195,11 +1282,11 @@ export async function lineJump(
 
 export function setRightToLeft(isEnabled: boolean): void {
   if (isEnabled) {
-    $("#words").addClass("rightToLeftTest");
+    wordsEl.classList.add("rightToLeftTest");
     $("#resultWordsHistory .words").addClass("rightToLeftTest");
     $("#resultReplay .words").addClass("rightToLeftTest");
   } else {
-    $("#words").removeClass("rightToLeftTest");
+    wordsEl.classList.remove("rightToLeftTest");
     $("#resultWordsHistory .words").removeClass("rightToLeftTest");
     $("#resultReplay .words").removeClass("rightToLeftTest");
   }
@@ -1207,11 +1294,11 @@ export function setRightToLeft(isEnabled: boolean): void {
 
 export function setLigatures(isEnabled: boolean): void {
   if (isEnabled || Config.mode === "custom" || Config.mode === "zen") {
-    $("#words").addClass("withLigatures");
+    wordsEl.classList.add("withLigatures");
     $("#resultWordsHistory .words").addClass("withLigatures");
     $("#resultReplay .words").addClass("withLigatures");
   } else {
-    $("#words").removeClass("withLigatures");
+    wordsEl.classList.remove("withLigatures");
     $("#resultWordsHistory .words").removeClass("withLigatures");
     $("#resultReplay .words").removeClass("withLigatures");
   }
@@ -1383,9 +1470,6 @@ export function toggleResultWords(noAnimation = false): void {
       //show
 
       if ($("#resultWordsHistory .words .word").length === 0) {
-        $("#words").html(
-          `<div class="preloader"><i class="fas fa-fw fa-spin fa-circle-notch"></i></div>`,
-        );
         void loadWordsHistory().then(() => {
           if (Config.burstHeatmap) {
             void applyBurstHeatmap();
@@ -1531,14 +1615,21 @@ export async function applyBurstHeatmap(): Promise<void> {
 }
 
 export function highlightBadWord(index: number): void {
-  getWordElement(index)?.classList.add("error");
+  requestDebouncedAnimationFrame(`test-ui.highlightBadWord.${index}`, () => {
+    getWordElement(index)?.classList.add("error");
+  });
 }
 
 export function highlightAllLettersAsCorrect(wordIndex: number): void {
-  const letters = getWordElement(wordIndex)?.children;
-  for (const letter of letters ?? []) {
-    letter.classList.add("correct");
-  }
+  requestDebouncedAnimationFrame(
+    `test-ui.highlightAllLettersAsCorrect.${wordIndex}`,
+    () => {
+      const letters = getWordElement(wordIndex)?.children;
+      for (const letter of letters ?? []) {
+        letter.classList.add("correct");
+      }
+    },
+  );
 }
 
 function updateWordsWidth(): void {
@@ -1629,21 +1720,25 @@ function updateLiveStatsColor(value: TimerColor): void {
   }
 }
 
-export function getActiveWordTopAfterAppend(data: string): number {
+export function getActiveWordTopWithDifferentData(data: string): number {
   const activeWord = getActiveWordElement();
 
   if (!activeWord) throw new Error("No active word element found");
 
-  const displayData = data === " " ? "_" : data;
-
-  const tempLetter = document.createElement("letter");
-  tempLetter.className = "temp";
-  tempLetter.textContent = displayData;
+  const nodes = [];
+  for (let i = activeWord.children.length; i < data.length; i++) {
+    const tempLetter = document.createElement("letter");
+    const displayData = data[i] === " " ? "_" : data[i];
+    tempLetter.textContent = displayData as string;
+    nodes.push(tempLetter);
+  }
 
-  activeWord.appendChild(tempLetter);
+  activeWord.append(...nodes);
 
   const top = activeWord.offsetTop;
-  tempLetter.remove();
+  for (const node of nodes) {
+    node.remove();
+  }
 
   return top;
 }
@@ -1693,27 +1788,35 @@ export function afterTestTextInput(
   //nospace cant be handled here becauseword index
   // is already increased at this point
 
-  setActiveWordTop();
-  if (!increasedWordIndex) void updateActiveWordLetters(inputOverride);
+  void MonkeyPower.addPower(correct);
 
-  if (Config.mode === "zen") {
-    const currentTop = getActiveWordElement()?.offsetTop;
-    if (currentTop !== undefined && currentTop > activeWordTop) {
-      void lineJump(activeWordTop, true);
-    }
+  if (!increasedWordIndex) {
+    void updateWordLetters({
+      input: inputOverride ?? TestInput.input.current,
+      wordIndex: TestState.activeWordIndex,
+      compositionData: CompositionState.getData(),
+    });
   }
 
   afterAnyTestInput("textInput", correct);
 }
 
 export function afterTestCompositionUpdate(): void {
-  void updateActiveWordLetters();
+  void updateWordLetters({
+    input: TestInput.input.current,
+    wordIndex: TestState.activeWordIndex,
+    compositionData: CompositionState.getData(),
+  });
   // correct needs to be true to get the normal click sound
   afterAnyTestInput("compositionUpdate", true);
 }
 
 export function afterTestDelete(): void {
-  void updateActiveWordLetters();
+  void updateWordLetters({
+    input: TestInput.input.current,
+    wordIndex: TestState.activeWordIndex,
+    compositionData: CompositionState.getData(),
+  });
   afterAnyTestInput("delete", null);
 }
 
@@ -1738,7 +1841,11 @@ export function beforeTestWordChange(
     nospaceEnabled ||
     forceUpdateActiveWordLetters
   ) {
-    void updateActiveWordLetters();
+    void updateWordLetters({
+      input: TestInput.input.current,
+      wordIndex: TestState.activeWordIndex,
+      compositionData: CompositionState.getData(),
+    });
   }
 
   if (direction === "forward") {
@@ -1753,7 +1860,9 @@ export function beforeTestWordChange(
 export async function afterTestWordChange(
   direction: "forward" | "back",
 ): Promise<void> {
-  updateActiveElement();
+  updateActiveElement({
+    direction,
+  });
   Caret.updatePosition();
 
   const lastBurst = TestInput.burstHistory[TestInput.burstHistory.length - 1];
@@ -1761,33 +1870,10 @@ export async function afterTestWordChange(
     void LiveBurst.update(Math.round(lastBurst));
   }
   if (direction === "forward") {
-    if (
-      !Config.showAllLines ||
-      Config.mode === "time" ||
-      (Config.mode === "custom" && CustomText.getLimitValue() === 0) ||
-      (Config.mode === "custom" && CustomText.getLimitMode() === "time")
-    ) {
-      const previousWord = getWordElement(TestState.activeWordIndex - 1);
-      const activeWord = getActiveWordElement();
-
-      if (!previousWord || !activeWord) return;
-
-      const previousTop = previousWord.offsetTop;
-      const activeTop = activeWord.offsetTop;
-
-      if (
-        activeTop !== null &&
-        previousTop !== null &&
-        Math.floor(activeTop) > Math.floor(previousTop)
-      ) {
-        void lineJump(previousTop);
-      }
-    }
+    //
   } else if (direction === "back") {
     if (Config.mode === "zen") {
-      const wordsChildren = [
-        ...(document.querySelector("#words")?.children ?? []),
-      ] as HTMLElement[];
+      const wordsChildren = [...(wordsEl.children ?? [])] as HTMLElement[];
 
       let deleteElements = false;
       for (const child of wordsChildren) {
@@ -1808,7 +1894,6 @@ export async function afterTestWordChange(
 }
 
 export function afterTestStart(): void {
-  setActiveWordTop();
   Focus.set(true);
   Monkey.show();
   TimerProgress.show();
diff --git a/frontend/src/ts/test/timer-progress.ts b/frontend/src/ts/test/timer-progress.ts
index 274d1d7d5568..30d87eb3f452 100644
--- a/frontend/src/ts/test/timer-progress.ts
+++ b/frontend/src/ts/test/timer-progress.ts
@@ -7,6 +7,7 @@ import * as Time from "../states/time";
 import * as TestState from "./test-state";
 import * as ConfigEvent from "../observables/config-event";
 import { applyReducedMotion } from "../utils/misc";
+import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import { animate } from "animejs";
 
 const barEl = document.querySelector("#barTimerProgress .bar") as HTMLElement;
@@ -20,86 +21,92 @@ const miniEl = document.querySelector("#liveStatsMini .time") as HTMLElement;
 
 export function show(): void {
   if (!TestState.isActive) return;
-  if (Config.mode !== "zen" && Config.timerStyle === "bar") {
-    animate(barOpacityEl, {
-      opacity: [0, 1],
-      duration: applyReducedMotion(125),
-      onBegin: () => {
-        barOpacityEl.classList.remove("hidden");
-      },
+  requestDebouncedAnimationFrame("timer-progress.show", () => {
+    if (Config.mode !== "zen" && Config.timerStyle === "bar") {
+      animate(barOpacityEl, {
+        opacity: [0, 1],
+        duration: applyReducedMotion(125),
+        onBegin: () => {
+          barOpacityEl.classList.remove("hidden");
+        },
+      });
+    } else if (Config.timerStyle === "text") {
+      animate(textEl, {
+        opacity: [0, 1],
+        duration: applyReducedMotion(125),
+        onBegin: () => {
+          textEl.classList.remove("hidden");
+        },
+      });
+    } else if (Config.timerStyle === "flash_mini") {
+      animate(miniEl, {
+        opacity: [0, 1],
+        duration: applyReducedMotion(125),
+        onBegin: () => {
+          miniEl.classList.remove("hidden");
+        },
+      });
+    } else if (Config.timerStyle === "flash_text") {
+      animate(textEl, {
+        opacity: [0, 1],
+        duration: applyReducedMotion(125),
+        onBegin: () => {
+          textEl.classList.remove("hidden");
+        },
+      });
+    } else if (Config.mode === "zen" || Config.timerStyle === "mini") {
+      animate(miniEl, {
+        opacity: [0, 1],
+        duration: applyReducedMotion(125),
+        onBegin: () => {
+          miniEl.classList.remove("hidden");
+        },
+      });
+    }
+  });
+}
+
+export function reset(): void {
+  requestDebouncedAnimationFrame("timer-progress.reset", () => {
+    let width = "0vw";
+    if (
+      Config.mode === "time" ||
+      (Config.mode === "custom" && CustomText.getLimitMode() === "time")
+    ) {
+      width = "100vw";
+    }
+
+    animate(barEl, {
+      width,
+      duration: 0,
     });
-  } else if (Config.timerStyle === "text") {
-    animate(textEl, {
-      opacity: [0, 1],
+    miniEl.textContent = "0";
+    textEl.textContent = "0";
+  });
+}
+
+export function hide(): void {
+  requestDebouncedAnimationFrame("timer-progress.hide", () => {
+    animate(barOpacityEl, {
+      opacity: 0,
       duration: applyReducedMotion(125),
-      onBegin: () => {
-        textEl.classList.remove("hidden");
-      },
     });
-  } else if (Config.timerStyle === "flash_mini") {
+
     animate(miniEl, {
-      opacity: [0, 1],
+      opacity: 0,
       duration: applyReducedMotion(125),
-      onBegin: () => {
-        miniEl.classList.remove("hidden");
+      onComplete: () => {
+        miniEl.classList.add("hidden");
       },
     });
-  } else if (Config.timerStyle === "flash_text") {
+
     animate(textEl, {
-      opacity: [0, 1],
-      duration: applyReducedMotion(125),
-      onBegin: () => {
-        textEl.classList.remove("hidden");
-      },
-    });
-  } else if (Config.mode === "zen" || Config.timerStyle === "mini") {
-    animate(miniEl, {
-      opacity: [0, 1],
+      opacity: 0,
       duration: applyReducedMotion(125),
-      onBegin: () => {
-        miniEl.classList.remove("hidden");
+      onComplete: () => {
+        textEl.classList.add("hidden");
       },
     });
-  }
-}
-
-export function reset(): void {
-  let width = "0vw";
-  if (
-    Config.mode === "time" ||
-    (Config.mode === "custom" && CustomText.getLimitMode() === "time")
-  ) {
-    width = "100vw";
-  }
-
-  animate(barEl, {
-    width,
-    duration: 0,
-  });
-  miniEl.textContent = "0";
-  textEl.textContent = "0";
-}
-
-export function hide(): void {
-  animate(barOpacityEl, {
-    opacity: 0,
-    duration: applyReducedMotion(125),
-  });
-
-  animate(miniEl, {
-    opacity: 0,
-    duration: applyReducedMotion(125),
-    onComplete: () => {
-      miniEl.classList.add("hidden");
-    },
-  });
-
-  animate(textEl, {
-    opacity: 0,
-    duration: applyReducedMotion(125),
-    onComplete: () => {
-      textEl.classList.add("hidden");
-    },
   });
 }
 
@@ -115,124 +122,126 @@ function getCurrentCount(): number {
 }
 
 export function update(): void {
-  const time = Time.get();
-  if (
-    Config.mode === "time" ||
-    (Config.mode === "custom" && CustomText.getLimitMode() === "time")
-  ) {
-    let maxtime = Config.time;
-    if (Config.mode === "custom" && CustomText.getLimitMode() === "time") {
-      maxtime = CustomText.getLimitValue();
-    }
-    if (Config.timerStyle === "bar") {
-      const percent = 100 - ((time + 1) / maxtime) * 100;
-
-      animate(barEl, {
-        width: percent + "vw",
-        duration: 1000,
-        ease: "linear",
-      });
-    } else if (Config.timerStyle === "text") {
-      let displayTime = DateTime.secondsToString(maxtime - time);
-      if (maxtime === 0) {
-        displayTime = DateTime.secondsToString(time);
-      }
-      if (textEl !== null) {
-        textEl.innerHTML = "<div>" + displayTime + "</div>";
-      }
-    } else if (Config.timerStyle === "flash_mini") {
-      let displayTime = DateTime.secondsToString(maxtime - time);
-      if (maxtime === 0) {
-        displayTime = DateTime.secondsToString(time);
+  requestDebouncedAnimationFrame("timer-progress.update", () => {
+    const time = Time.get();
+    if (
+      Config.mode === "time" ||
+      (Config.mode === "custom" && CustomText.getLimitMode() === "time")
+    ) {
+      let maxtime = Config.time;
+      if (Config.mode === "custom" && CustomText.getLimitMode() === "time") {
+        maxtime = CustomText.getLimitValue();
       }
-      if (miniEl !== null) {
-        if ((maxtime - time) % 15 !== 0) {
-          miniEl.style.opacity = "0";
-        } else {
-          miniEl.style.opacity = "1";
+      if (Config.timerStyle === "bar") {
+        const percent = 100 - ((time + 1) / maxtime) * 100;
+
+        animate(barEl, {
+          width: percent + "vw",
+          duration: 1000,
+          ease: "linear",
+        });
+      } else if (Config.timerStyle === "text") {
+        let displayTime = DateTime.secondsToString(maxtime - time);
+        if (maxtime === 0) {
+          displayTime = DateTime.secondsToString(time);
+        }
+        if (textEl !== null) {
+          textEl.innerHTML = "<div>" + displayTime + "</div>";
+        }
+      } else if (Config.timerStyle === "flash_mini") {
+        let displayTime = DateTime.secondsToString(maxtime - time);
+        if (maxtime === 0) {
+          displayTime = DateTime.secondsToString(time);
+        }
+        if (miniEl !== null) {
+          if ((maxtime - time) % 15 !== 0) {
+            miniEl.style.opacity = "0";
+          } else {
+            miniEl.style.opacity = "1";
+          }
+          miniEl.innerHTML = "<div>" + displayTime + "</div>";
+        }
+      } else if (Config.timerStyle === "flash_text") {
+        let displayTime = DateTime.secondsToString(maxtime - time);
+        if (maxtime === 0) {
+          displayTime = DateTime.secondsToString(time);
+        }
+        if (textEl !== null) {
+          textEl.innerHTML =
+            "<div>" +
+            `${(maxtime - time) % 15 !== 0 ? "" : displayTime}` +
+            "</div>";
+        }
+      } else if (Config.timerStyle === "mini") {
+        let displayTime = DateTime.secondsToString(maxtime - time);
+        if (maxtime === 0) {
+          displayTime = DateTime.secondsToString(time);
+        }
+        if (miniEl !== null) {
+          miniEl.innerHTML = displayTime;
         }
-        miniEl.innerHTML = "<div>" + displayTime + "</div>";
-      }
-    } else if (Config.timerStyle === "flash_text") {
-      let displayTime = DateTime.secondsToString(maxtime - time);
-      if (maxtime === 0) {
-        displayTime = DateTime.secondsToString(time);
       }
-      if (textEl !== null) {
-        textEl.innerHTML =
-          "<div>" +
-          `${(maxtime - time) % 15 !== 0 ? "" : displayTime}` +
-          "</div>";
+    } else if (
+      Config.mode === "words" ||
+      Config.mode === "custom" ||
+      Config.mode === "quote"
+    ) {
+      let outof = TestWords.words.length;
+      if (Config.mode === "words") {
+        outof = Config.words;
       }
-    } else if (Config.timerStyle === "mini") {
-      let displayTime = DateTime.secondsToString(maxtime - time);
-      if (maxtime === 0) {
-        displayTime = DateTime.secondsToString(time);
+      if (Config.mode === "custom") {
+        outof = CustomText.getLimitValue();
       }
-      if (miniEl !== null) {
-        miniEl.innerHTML = displayTime;
+      if (Config.mode === "quote") {
+        outof = TestWords.currentQuote?.textSplit.length ?? 1;
       }
-    }
-  } else if (
-    Config.mode === "words" ||
-    Config.mode === "custom" ||
-    Config.mode === "quote"
-  ) {
-    let outof = TestWords.words.length;
-    if (Config.mode === "words") {
-      outof = Config.words;
-    }
-    if (Config.mode === "custom") {
-      outof = CustomText.getLimitValue();
-    }
-    if (Config.mode === "quote") {
-      outof = TestWords.currentQuote?.textSplit.length ?? 1;
-    }
-    if (Config.timerStyle === "bar") {
-      const percent = Math.floor(
-        ((TestState.activeWordIndex + 1) / outof) * 100,
-      );
+      if (Config.timerStyle === "bar") {
+        const percent = Math.floor(
+          ((TestState.activeWordIndex + 1) / outof) * 100,
+        );
 
-      animate(barEl, {
-        width: percent + "vw",
-        duration: 250,
-      });
-    } else if (Config.timerStyle === "text") {
-      if (outof === 0) {
-        textEl.innerHTML = `<div>${TestInput.input.getHistory().length}</div>`;
-      } else {
-        textEl.innerHTML = `<div>${getCurrentCount()}/${outof}</div>`;
+        animate(barEl, {
+          width: percent + "vw",
+          duration: 250,
+        });
+      } else if (Config.timerStyle === "text") {
+        if (outof === 0) {
+          textEl.innerHTML = `<div>${TestInput.input.getHistory().length}</div>`;
+        } else {
+          textEl.innerHTML = `<div>${getCurrentCount()}/${outof}</div>`;
+        }
+      } else if (Config.timerStyle === "flash_mini") {
+        if (outof === 0) {
+          miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
+        } else {
+          miniEl.innerHTML = `${getCurrentCount()}/${outof}`;
+        }
+      } else if (Config.timerStyle === "flash_text") {
+        if (outof === 0) {
+          textEl.innerHTML = `<div>${TestInput.input.getHistory().length}</div>`;
+        } else {
+          textEl.innerHTML = `<div>${getCurrentCount()}/${outof}</div>`;
+        }
+      } else if (Config.timerStyle === "mini") {
+        if (outof === 0) {
+          miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
+        } else {
+          miniEl.innerHTML = `${getCurrentCount()}/${outof}`;
+        }
       }
-    } else if (Config.timerStyle === "flash_mini") {
-      if (outof === 0) {
+    } else if (Config.mode === "zen") {
+      if (Config.timerStyle === "text") {
+        textEl.innerHTML = `<div>${TestInput.input.getHistory().length}</div>`;
+      } else if (Config.timerStyle === "flash_mini") {
         miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
-      } else {
-        miniEl.innerHTML = `${getCurrentCount()}/${outof}`;
-      }
-    } else if (Config.timerStyle === "flash_text") {
-      if (outof === 0) {
+      } else if (Config.timerStyle === "flash_text") {
         textEl.innerHTML = `<div>${TestInput.input.getHistory().length}</div>`;
       } else {
-        textEl.innerHTML = `<div>${getCurrentCount()}/${outof}</div>`;
-      }
-    } else if (Config.timerStyle === "mini") {
-      if (outof === 0) {
         miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
-      } else {
-        miniEl.innerHTML = `${getCurrentCount()}/${outof}`;
       }
     }
-  } else if (Config.mode === "zen") {
-    if (Config.timerStyle === "text") {
-      textEl.innerHTML = `<div>${TestInput.input.getHistory().length}</div>`;
-    } else if (Config.timerStyle === "flash_mini") {
-      miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
-    } else if (Config.timerStyle === "flash_text") {
-      textEl.innerHTML = `<div>${TestInput.input.getHistory().length}</div>`;
-    } else {
-      miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
-    }
-  }
+  });
 }
 
 export function updateStyle(): void {
diff --git a/package.json b/package.json
index b96f7771b8f5..697a694f783f 100644
--- a/package.json
+++ b/package.json
@@ -89,6 +89,6 @@
       "eslint"
     ]
   },
-  "version": "25.48.0",
+  "version": "25.49.0",
   "packageManager": "pnpm@9.6.0"
 }