From 476fe5e0779f9ab02a84424501e6f2510333a4da Mon Sep 17 00:00:00 2001
From: Jack <jack@monkeytype.com>
Date: Sun, 19 Jul 2026 16:54:49 +0200
Subject: [PATCH 1/2] refactor: solid live stats (@miodec) (#8248)

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 frontend/__tests__/test/events/stats.spec.ts  |   4 +-
 frontend/src/html/pages/test.html             |  21 +-
 frontend/src/index.html                       |   6 +-
 frontend/src/styles/media-queries-blue.scss   |   4 -
 frontend/src/styles/media-queries-green.scss  |   4 -
 frontend/src/styles/media-queries-purple.scss |   4 -
 frontend/src/styles/media-queries-yellow.scss |   6 -
 frontend/src/styles/test.scss                 | 170 ------------
 frontend/src/ts/commandline/lists/bail-out.ts |   4 +-
 frontend/src/ts/components/mount.tsx          |   8 +
 .../test/live-stats/BarTimerProgress.tsx      |  40 +++
 .../pages/test/live-stats/LiveStatsMini.tsx   |  58 ++++
 .../test/live-stats/LiveStatsTextBottom.tsx   |  41 +++
 .../test/live-stats/LiveStatsTextTop.tsx      |  40 +++
 .../pages/test/live-stats/styles.tsx          |  24 ++
 frontend/src/ts/constants/themes.ts           |   2 -
 .../src/ts/controllers/route-controller.ts    |  10 +-
 .../src/ts/input/handlers/before-delete.ts    |   8 +-
 .../ts/input/handlers/before-insert-text.ts   |   8 +-
 frontend/src/ts/input/handlers/keydown.ts     |   5 +-
 .../src/ts/input/listeners/composition.ts     |   7 +-
 frontend/src/ts/input/listeners/input.ts      |   4 +-
 frontend/src/ts/states/live-stats.ts          | 131 +++++++++
 frontend/src/ts/states/test.ts                |  20 +-
 frontend/src/ts/test/events/data.ts           |  13 +-
 frontend/src/ts/test/focus.ts                 |  12 -
 frontend/src/ts/test/live-acc.ts              |  87 ------
 frontend/src/ts/test/live-burst.ts            |  85 ------
 frontend/src/ts/test/live-speed.ts            |  87 ------
 frontend/src/ts/test/result.ts                |   8 +-
 frontend/src/ts/test/test-logic.ts            |  20 +-
 frontend/src/ts/test/test-state.ts            |  10 -
 frontend/src/ts/test/test-timer.ts            |  12 +-
 frontend/src/ts/test/test-ui.ts               | 115 ++------
 frontend/src/ts/test/timer-progress.ts        | 260 ------------------
 frontend/static/themes/husqy.css              |   4 -
 frontend/static/themes/matrix.css             |   4 -
 frontend/static/themes/rainbow_trail.css      |   6 -
 frontend/static/themes/shadow.css             |   5 -
 frontend/static/themes/stealth.css            |   3 -
 40 files changed, 440 insertions(+), 920 deletions(-)
 create mode 100644 frontend/src/ts/components/pages/test/live-stats/BarTimerProgress.tsx
 create mode 100644 frontend/src/ts/components/pages/test/live-stats/LiveStatsMini.tsx
 create mode 100644 frontend/src/ts/components/pages/test/live-stats/LiveStatsTextBottom.tsx
 create mode 100644 frontend/src/ts/components/pages/test/live-stats/LiveStatsTextTop.tsx
 create mode 100644 frontend/src/ts/components/pages/test/live-stats/styles.tsx
 create mode 100644 frontend/src/ts/states/live-stats.ts
 delete mode 100644 frontend/src/ts/test/live-acc.ts
 delete mode 100644 frontend/src/ts/test/live-burst.ts
 delete mode 100644 frontend/src/ts/test/live-speed.ts
 delete mode 100644 frontend/src/ts/test/timer-progress.ts
 delete mode 100644 frontend/static/themes/husqy.css
 delete mode 100644 frontend/static/themes/matrix.css

diff --git a/frontend/__tests__/test/events/stats.spec.ts b/frontend/__tests__/test/events/stats.spec.ts
index 9d32d300d484..b09bd8053068 100644
--- a/frontend/__tests__/test/events/stats.spec.ts
+++ b/frontend/__tests__/test/events/stats.spec.ts
@@ -5,8 +5,6 @@ vi.mock("../../../src/ts/test/test-stats", () => ({
 }));
 
 vi.mock("../../../src/ts/test/test-state", () => ({
-  bailedOut: false,
-  resultCalculating: false,
   koreanStatus: false,
 }));
 
@@ -53,6 +51,8 @@ vi.mock("../../../src/ts/test/custom-text", () => ({
 vi.mock("../../../src/ts/states/test", () => ({
   getCurrentQuote: () => null,
   getActiveWordIndex: () => mockState.activeWordIndex,
+  isResultCalculating: () => false,
+  getBailedOut: () => false,
 }));
 
 import {
diff --git a/frontend/src/html/pages/test.html b/frontend/src/html/pages/test.html
index b2b1e1606fb0..69f5e412ebcc 100644
--- a/frontend/src/html/pages/test.html
+++ b/frontend/src/html/pages/test.html
@@ -20,17 +20,8 @@
     <div id="layoutfluidTimer">Time left to memorise all words: 0s</div>
     <mount data-component="testmodesnotice"></mount>
 
-    <div id="liveStatsTextTop" class="timerMain">
-      <div class="wrapper">
-        <div class="timerProgress hidden">1:00</div>
-      </div>
-    </div>
-    <div id="liveStatsMini" class="full-width timerMain">
-      <div class="time hidden">1:00</div>
-      <div class="speed hidden">60</div>
-      <div class="acc hidden">100%</div>
-      <div class="burst hidden">1</div>
-    </div>
+    <mount data-component="livestatstexttop"></mount>
+    <mount data-component="livestatsmini"></mount>
     <div id="wordsWrapper" class="content-grid full-width" translate="no">
       <textarea
         id="wordsInput"
@@ -67,13 +58,7 @@
     >
       <i class="fas fa-fw fa-redo-alt"></i>
     </button>
-    <div id="liveStatsTextBottom" class="timerMain">
-      <div class="wrapper">
-        <div class="liveSpeed hidden">123</div>
-        <div class="liveAcc hidden">100%%</div>
-        <div class="liveBurst hidden">1</div>
-      </div>
-    </div>
+    <mount data-component="livestatstextbottom"></mount>
     <div id="premidTestMode" class="hidden"></div>
     <div id="premidSecondsLeft" class="hidden"></div>
   </div>
diff --git a/frontend/src/index.html b/frontend/src/index.html
index e462f01e88d2..4e2504b4503c 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -9,11 +9,7 @@
 
     <!-- theme component adds to the head element, don't move to head.html -->
     <mount data-component="theme"></mount>
-    <div id="barTimerProgress" class="timerMain">
-      <div class="opacityWrapper" style="opacity: 0">
-        <div class="bar"></div>
-      </div>
-    </div>
+    <mount data-component="bartimerprogress"></mount>
     <mount data-component="modals" id="solidmodals"></mount>
     <mount data-component="popups" id="solidpopups"></mount>
     <div id="popups">
diff --git a/frontend/src/styles/media-queries-blue.scss b/frontend/src/styles/media-queries-blue.scss
index b833df2a8cc7..e5be2891cdb4 100644
--- a/frontend/src/styles/media-queries-blue.scss
+++ b/frontend/src/styles/media-queries-blue.scss
@@ -5,10 +5,6 @@
     --content-max-width: 640px;
   }
   .pageTest {
-    #liveStatsTextTop,
-    #liveStatsTextBottom {
-      font-size: 5rem;
-    }
     #result .wrapper {
       grid-template-columns: 1fr;
       grid-template-areas:
diff --git a/frontend/src/styles/media-queries-green.scss b/frontend/src/styles/media-queries-green.scss
index 444da3e43b4e..484409b1bcdb 100644
--- a/frontend/src/styles/media-queries-green.scss
+++ b/frontend/src/styles/media-queries-green.scss
@@ -10,10 +10,6 @@
       grid-template-columns: repeat(3, max-content);
       grid-template-rows: 1fr 1fr;
     }
-    #liveStatsTextTop,
-    #liveStatsTextBottom {
-      font-size: 7rem;
-    }
   }
 
   .testActivity {
diff --git a/frontend/src/styles/media-queries-purple.scss b/frontend/src/styles/media-queries-purple.scss
index c6dc189eb372..2c104a71c1cf 100644
--- a/frontend/src/styles/media-queries-purple.scss
+++ b/frontend/src/styles/media-queries-purple.scss
@@ -26,10 +26,6 @@
     }
   }
   .pageTest {
-    #liveStatsTextTop,
-    #liveStatsTextBottom {
-      font-size: 12vw;
-    }
     #result .wrapper {
       .stats {
         grid-template-columns: 1fr;
diff --git a/frontend/src/styles/media-queries-yellow.scss b/frontend/src/styles/media-queries-yellow.scss
index bdc5cde176a8..c4063cf5fa5b 100644
--- a/frontend/src/styles/media-queries-yellow.scss
+++ b/frontend/src/styles/media-queries-yellow.scss
@@ -5,12 +5,6 @@
     --content-max-width: 1024px;
   }
 
-  .pageTest {
-    #liveStatsTextTop,
-    #liveStatsTextBottom {
-      font-size: 9rem;
-    }
-  }
   .testActivity {
     // --box-size: 0.9em;
     // --font-size: 0.9em;
diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index c946b6347ea4..2727a0f96fbb 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -44,35 +44,6 @@
   }
 }
 
-#barTimerProgress {
-  opacity: 0;
-  position: relative;
-  z-index: 99;
-  .bar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 0.5rem;
-    background: black;
-    /*   background: #0f0f0f; */
-    /*   background: red; */
-    // transition: 1s linear;
-    z-index: -1;
-  }
-  &.timerMain .bar {
-    background: var(--main-color);
-  }
-
-  &.timerSub .bar {
-    background: var(--sub-color);
-  }
-
-  &.timerText .bar {
-    background: var(--text-color);
-  }
-}
-
 .pageTest {
   position: relative;
 
@@ -112,81 +83,6 @@
       margin-left: 0.33em;
     }
   }
-
-  #liveStatsTextTop {
-    pointer-events: none;
-    color: black;
-    z-index: -1;
-    text-align: center;
-    position: relative;
-    display: grid;
-    font-size: 10rem;
-
-    opacity: 0;
-    width: 0;
-    height: 0;
-    justify-self: center;
-
-    transition: none;
-
-    .wrapper {
-      position: absolute;
-      bottom: 1.25rem;
-      display: flex;
-      justify-self: center;
-      gap: 0.5ch;
-      line-height: 1;
-    }
-  }
-
-  #liveStatsTextBottom {
-    font-size: 10rem;
-    color: black;
-    width: 100%;
-    text-align: center;
-    z-index: -1;
-    height: 0;
-    position: relative;
-    display: grid;
-    margin: 0 auto;
-    pointer-events: none;
-
-    .wrapper {
-      position: absolute;
-      top: 1rem;
-      display: flex;
-      justify-self: center;
-      gap: 0.5ch;
-      line-height: 1;
-    }
-  }
-
-  #liveStatsTextBottom.timerMain,
-  #liveStatsTextTop.timerMain {
-    color: var(--main-color);
-  }
-
-  #barTimerProgress.timerMain .bar {
-    background: var(--main-color);
-  }
-
-  #liveStatsTextBottom.timerSub,
-  #liveStatsTextTop.timerSub {
-    color: var(--sub-color);
-  }
-
-  #barTimerProgress.timerSub .bar {
-    background: var(--sub-color);
-  }
-
-  #liveStatsTextBottom.timerText,
-  #liveStatsTextTop.timerText {
-    color: var(--text-color);
-  }
-
-  #barTimerProgress.timerText .bar {
-    background: var(--text-color);
-  }
 }
 
 #words {
@@ -1342,72 +1238,6 @@
     pointer-events: none;
     opacity: 0;
   }
-
-  #liveStatsMini {
-    width: 0;
-    justify-content: start;
-    height: 0;
-    margin-left: 0.25em;
-    display: flex;
-    margin-top: -1.25em;
-    color: black;
-
-    div {
-      font-size: 1em;
-      line-height: 1em;
-    }
-
-    .time,
-    .speed,
-    .acc {
-      margin-right: 0.5em;
-    }
-
-    .time,
-    .speed,
-    .acc,
-    .burst {
-      opacity: 0;
-    }
-
-    &.timerMain {
-      color: var(--main-color);
-    }
-
-    &.timerSub {
-      color: var(--sub-color);
-    }
-
-    &.timerText {
-      color: var(--text-color);
-    }
-
-    &.size125 {
-      margin-top: -1.75rem;
-      font-size: 1.25rem;
-      line-height: 1.25rem;
-    }
-    &.size15 {
-      margin-top: -2rem;
-      font-size: 1.5rem;
-      line-height: 1.5rem;
-    }
-    &.size2 {
-      margin-top: -2.5rem;
-      font-size: 2rem;
-      line-height: 2rem;
-    }
-    &.size3 {
-      margin-top: -3.5rem;
-      font-size: 3rem;
-      line-height: 3rem;
-    }
-    &.size4 {
-      margin-top: -4.5rem;
-      font-size: 4rem;
-      line-height: 4rem;
-    }
-  }
 }
 
 main.focus .pageTest {
diff --git a/frontend/src/ts/commandline/lists/bail-out.ts b/frontend/src/ts/commandline/lists/bail-out.ts
index a650d5c1d0e0..f604d425e096 100644
--- a/frontend/src/ts/commandline/lists/bail-out.ts
+++ b/frontend/src/ts/commandline/lists/bail-out.ts
@@ -1,8 +1,8 @@
 import { Config } from "../../config/store";
 import { getCustomTextIndicator } from "../../states/core";
 import * as CustomText from "../../test/custom-text";
+import { setBailedOut } from "../../states/test";
 import * as TestLogic from "../../test/test-logic";
-import * as TestState from "../../test/test-state";
 import { Command, CommandsSubgroup } from "../types";
 
 function canBailOut(): boolean {
@@ -38,7 +38,7 @@ const subgroup: CommandsSubgroup = {
       id: "bailOutForSure",
       display: "Yes, I am sure",
       exec: (): void => {
-        TestState.setBailedOut(true);
+        setBailedOut(true);
         void TestLogic.finish();
       },
       available: (): boolean => {
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index bcc5a5ce4d93..eaeedb234b8c 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -25,6 +25,10 @@ import { SettingsPage } from "./pages/settings/SettingsPage";
 import { CapsWarning } from "./pages/test/CapsWarning";
 import { CompositionDisplay } from "./pages/test/CompositionDisplay";
 import { Keymap } from "./pages/test/Keymap";
+import { BarTimerProgress } from "./pages/test/live-stats/BarTimerProgress";
+import { LiveStatsMini } from "./pages/test/live-stats/LiveStatsMini";
+import { LiveStatsTextBottom } from "./pages/test/live-stats/LiveStatsTextBottom";
+import { LiveStatsTextTop } from "./pages/test/live-stats/LiveStatsTextTop";
 import { TestModesNotice } from "./pages/test/modes-notice/TestModesNotice";
 import { Monkey } from "./pages/test/Monkey";
 import { OutOfFocusWarning } from "./pages/test/OutOfFocusWarning";
@@ -58,6 +62,10 @@ const components: Record<string, () => JSXElement> = {
   keymap: () => <Keymap />,
   monkey: () => <Monkey />,
   outoffocuswarning: () => <OutOfFocusWarning />,
+  livestatsmini: () => <LiveStatsMini />,
+  livestatstexttop: () => <LiveStatsTextTop />,
+  livestatstextbottom: () => <LiveStatsTextBottom />,
+  bartimerprogress: () => <BarTimerProgress />,
 };
 
 function mountToMountpoint(name: string, component: () => JSXElement): void {
diff --git a/frontend/src/ts/components/pages/test/live-stats/BarTimerProgress.tsx b/frontend/src/ts/components/pages/test/live-stats/BarTimerProgress.tsx
new file mode 100644
index 000000000000..11ec14d2c7b1
--- /dev/null
+++ b/frontend/src/ts/components/pages/test/live-stats/BarTimerProgress.tsx
@@ -0,0 +1,40 @@
+import { animate } from "animejs";
+import { createEffect } from "solid-js";
+
+import { getConfig } from "../../../../config/store";
+import { getBarTarget, showLiveStats } from "../../../../states/live-stats";
+import { cn } from "../../../../utils/cn";
+import { Anime } from "../../../common/anime";
+import { liveStatsBgColor } from "./styles";
+
+export function BarTimerProgress() {
+  let barEl: HTMLElement | undefined;
+
+  createEffect(() => {
+    const target = getBarTarget();
+    if (barEl === undefined) return;
+    animate(barEl, target);
+  });
+
+  const shown = () =>
+    showLiveStats() &&
+    getConfig.mode !== "zen" &&
+    getConfig.timerStyle === "bar";
+
+  return (
+    <div class="relative z-99" style={{ opacity: getConfig.timerOpacity }}>
+      <Anime
+        initial={{ opacity: 0 }}
+        animation={{ opacity: shown() ? 1 : 0, duration: 125 }}
+      >
+        <div
+          ref={(el) => (barEl = el)}
+          class={cn(
+            "fixed top-0 left-0 z-[-1] h-2 w-screen",
+            liveStatsBgColor(),
+          )}
+        ></div>
+      </Anime>
+    </div>
+  );
+}
diff --git a/frontend/src/ts/components/pages/test/live-stats/LiveStatsMini.tsx b/frontend/src/ts/components/pages/test/live-stats/LiveStatsMini.tsx
new file mode 100644
index 000000000000..8479d1d713fc
--- /dev/null
+++ b/frontend/src/ts/components/pages/test/live-stats/LiveStatsMini.tsx
@@ -0,0 +1,58 @@
+import { getConfig } from "../../../../config/store";
+import {
+  getLiveAccText,
+  getLiveBurstText,
+  getLiveSpeedText,
+  getTimerText,
+  isTimerFlashHidden,
+  showLiveStats,
+} from "../../../../states/live-stats";
+import { cn } from "../../../../utils/cn";
+import { AnimeShow } from "../../../common/anime";
+import { liveStatsTextColor } from "./styles";
+
+export function LiveStatsMini() {
+  const isTape = () => getConfig.tapeMode !== "off";
+
+  return (
+    <div class="full-width">
+      <div
+        class={cn("mt-[-1.25em] flex h-0 w-0 gap-[0.5em] leading-[1em]", {
+          "justify-center": isTape(),
+          "justify-start": !isTape(),
+          ...liveStatsTextColor(),
+        })}
+        style={{
+          "font-size": `${getConfig.fontSize}rem`,
+          opacity: getConfig.timerOpacity,
+          "margin-left": isTape() ? `${getConfig.tapeMargin}%` : "-0.25em",
+        }}
+      >
+        <AnimeShow
+          when={
+            showLiveStats() &&
+            ["mini", "flash_mini"].includes(getConfig.timerStyle)
+          }
+        >
+          {/* the fade animates the wrapper opacity, so the flash gate lives on the child */}
+          <div style={{ opacity: isTimerFlashHidden() ? 0 : 1 }}>
+            {getTimerText()}
+          </div>
+        </AnimeShow>
+        <AnimeShow
+          when={showLiveStats() && getConfig.liveSpeedStyle === "mini"}
+        >
+          {getLiveSpeedText()}
+        </AnimeShow>
+        <AnimeShow when={showLiveStats() && getConfig.liveAccStyle === "mini"}>
+          {getLiveAccText()}
+        </AnimeShow>
+        <AnimeShow
+          when={showLiveStats() && getConfig.liveBurstStyle === "mini"}
+        >
+          {getLiveBurstText()}
+        </AnimeShow>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/ts/components/pages/test/live-stats/LiveStatsTextBottom.tsx b/frontend/src/ts/components/pages/test/live-stats/LiveStatsTextBottom.tsx
new file mode 100644
index 000000000000..a614c22e8252
--- /dev/null
+++ b/frontend/src/ts/components/pages/test/live-stats/LiveStatsTextBottom.tsx
@@ -0,0 +1,41 @@
+import { getConfig } from "../../../../config/store";
+import {
+  getLiveAccText,
+  getLiveBurstText,
+  getLiveSpeedText,
+  showLiveStats,
+} from "../../../../states/live-stats";
+import { cn } from "../../../../utils/cn";
+import { AnimeShow } from "../../../common/anime";
+import {
+  TEXT_DISPLAY_CLASS,
+  TEXT_WRAPPER_CLASS,
+  liveStatsTextColor,
+} from "./styles";
+
+export function LiveStatsTextBottom() {
+  return (
+    <div
+      class={cn(TEXT_DISPLAY_CLASS, "mx-auto w-full", liveStatsTextColor())}
+      style={{
+        opacity: getConfig.timerOpacity,
+      }}
+    >
+      <div class={cn(TEXT_WRAPPER_CLASS, "top-4")}>
+        <AnimeShow
+          when={showLiveStats() && getConfig.liveSpeedStyle === "text"}
+        >
+          {getLiveSpeedText()}
+        </AnimeShow>
+        <AnimeShow when={showLiveStats() && getConfig.liveAccStyle === "text"}>
+          {getLiveAccText()}
+        </AnimeShow>
+        <AnimeShow
+          when={showLiveStats() && getConfig.liveBurstStyle === "text"}
+        >
+          {getLiveBurstText()}
+        </AnimeShow>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/ts/components/pages/test/live-stats/LiveStatsTextTop.tsx b/frontend/src/ts/components/pages/test/live-stats/LiveStatsTextTop.tsx
new file mode 100644
index 000000000000..083abfc6015f
--- /dev/null
+++ b/frontend/src/ts/components/pages/test/live-stats/LiveStatsTextTop.tsx
@@ -0,0 +1,40 @@
+import { getConfig } from "../../../../config/store";
+import {
+  getTimerText,
+  isTimerFlashHidden,
+  showLiveStats,
+} from "../../../../states/live-stats";
+import { cn } from "../../../../utils/cn";
+import { AnimeShow } from "../../../common/anime";
+import {
+  TEXT_DISPLAY_CLASS,
+  TEXT_WRAPPER_CLASS,
+  liveStatsTextColor,
+} from "./styles";
+
+export function LiveStatsTextTop() {
+  return (
+    <div
+      class={cn(
+        TEXT_DISPLAY_CLASS,
+        "w-0 justify-self-center",
+        liveStatsTextColor(),
+      )}
+      style={{
+        opacity: getConfig.timerOpacity,
+      }}
+    >
+      <div class={cn(TEXT_WRAPPER_CLASS, "bottom-5")}>
+        <AnimeShow
+          when={
+            showLiveStats() &&
+            ["text", "flash_text"].includes(getConfig.timerStyle)
+          }
+        >
+          {/* flash_text blanks the text instead of fading it, unlike flash_mini */}
+          <div>{isTimerFlashHidden() ? "" : getTimerText()}</div>
+        </AnimeShow>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/ts/components/pages/test/live-stats/styles.tsx b/frontend/src/ts/components/pages/test/live-stats/styles.tsx
new file mode 100644
index 000000000000..720b3c52fff9
--- /dev/null
+++ b/frontend/src/ts/components/pages/test/live-stats/styles.tsx
@@ -0,0 +1,24 @@
+import { getConfig } from "../../../../config/store";
+import { cn } from "../../../../utils/cn";
+
+export const liveStatsTextColor = (): Record<string, boolean> => ({
+  "text-main": getConfig.timerColor === "main",
+  "text-sub": getConfig.timerColor === "sub",
+  "text-text": getConfig.timerColor === "text",
+  "text-[#000000]": getConfig.timerColor === "black",
+});
+
+export const liveStatsBgColor = (): Record<string, boolean> => ({
+  "bg-main": getConfig.timerColor === "main",
+  "bg-sub": getConfig.timerColor === "sub",
+  "bg-text": getConfig.timerColor === "text",
+  "bg-[#000000]": getConfig.timerColor === "black",
+});
+
+export const TEXT_DISPLAY_CLASS = cn(
+  "text-[4rem] sm:text-[6rem] md:text-[7rem] lg:text-[8rem] xl:text-[10rem]",
+  "pointer-events-none relative z-[-1] grid h-0 text-center",
+);
+
+export const TEXT_WRAPPER_CLASS =
+  "absolute flex justify-self-center gap-[0.5ch] leading-none";
diff --git a/frontend/src/ts/constants/themes.ts b/frontend/src/ts/constants/themes.ts
index dc0fcaa3d20a..46c20430052b 100644
--- a/frontend/src/ts/constants/themes.ts
+++ b/frontend/src/ts/constants/themes.ts
@@ -937,7 +937,6 @@ export const themes: Record<ThemeName, Theme> = {
     errorExtra: "#791717",
     colorfulError: "#da3333",
     colorfulErrorExtra: "#791717",
-    hasCss: true,
   },
   iceberg_dark: {
     bg: "#161821",
@@ -1182,7 +1181,6 @@ export const themes: Record<ThemeName, Theme> = {
     errorExtra: "#791717",
     colorfulError: "#da3333",
     colorfulErrorExtra: "#791717",
-    hasCss: true,
   },
   menthol: {
     bg: "#00c18c",
diff --git a/frontend/src/ts/controllers/route-controller.ts b/frontend/src/ts/controllers/route-controller.ts
index dc9b533426c9..f49ca5dcf46d 100644
--- a/frontend/src/ts/controllers/route-controller.ts
+++ b/frontend/src/ts/controllers/route-controller.ts
@@ -7,7 +7,7 @@ import * as TestState from "../test/test-state";
 import { showNoticeNotification } from "../states/notifications";
 import { navigationEvent, type NavigateOptions } from "../events/navigation";
 import { authEvent } from "../events/auth";
-import { isTestActive } from "../states/test";
+import { isResultCalculating, isTestActive } from "../states/test";
 
 //source: https://www.youtube.com/watch?v=OstALBk-jTc
 // https://www.youtube.com/watch?v=OstALBk-jTc
@@ -162,16 +162,12 @@ export async function navigate(
 ): Promise<void> {
   if (
     !options.force &&
-    (TestState.testRestarting ||
-      TestState.resultCalculating ||
-      PageTransition.get())
+    (TestState.testRestarting || isResultCalculating() || PageTransition.get())
   ) {
     console.debug(
       `navigate: ${url} ignored, page is busy (testRestarting: ${
         TestState.testRestarting
-      }, resultCalculating: ${
-        TestState.resultCalculating
-      }, pageTransition: ${PageTransition.get()})`,
+      }, resultCalculating: ${isResultCalculating()}, pageTransition: ${PageTransition.get()})`,
     );
     return;
   }
diff --git a/frontend/src/ts/input/handlers/before-delete.ts b/frontend/src/ts/input/handlers/before-delete.ts
index 0a7d840da133..06477cd79ddf 100644
--- a/frontend/src/ts/input/handlers/before-delete.ts
+++ b/frontend/src/ts/input/handlers/before-delete.ts
@@ -5,7 +5,11 @@ import { getInputElementValue } from "../input-element";
 import * as TestUI from "../../test/test-ui";
 import { isAwaitingNextWord } from "../state";
 import { getInputForWord } from "../../test/events/data";
-import { getActiveWordIndex, isTestActive } from "../../states/test";
+import {
+  getActiveWordIndex,
+  isResultCalculating,
+  isTestActive,
+} from "../../states/test";
 
 export function onBeforeDelete(event: InputEvent): void {
   if (!isTestActive()) {
@@ -20,7 +24,7 @@ export function onBeforeDelete(event: InputEvent): void {
     event.preventDefault();
     return;
   }
-  if (TestState.resultCalculating) {
+  if (isResultCalculating()) {
     event.preventDefault();
     return;
   }
diff --git a/frontend/src/ts/input/handlers/before-insert-text.ts b/frontend/src/ts/input/handlers/before-insert-text.ts
index c383e67a30d8..400a27603cba 100644
--- a/frontend/src/ts/input/handlers/before-insert-text.ts
+++ b/frontend/src/ts/input/handlers/before-insert-text.ts
@@ -6,7 +6,11 @@ import { isFunboxActiveWithProperty } from "../../test/funbox/list";
 import { getInputElementValue } from "../input-element";
 import { isAwaitingNextWord } from "../state";
 import * as SlowTimer from "../../legacy-states/slow-timer";
-import { getActiveWordIndex, wordsHaveNewline } from "../../states/test";
+import {
+  getActiveWordIndex,
+  isResultCalculating,
+  wordsHaveNewline,
+} from "../../states/test";
 import { shouldGoToNextWord } from "../helpers/validation";
 import { getCommitCharacterType, normalizeData } from "../helpers/util";
 import { getCurrentInput } from "../../test/events/data";
@@ -26,7 +30,7 @@ export function onBeforeInsertText(data: string): boolean {
     return true;
   }
 
-  if (TestState.resultCalculating) {
+  if (isResultCalculating()) {
     return true;
   }
 
diff --git a/frontend/src/ts/input/handlers/keydown.ts b/frontend/src/ts/input/handlers/keydown.ts
index bc6ce4fbfcee..09f82c8c36b9 100644
--- a/frontend/src/ts/input/handlers/keydown.ts
+++ b/frontend/src/ts/input/handlers/keydown.ts
@@ -2,7 +2,6 @@ import { Config } from "../../config/store";
 import * as TestLogic from "../../test/test-logic";
 import { getCharFromEvent } from "../../test/layout-emulator";
 import { emulateInsertText } from "./insert-text";
-import * as TestState from "../../test/test-state";
 import {
   showNoticeNotification,
   showErrorNotification,
@@ -18,7 +17,7 @@ import {
 } from "../state";
 import { getActiveFunboxesWithFunction } from "../../test/funbox/list";
 import { Keycode } from "../../constants/keys";
-import { __nonReactive, wordsHaveTab } from "../../states/test";
+import { __nonReactive, setBailedOut, wordsHaveTab } from "../../states/test";
 
 import { getCustomTextIndicator } from "../../states/core";
 import { logTestEvent } from "../../test/events/data";
@@ -64,7 +63,7 @@ export async function handleEnter(
         e.preventDefault();
         return;
       } else {
-        TestState.setBailedOut(true);
+        setBailedOut(true);
         void TestLogic.finish();
         return;
       }
diff --git a/frontend/src/ts/input/listeners/composition.ts b/frontend/src/ts/input/listeners/composition.ts
index d2d76a15c2c1..13132c2496c4 100644
--- a/frontend/src/ts/input/listeners/composition.ts
+++ b/frontend/src/ts/input/listeners/composition.ts
@@ -7,6 +7,7 @@ import { onInsertText } from "../handlers/insert-text";
 import { logTestEvent } from "../../test/events/data";
 import {
   getActiveWordIndex,
+  isResultCalculating,
   isTestActive,
   setCompositionText,
 } from "../../states/test";
@@ -21,7 +22,7 @@ inputEl.addEventListener("compositionstart", (event) => {
 
   const now = performance.now();
 
-  if (TestState.testRestarting || TestState.resultCalculating) return;
+  if (TestState.testRestarting || isResultCalculating()) return;
   CompositionState.setComposing(true);
   CompositionState.setData("");
   setLastInsertCompositionTextData("");
@@ -41,7 +42,7 @@ inputEl.addEventListener("compositionupdate", (event) => {
     data: event.data,
   });
 
-  if (TestState.testRestarting || TestState.resultCalculating) return;
+  if (TestState.testRestarting || isResultCalculating()) return;
   CompositionState.setData(event.data);
   setCompositionText(event.data);
 
@@ -57,7 +58,7 @@ inputEl.addEventListener("compositionupdate", (event) => {
 inputEl.addEventListener("compositionend", async (event) => {
   console.debug("wordsInput event compositionend", { event, data: event.data });
 
-  if (TestState.testRestarting || TestState.resultCalculating) return;
+  if (TestState.testRestarting || isResultCalculating()) return;
   CompositionState.setComposing(false);
   CompositionState.setData("");
   setCompositionText("");
diff --git a/frontend/src/ts/input/listeners/input.ts b/frontend/src/ts/input/listeners/input.ts
index 0e34ba2edff9..e764708e570d 100644
--- a/frontend/src/ts/input/listeners/input.ts
+++ b/frontend/src/ts/input/listeners/input.ts
@@ -12,7 +12,7 @@ import { onBeforeDelete } from "../handlers/before-delete";
 import * as TestWords from "../../test/test-words";
 import * as CompositionState from "../../legacy-states/composition";
 import * as TestState from "../../test/test-state";
-import { getActiveWordIndex } from "../../states/test";
+import { getActiveWordIndex, isResultCalculating } from "../../states/test";
 import { getCurrentInput } from "../../test/events/data";
 import { areAllWordsGenerated } from "../../test/words-generator";
 
@@ -96,7 +96,7 @@ inputEl.addEventListener("input", async (event) => {
   }
 
   // just in case before input doesn't catch this
-  if (TestState.resultCalculating || TestState.testRestarting) return;
+  if (isResultCalculating() || TestState.testRestarting) return;
 
   const now = performance.now();
 
diff --git a/frontend/src/ts/states/live-stats.ts b/frontend/src/ts/states/live-stats.ts
new file mode 100644
index 000000000000..37c218889a0b
--- /dev/null
+++ b/frontend/src/ts/states/live-stats.ts
@@ -0,0 +1,131 @@
+import { createMemo } from "solid-js";
+
+import { getConfig } from "../config/store";
+import Format from "../singletons/format";
+import * as CustomText from "../test/custom-text";
+import * as TestWords from "../test/test-words";
+import { secondsToString } from "../utils/date-and-time";
+import {
+  currentLiveStats,
+  getActiveWordIndex,
+  getBailedOut,
+  getCurrentQuote,
+  getFocus,
+  isResultCalculating,
+  isTestActive,
+} from "./test";
+
+/** Whether this test counts down a time limit rather than a number of words. */
+function isTimeLimitedTest(): boolean {
+  return (
+    getConfig.mode === "time" ||
+    (getConfig.mode === "custom" && CustomText.getLimitMode() === "time")
+  );
+}
+
+/** Seconds the test counts down from. Only meaningful when {@link isTimeLimitedTest}. */
+function getTestTimeLimit(): number {
+  return getConfig.mode === "custom"
+    ? CustomText.getLimitValue()
+    : getConfig.time;
+}
+
+/**
+ * Words completed so far. Derived from the activeWordIndex signal, so it must be
+ * read inside a computation — never snapshotted into the store, since the input
+ * handlers advance the index *after* the live stat updates run.
+ */
+function getCurrentWordCount(): number {
+  if (getConfig.mode === "custom" && CustomText.getLimitMode() === "section") {
+    const sectionIndex =
+      TestWords.words.get(getActiveWordIndex())?.sectionIndex;
+    return sectionIndex === undefined ? 0 : sectionIndex - 1;
+  }
+  return getActiveWordIndex();
+}
+
+function getWordsTotal(): number {
+  if (getConfig.mode === "words") return getConfig.words;
+  if (getConfig.mode === "custom") return CustomText.getLimitValue();
+  if (getConfig.mode === "quote") {
+    return getCurrentQuote()?.textSplit.length ?? 1;
+  }
+  return TestWords.words.length;
+}
+
+export function getBarTarget(): {
+  width: string;
+  duration: number;
+  ease?: string;
+} {
+  if (isTimeLimitedTest()) {
+    const { seconds } = currentLiveStats;
+    const limit = getTestTimeLimit();
+    if (seconds === undefined || limit === 0) {
+      return { width: "100vw", duration: 0 };
+    }
+    return {
+      width: `${100 - ((seconds + 1) / limit) * 100}vw`,
+      duration: 1000,
+      ease: "linear",
+    };
+  }
+  const wordsTotal = getWordsTotal();
+  // no elapsed time means the test was reset, so snap back instead of animating
+  if (currentLiveStats.seconds === undefined || wordsTotal === 0) {
+    return { width: "0vw", duration: 0 };
+  }
+  // the active word index stops on the last word instead of going one past it,
+  // so the word count alone tops out at (n-1)/n — fill the bar on finish.
+  // isResultCalculating flips on the first line of finish(); getResultVisible
+  // would be a fade-out too late, since the bar outlives the words fading out.
+  if (isResultCalculating() && !getBailedOut()) {
+    return { width: "100vw", duration: 125 };
+  }
+  return {
+    width: `${Math.floor((getCurrentWordCount() / wordsTotal) * 100)}vw`,
+    duration: 250,
+  };
+}
+
+export const showLiveStats = createMemo(() => isTestActive() && getFocus());
+export const getLiveSpeedText = createMemo(() =>
+  Format.typingSpeed(
+    (getConfig.blindMode ? currentLiveStats.raw : currentLiveStats.wpm) ?? 0,
+    { showDecimalPlaces: false },
+  ),
+);
+export const getLiveAccText = createMemo(
+  () =>
+    `${getConfig.blindMode ? 100 : Math.floor(currentLiveStats.acc ?? 100)}%`,
+);
+export const getLiveBurstText = createMemo(() =>
+  Format.typingSpeed(currentLiveStats.burst ?? 0, { showDecimalPlaces: false }),
+);
+
+/** Countdown / word counter shown by the timer displays. */
+export const getTimerText = createMemo(() => {
+  if (isTimeLimitedTest()) {
+    const limit = getTestTimeLimit();
+    const seconds = currentLiveStats.seconds ?? 0;
+    return secondsToString(limit === 0 ? seconds : limit - seconds);
+  }
+  // read the signal first so the memo subscribes to it on every branch below
+  const wordCount = getCurrentWordCount();
+  const wordsTotal = getWordsTotal();
+  if (getConfig.mode === "zen" || wordsTotal === 0) {
+    return `${getActiveWordIndex()}`;
+  }
+  return `${wordCount}/${wordsTotal}`;
+});
+/**
+ * The flash timer styles only reveal the time every 15 seconds. Only the flash
+ * styles hide, and only on time limited tests — a word counter is always shown.
+ */
+export const isTimerFlashHidden = createMemo(() => {
+  const isFlashStyle =
+    getConfig.timerStyle === "flash_mini" ||
+    getConfig.timerStyle === "flash_text";
+  if (!isFlashStyle || !isTimeLimitedTest()) return false;
+  return (getTestTimeLimit() - (currentLiveStats.seconds ?? 0)) % 15 !== 0;
+});
diff --git a/frontend/src/ts/states/test.ts b/frontend/src/ts/states/test.ts
index 360ac4325146..e87d6d0afee7 100644
--- a/frontend/src/ts/states/test.ts
+++ b/frontend/src/ts/states/test.ts
@@ -7,7 +7,7 @@ import { CompletedEvent, IncompleteTest } from "@monkeytype/schemas/results";
 import { createStore } from "solid-js/store";
 import { keymapEvent } from "../events/keymap";
 import { createSignalWithSetters } from "../hooks/createSignalWithSetters";
-import { getData as getCustomTextData } from "../test/custom-text";
+import * as CustomText from "../test/custom-text";
 import { QuoteWithTextSplit } from "../types/quotes";
 import { getLayout } from "../utils/json-data";
 import { mirrorLayoutKeys } from "../utils/key-converter";
@@ -24,6 +24,11 @@ export const [wordsHaveNumbers, setWordsHaveNumbers] = createSignal(false);
 export const [getLoadedChallenge, setLoadedChallenge] =
   createSignal<Challenge | null>(null);
 export const [getResultVisible, setResultVisible] = createSignal(false);
+// True from the first line of TestLogic.finish() until the result is built, so
+// it covers the words fade-out that getResultVisible() is still false during.
+export const [isResultCalculating, setResultCalculating] = createSignal(false);
+// Set when the user bails out of a test early; reset by TestLogic.restart().
+export const [getBailedOut, setBailedOut] = createSignal(false);
 export const [getFocus, setFocus] = createSignal(false);
 // #words is still vanilla so it's blurred imperatively (see test/test-ui);
 // the Solid-owned composition display + OutOfFocusWarning read this signal.
@@ -99,13 +104,20 @@ export const [
   decrease: (set) => set((n) => n - 1),
   reset: (set) => set(0),
 });
+
+/**
+ * Live test stats, rendered by the Solid live stat displays (the mini and text
+ * variants and the progress bar). The test engine is still vanilla, so it pushes
+ * plain numbers in here as it goes; everything shown on screen is derived below.
+ * `undefined` means "no data yet" and is what the displays fall back to defaults on.
+ */
 export const [currentLiveStats, setCurrentLiveStats] = createStore<{
   wpm?: number;
   acc?: number;
   raw?: number;
+  burst?: number;
+  seconds?: number;
 }>({});
-export const resetCurrentLiveStats = (): void =>
-  setCurrentLiveStats({ wpm: undefined, acc: undefined, raw: undefined });
 
 createEffect(() => {
   getActivePage(); // depend on active page
@@ -114,7 +126,7 @@ createEffect(() => {
       getConfig.mode,
       getConfig.words,
       getConfig.time,
-      getCustomTextData(),
+      CustomText.getData(),
       getCustomTextIndicator()?.isLong ?? false,
     ),
   );
diff --git a/frontend/src/ts/test/events/data.ts b/frontend/src/ts/test/events/data.ts
index 4423fc6f3674..5e393977e8ac 100644
--- a/frontend/src/ts/test/events/data.ts
+++ b/frontend/src/ts/test/events/data.ts
@@ -20,12 +20,17 @@ import { getEventsForWord, getInputFromDom, keysToTrack } from "./helpers";
 import { recordEventForCache, resetLiveCache } from "./live-cache";
 import { Keycode } from "../../constants/keys";
 import { isSafeNumber, mean, roundTo2 } from "@monkeytype/util/numbers";
-import { bailedOut, koreanStatus, resultCalculating } from "../test-state";
+import { koreanStatus } from "../test-state";
 import * as TestWords from "../test-words";
 import { Config } from "../../config/store";
 import * as CustomText from "../../test/custom-text";
 import { getMode2 } from "../../utils/misc";
-import { getActiveWordIndex, getCurrentQuote } from "../../states/test";
+import {
+  getActiveWordIndex,
+  getCurrentQuote,
+  getBailedOut,
+  isResultCalculating,
+} from "../../states/test";
 import { isFunboxActiveWithProperty } from "../funbox/active";
 
 export function buildEventLog(): EventLog {
@@ -34,7 +39,7 @@ export function buildEventLog(): EventLog {
     mode: Config.mode,
     mode2: getMode2(Config, getCurrentQuote()),
     koreanStatus: koreanStatus,
-    bailedOut: bailedOut,
+    bailedOut: getBailedOut(),
     ...(Config.mode === "custom" && {
       customTextLimitMode: CustomText.getLimit().mode,
       customTextLimitValue: CustomText.getLimit().value,
@@ -106,7 +111,7 @@ export function logTestEvent(
       });
     }
 
-    if (resultCalculating) {
+    if (isResultCalculating()) {
       return;
     }
 
diff --git a/frontend/src/ts/test/focus.ts b/frontend/src/ts/test/focus.ts
index e72c29b54c21..d7c93b79e964 100644
--- a/frontend/src/ts/test/focus.ts
+++ b/frontend/src/ts/test/focus.ts
@@ -1,8 +1,4 @@
 import * as Caret from "./caret";
-import * as LiveSpeed from "./live-speed";
-import * as LiveBurst from "./live-burst";
-import * as LiveAcc from "./live-acc";
-import * as TimerProgress from "./timer-progress";
 import * as PageTransition from "../legacy-states/page-transition";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import { getFocus, setFocus } from "../states/test";
@@ -55,10 +51,6 @@ export function set(value: boolean, withCursor = false): void {
       }
 
       Caret.stopAnimation();
-      LiveSpeed.show();
-      LiveBurst.show();
-      LiveAcc.show();
-      TimerProgress.show();
     } else if (!value && getFocus()) {
       setFocus(false);
 
@@ -70,10 +62,6 @@ export function set(value: boolean, withCursor = false): void {
       }
 
       Caret.startAnimation();
-      LiveSpeed.hide();
-      LiveBurst.hide();
-      LiveAcc.hide();
-      TimerProgress.hide();
     }
   });
 }
diff --git a/frontend/src/ts/test/live-acc.ts b/frontend/src/ts/test/live-acc.ts
deleted file mode 100644
index db091352ae06..000000000000
--- a/frontend/src/ts/test/live-acc.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { Config } from "../config/store";
-import { configEvent } from "../events/config";
-import { applyReducedMotion } from "../utils/misc";
-import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
-import { qs } from "../utils/dom";
-import { isTestActive } from "../states/test";
-
-const textEl = qs("#liveStatsTextBottom .liveAcc");
-const miniEl = qs("#liveStatsMini .acc");
-
-export function update(acc: number): void {
-  requestDebouncedAnimationFrame("live-acc.update", () => {
-    let number = Math.floor(acc);
-    if (Config.blindMode) {
-      number = 100;
-    }
-    miniEl?.setHtml(`${number}%`);
-    textEl?.setHtml(`${number}%`);
-  });
-}
-
-export function reset(): void {
-  requestDebouncedAnimationFrame("live-acc.reset", () => {
-    miniEl?.setHtml("100%");
-    textEl?.setHtml("100%");
-  });
-}
-
-let state = false;
-
-export function show(): void {
-  if (Config.liveAccStyle === "off") return;
-  if (!isTestActive()) return;
-  if (state) return;
-  requestDebouncedAnimationFrame("live-acc.show", () => {
-    if (Config.liveAccStyle === "mini") {
-      miniEl?.show();
-      miniEl?.animate({
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-      });
-    } else {
-      textEl?.show();
-      textEl?.animate({
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-      });
-    }
-    state = true;
-  });
-}
-
-export function hide(): void {
-  if (!state) return;
-  requestDebouncedAnimationFrame("live-acc.hide", () => {
-    textEl?.animate({
-      opacity: [1, 0],
-      duration: applyReducedMotion(125),
-      onComplete: () => {
-        textEl?.hide();
-      },
-    });
-    miniEl?.animate({
-      opacity: [1, 0],
-      duration: applyReducedMotion(125),
-      onComplete: () => {
-        miniEl?.hide();
-      },
-    });
-    state = false;
-  });
-}
-
-export function instantHide(): void {
-  if (!state) return;
-
-  textEl?.hide();
-  textEl?.setStyle({ opacity: "0" });
-  miniEl?.hide();
-  miniEl?.setStyle({ opacity: "0" });
-
-  state = false;
-}
-
-configEvent.subscribe(({ key, newValue }) => {
-  if (key === "liveAccStyle") newValue === "off" ? hide() : show();
-});
diff --git a/frontend/src/ts/test/live-burst.ts b/frontend/src/ts/test/live-burst.ts
deleted file mode 100644
index 8f3d79cc0f50..000000000000
--- a/frontend/src/ts/test/live-burst.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Config } from "../config/store";
-import { configEvent } from "../events/config";
-import Format from "../singletons/format";
-import { applyReducedMotion } from "../utils/misc";
-import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
-import { qs } from "../utils/dom";
-import { isTestActive } from "../states/test";
-
-const textEl = qs("#liveStatsTextBottom .liveBurst");
-const miniEl = qs("#liveStatsMini .burst");
-
-export function reset(): void {
-  requestDebouncedAnimationFrame("live-burst.reset", () => {
-    textEl?.setHtml("0");
-    miniEl?.setHtml("0");
-  });
-}
-
-export async function update(burst: number): Promise<void> {
-  requestDebouncedAnimationFrame("live-burst.update", () => {
-    const burstText = Format.typingSpeed(burst, { showDecimalPlaces: false });
-    miniEl?.setHtml(burstText);
-    textEl?.setHtml(burstText);
-  });
-}
-
-let state = false;
-
-export function show(): void {
-  if (Config.liveBurstStyle === "off") return;
-  if (!isTestActive()) return;
-  if (state) return;
-  requestDebouncedAnimationFrame("live-burst.show", () => {
-    if (Config.liveBurstStyle === "mini") {
-      miniEl?.show();
-      miniEl?.animate({
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-      });
-    } else {
-      textEl?.show();
-      textEl?.animate({
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-      });
-    }
-    state = true;
-  });
-}
-
-export function hide(): void {
-  if (!state) return;
-  requestDebouncedAnimationFrame("live-burst.hide", () => {
-    textEl?.animate({
-      opacity: [1, 0],
-      duration: applyReducedMotion(125),
-      onComplete: () => {
-        textEl?.hide();
-      },
-    });
-    miniEl?.animate({
-      opacity: [1, 0],
-      duration: applyReducedMotion(125),
-      onComplete: () => {
-        miniEl?.hide();
-      },
-    });
-    state = false;
-  });
-}
-
-export function instantHide(): void {
-  if (!state) return;
-
-  textEl?.hide();
-  textEl?.setStyle({ opacity: "0" });
-  miniEl?.hide();
-  miniEl?.setStyle({ opacity: "0" });
-
-  state = false;
-}
-
-configEvent.subscribe(({ key, newValue }) => {
-  if (key === "liveBurstStyle") newValue === "off" ? hide() : show();
-});
diff --git a/frontend/src/ts/test/live-speed.ts b/frontend/src/ts/test/live-speed.ts
deleted file mode 100644
index 1016c399ee8d..000000000000
--- a/frontend/src/ts/test/live-speed.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { Config } from "../config/store";
-import { configEvent } from "../events/config";
-import Format from "../singletons/format";
-import { applyReducedMotion } from "../utils/misc";
-import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
-import { qs } from "../utils/dom";
-import { isTestActive } from "../states/test";
-
-const textElement = qs("#liveStatsTextBottom .liveSpeed");
-const miniElement = qs("#liveStatsMini .speed");
-
-export function reset(): void {
-  requestDebouncedAnimationFrame("live-speed.reset", () => {
-    textElement?.setHtml("0");
-    miniElement?.setHtml("0");
-  });
-}
-
-export function update(wpm: number, raw: number): void {
-  requestDebouncedAnimationFrame("live-speed.update", () => {
-    let number = wpm;
-    if (Config.blindMode) {
-      number = raw;
-    }
-    const numberText = Format.typingSpeed(number, { showDecimalPlaces: false });
-    textElement?.setHtml(numberText);
-    miniElement?.setHtml(numberText);
-  });
-}
-
-let state = false;
-
-export function show(): void {
-  if (Config.liveSpeedStyle === "off") return;
-  if (!isTestActive()) return;
-  if (state) return;
-  requestDebouncedAnimationFrame("live-speed.show", () => {
-    if (Config.liveSpeedStyle === "mini") {
-      miniElement?.show();
-      miniElement?.animate({
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-      });
-    } else {
-      textElement?.show();
-      textElement?.animate({
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-      });
-    }
-    state = true;
-  });
-}
-
-export function hide(): void {
-  if (!state) return;
-  requestDebouncedAnimationFrame("live-speed.hide", () => {
-    miniElement?.animate({
-      opacity: [1, 0],
-      duration: applyReducedMotion(125),
-      onComplete: () => {
-        miniElement?.hide();
-      },
-    });
-    textElement?.animate({
-      opacity: [1, 0],
-      duration: applyReducedMotion(125),
-      onComplete: () => {
-        textElement?.hide();
-      },
-    });
-    state = false;
-  });
-}
-
-export function instantHide(): void {
-  if (!state) return;
-  miniElement?.hide();
-  miniElement?.setStyle({ opacity: "0" });
-  textElement?.hide();
-  textElement?.setStyle({ opacity: "0" });
-  state = false;
-}
-
-configEvent.subscribe(({ key, newValue }) => {
-  if (key === "liveSpeedStyle") newValue === "off" ? hide() : show();
-});
diff --git a/frontend/src/ts/test/result.ts b/frontend/src/ts/test/result.ts
index 27a98d5d9e88..138afb25c73b 100644
--- a/frontend/src/ts/test/result.ts
+++ b/frontend/src/ts/test/result.ts
@@ -57,7 +57,11 @@ import { blurInputElement } from "../input/input-element";
 import * as ConnectionState from "../legacy-states/connection";
 import { qs, qsa } from "../utils/dom";
 import { getTheme } from "../states/theme";
-import { getCurrentQuote, isTestInvalid } from "../states/test";
+import {
+  getCurrentQuote,
+  isTestInvalid,
+  setResultCalculating,
+} from "../states/test";
 import {
   getAccuracy,
   getRawHistory,
@@ -1100,7 +1104,7 @@ export async function update(
 
   Misc.scrollToCenterOrTop(resultEl?.native ?? null);
   void AdController.renderResult();
-  TestState.setResultCalculating(false);
+  setResultCalculating(false);
   qs("#words")?.empty();
   ChartController.result.resize();
 }
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index 4a6810c9afb2..a635e85f05fb 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@@ -43,7 +43,11 @@ import {
   setLastResult,
   getActiveWordIndex,
   resetActiveWordIndex,
+  getBailedOut,
+  isResultCalculating,
+  setBailedOut,
   setLastSignedOutResult,
+  setResultCalculating,
   setResultVisible,
   setTestActive,
   setWordsHaveNewline,
@@ -191,7 +195,7 @@ export function restart(options = {} as RestartOptions): void {
     return;
   }
 
-  if (TestState.testRestarting || TestState.resultCalculating) {
+  if (TestState.testRestarting || isResultCalculating()) {
     options.event?.preventDefault();
     return;
   }
@@ -287,7 +291,7 @@ export function restart(options = {} as RestartOptions): void {
   Caret.hide();
   setTestActive(false);
   Replay.pauseReplay();
-  TestState.setBailedOut(false);
+  setBailedOut(false);
   Caret.resetPosition();
   PaceCaret.reset();
   TestState.setKoreanStatus(false);
@@ -805,7 +809,7 @@ function buildCompletedEvent(
     timestamp: Date.now(),
     mode: Config.mode,
     mode2: Misc.getMode2(Config, currentQuote),
-    bailedOut: TestState.bailedOut,
+    bailedOut: getBailedOut(),
     funbox: Config.funbox,
     difficulty: Config.difficulty,
     blindMode: Config.blindMode,
@@ -833,7 +837,7 @@ function buildCompletedEvent(
 
 export async function finish(difficultyFailed = false): Promise<void> {
   if (!isTestActive()) return;
-  TestState.setResultCalculating(true);
+  setResultCalculating(true);
   const now = performance.now();
   TestTimer.clear(true, now);
 
@@ -908,7 +912,7 @@ export async function finish(difficultyFailed = false): Promise<void> {
   let afkDetected = getKeypressesPerSecond(eventLog)
     .slice(-5)
     .every((kps) => kps === 0);
-  if (TestState.bailedOut) afkDetected = false;
+  if (getBailedOut()) afkDetected = false;
 
   const mode2Number = parseInt(completedEvent.mode2);
 
@@ -917,7 +921,7 @@ export async function finish(difficultyFailed = false): Promise<void> {
   const dateDur = getDateBasedTestDurationMs(eventLog) / 1000;
   if (
     Config.mode === "time" &&
-    !TestState.bailedOut &&
+    !getBailedOut() &&
     (ce.testDuration < dateDur - 0.1 || ce.testDuration > dateDur + 0.1) &&
     ce.testDuration <= 120
   ) {
@@ -1012,7 +1016,7 @@ export async function finish(difficultyFailed = false): Promise<void> {
   if (Config.mode === "custom" && customTextName !== "" && isLong) {
     // Let's update the custom text progress
     if (
-      TestState.bailedOut ||
+      getBailedOut() ||
       getInputHistory(eventLog).length < TestWords.words.length
     ) {
       // They bailed out
@@ -1283,7 +1287,7 @@ qs(".pageTest")?.onChild("click", "#testInitFailed button.restart", () => {
 });
 
 qs(".pageTest")?.onChild("click", "#restartTestButton", () => {
-  if (TestState.resultCalculating) return;
+  if (isResultCalculating()) return;
   if (
     isTestActive() &&
     Config.repeatQuotes === "typing" &&
diff --git a/frontend/src/ts/test/test-state.ts b/frontend/src/ts/test/test-state.ts
index 5d7495684151..145279ed0ca1 100644
--- a/frontend/src/ts/test/test-state.ts
+++ b/frontend/src/ts/test/test-state.ts
@@ -1,7 +1,6 @@
 import { promiseWithResolvers } from "../utils/misc";
 import { EventLog } from "./events/types";
 
-export let bailedOut = false;
 export let selectedQuoteId =
   parseInt(localStorage.getItem("selectedQuoteId") ?? "1", 10) || 1;
 export let testInitSuccess = true;
@@ -9,7 +8,6 @@ export let isLanguageRightToLeft = false;
 export let isDirectionReversed = false;
 export let testRestarting = false;
 export let resultVisible = false;
-export let resultCalculating = false;
 export let koreanStatus = false;
 export let lastEventLog: EventLog | null = null;
 
@@ -21,10 +19,6 @@ export function setKoreanStatus(val: boolean): void {
   koreanStatus = val;
 }
 
-export function setBailedOut(tf: boolean): void {
-  bailedOut = tf;
-}
-
 export function setSelectedQuoteId(id: number): void {
   selectedQuoteId = id;
   localStorage.setItem("selectedQuoteId", id.toString());
@@ -62,7 +56,3 @@ export function setTestRestarting(val: boolean): void {
 export function setResultVisible(val: boolean): void {
   resultVisible = val;
 }
-
-export function setResultCalculating(val: boolean): void {
-  resultCalculating = val;
-}
diff --git a/frontend/src/ts/test/test-timer.ts b/frontend/src/ts/test/test-timer.ts
index 86a93399377f..c53ecd44b2b8 100644
--- a/frontend/src/ts/test/test-timer.ts
+++ b/frontend/src/ts/test/test-timer.ts
@@ -4,8 +4,6 @@
 import { Config } from "../config/store";
 import { setConfig } from "../config/setters";
 import * as CustomText from "./custom-text";
-import * as TimerProgress from "./timer-progress";
-import * as LiveSpeed from "./live-speed";
 import * as TestWords from "./test-words";
 import {
   showNoticeNotification,
@@ -317,10 +315,12 @@ function timerStep(now: number, catchingUp: boolean): void {
       premid(testTime);
     });
 
-    // already using raf
-    TimerProgress.update();
-    LiveSpeed.update(wpmAndRaw.wpm, wpmAndRaw.raw);
-    setCurrentLiveStats({ wpm: wpmAndRaw.wpm, acc, raw: wpmAndRaw.raw });
+    setCurrentLiveStats({
+      wpm: wpmAndRaw.wpm,
+      acc,
+      raw: wpmAndRaw.raw,
+      seconds: getLiveCachedTestSeconds(now),
+    });
 
     //logic
     if (Config.playTimeWarning !== "off") playTimeWarning(testTime);
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index adaca6fc7e04..274edeb41915 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -20,7 +20,6 @@ import * as Hangul from "hangul-js";
 import * as ResultWordHighlight from "../elements/result-word-highlight";
 import { getActivePage } from "../states/core";
 import Format from "../singletons/format";
-import { TimerColor, TimerOpacity } from "@monkeytype/schemas/configs";
 import { convertRemToPixels } from "../utils/numbers";
 import { findSingleActiveFunboxWithFunction } from "./funbox/list";
 import * as TestState from "./test-state";
@@ -32,11 +31,7 @@ import {
 import * as SoundController from "../controllers/sound-controller";
 import * as Numbers from "@monkeytype/util/numbers";
 import { highlight } from "../events/keymap";
-import * as LiveAcc from "./live-acc";
 import * as Focus from "../test/focus";
-import * as TimerProgress from "../test/timer-progress";
-import * as LiveBurst from "./live-burst";
-import * as LiveSpeed from "./live-speed";
 import {
   blurInputElement,
   focusInputElement,
@@ -63,8 +58,8 @@ import {
   getActiveWordIndex,
   getCurrentQuote,
   isTestActive,
-  resetCurrentLiveStats,
   setCompositionText,
+  setCurrentLiveStats,
   setOutOfFocusMaxHeight,
   wordsHaveNewline,
   setTestFocusState,
@@ -464,7 +459,7 @@ function updateWordWrapperClasses(): void {
     wordsEl.removeClass("colorfulMode");
   }
 
-  qsa("#caret, #paceCaret, #liveStatsMini, #typingTest, #wordsInput").setStyle({
+  qsa("#caret, #paceCaret, #typingTest, #wordsInput").setStyle({
     fontSize: `${Config.fontSize}rem`,
   });
 
@@ -1628,63 +1623,6 @@ function updateWordsWidth(): void {
   }
 }
 
-function updateLiveStatsMargin(): void {
-  if (Config.tapeMode === "off") {
-    qs("#liveStatsMini")?.setStyle({
-      justifyContent: "start",
-      marginLeft: "0.25em",
-    });
-  } else {
-    qs("#liveStatsMini")?.setStyle({
-      justifyContent: "center",
-      marginLeft: `${Config.tapeMargin}%`,
-    });
-  }
-}
-
-function updateLiveStatsOpacity(value: TimerOpacity): void {
-  qs("#barTimerProgress")?.setStyle({ opacity: value });
-  qs("#liveStatsTextTop")?.setStyle({ opacity: value });
-  qs("#liveStatsTextBottom")?.setStyle({
-    opacity: value,
-  });
-  qs("#liveStatsMini")?.setStyle({ opacity: value });
-}
-
-function updateLiveStatsColor(value: TimerColor): void {
-  qs("#barTimerProgress")?.removeClass("timerSub");
-  qs("#barTimerProgress")?.removeClass("timerText");
-  qs("#barTimerProgress")?.removeClass("timerMain");
-
-  qs("#liveStatsTextTop")?.removeClass("timerSub");
-  qs("#liveStatsTextTop")?.removeClass("timerText");
-  qs("#liveStatsTextTop")?.removeClass("timerMain");
-  qs("#liveStatsTextBottom")?.removeClass("timerSub");
-  qs("#liveStatsTextBottom")?.removeClass("timerText");
-  qs("#liveStatsTextBottom")?.removeClass("timerMain");
-
-  qs("#liveStatsMini")?.removeClass("timerSub");
-  qs("#liveStatsMini")?.removeClass("timerText");
-  qs("#liveStatsMini")?.removeClass("timerMain");
-
-  if (value === "main") {
-    qs("#barTimerProgress")?.addClass("timerMain");
-    qs("#liveStatsTextTop")?.addClass("timerMain");
-    qs("#liveStatsTextBottom")?.addClass("timerMain");
-    qs("#liveStatsMini")?.addClass("timerMain");
-  } else if (value === "sub") {
-    qs("#barTimerProgress")?.addClass("timerSub");
-    qs("#liveStatsTextTop")?.addClass("timerSub");
-    qs("#liveStatsTextBottom")?.addClass("timerSub");
-    qs("#liveStatsMini")?.addClass("timerSub");
-  } else if (value === "text") {
-    qs("#barTimerProgress")?.addClass("timerText");
-    qs("#liveStatsTextTop")?.addClass("timerText");
-    qs("#liveStatsTextBottom")?.addClass("timerText");
-    qs("#liveStatsMini")?.addClass("timerText");
-  }
-}
-
 function showHideTestRestartButton(showHide: boolean): void {
   if (showHide) {
     qs(".pageTest #restartTestButton")?.show();
@@ -1743,11 +1681,7 @@ function afterAnyTestInput(
 
   const acc = Numbers.roundTo2(getLiveCachedAccuracy());
   if (!isNaN(acc)) {
-    LiveAcc.update(acc);
-  }
-
-  if (Config.mode !== "time") {
-    TimerProgress.update();
+    setCurrentLiveStats({ acc });
   }
 
   if (Config.keymapMode === "next") {
@@ -1839,7 +1773,7 @@ export async function afterTestWordChange(
   Caret.updatePosition();
 
   if (lastBurst !== null && Numbers.isSafeNumber(lastBurst)) {
-    void LiveBurst.update(Math.round(lastBurst));
+    setCurrentLiveStats({ burst: Math.round(lastBurst) });
   }
 
   if (Config.keymapMode === "next") {
@@ -1875,11 +1809,13 @@ export async function afterTestWordChange(
 
 export function onTestStart(): void {
   Focus.set(true);
-  TimerProgress.show();
-  LiveSpeed.show();
-  LiveAcc.show();
-  LiveBurst.show();
-  TimerProgress.update();
+  setCurrentLiveStats({
+    wpm: 0,
+    acc: 100,
+    raw: 0,
+    burst: 0,
+    seconds: 0,
+  });
 }
 
 export function onTestRestart(source: "testPage" | "resultPage"): void {
@@ -1887,15 +1823,13 @@ export function onTestRestart(source: "testPage" | "resultPage"): void {
   qs("#typingTest")?.setStyle({ opacity: "0" }).show();
   getInputElement().style.left = "0";
   Focus.set(false);
-  LiveSpeed.instantHide();
-  LiveSpeed.reset();
-  LiveBurst.instantHide();
-  LiveBurst.reset();
-  LiveAcc.instantHide();
-  LiveAcc.reset();
-  TimerProgress.instantHide();
-  TimerProgress.reset();
-  resetCurrentLiveStats();
+  setCurrentLiveStats({
+    wpm: undefined,
+    acc: undefined,
+    raw: undefined,
+    burst: undefined,
+    seconds: undefined,
+  });
   LayoutfluidFunboxTimer.instantHide();
   updatePremid();
   focusWords(true);
@@ -1925,10 +1859,6 @@ export function onTestRestart(source: "testPage" | "resultPage"): void {
 
 export function onTestFinish(): void {
   Caret.hide();
-  LiveSpeed.hide();
-  LiveAcc.hide();
-  LiveBurst.hide();
-  TimerProgress.hide();
   setTestFocusState("focused");
   if (Config.playSoundOnClick === "16") {
     void SoundController.playFartReverb();
@@ -2027,12 +1957,6 @@ configEvent.subscribe(({ key, newValue }) => {
   if (key === "quickRestart") {
     showHideTestRestartButton(newValue === "off");
   }
-  if (key === "timerOpacity") {
-    updateLiveStatsOpacity(newValue);
-  }
-  if (key === "timerColor") {
-    updateLiveStatsColor(newValue);
-  }
   if (key === "showOutOfFocusWarning" && !newValue) {
     setTestFocusState("focused");
   }
@@ -2080,7 +2004,4 @@ configEvent.subscribe(({ key, newValue }) => {
       Joining.update(key, wordsEl);
     }
   }
-  if (["tapeMode", "tapeMargin"].includes(key)) {
-    updateLiveStatsMargin();
-  }
 });
diff --git a/frontend/src/ts/test/timer-progress.ts b/frontend/src/ts/test/timer-progress.ts
deleted file mode 100644
index 3ce869032d54..000000000000
--- a/frontend/src/ts/test/timer-progress.ts
+++ /dev/null
@@ -1,260 +0,0 @@
-import { Config } from "../config/store";
-import * as CustomText from "./custom-text";
-import * as DateTime from "../utils/date-and-time";
-import * as TestWords from "./test-words";
-import { configEvent } from "../events/config";
-import { applyReducedMotion } from "../utils/misc";
-import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
-import { animate } from "animejs";
-import {
-  getActiveWordIndex,
-  getCurrentQuote,
-  isTestActive,
-} from "../states/test";
-import { getLiveCachedTestSeconds } from "./events/live-cache";
-
-const barEl = document.querySelector("#barTimerProgress .bar") as HTMLElement;
-const barOpacityEl = document.querySelector(
-  "#barTimerProgress .opacityWrapper",
-) as HTMLElement;
-const textEl = document.querySelector(
-  "#liveStatsTextTop .timerProgress",
-) as HTMLElement;
-const miniEl = document.querySelector("#liveStatsMini .time") as HTMLElement;
-
-function showElement(el: HTMLElement): void {
-  animate(el, {
-    opacity: [0, 1],
-    duration: applyReducedMotion(125),
-    onBegin: () => {
-      el.classList.remove("hidden");
-    },
-  });
-}
-
-export function show(): void {
-  if (!isTestActive()) return;
-  requestDebouncedAnimationFrame("timer-progress.show", () => {
-    if (Config.mode !== "zen" && Config.timerStyle === "bar") {
-      showElement(barOpacityEl);
-    } else if (
-      Config.timerStyle === "text" ||
-      Config.timerStyle === "flash_text"
-    ) {
-      showElement(textEl);
-    } else if (
-      Config.timerStyle === "mini" ||
-      Config.timerStyle === "flash_mini"
-    ) {
-      showElement(miniEl);
-    }
-  });
-}
-
-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,
-    });
-    miniEl.textContent = "0";
-    textEl.textContent = "0";
-  });
-}
-
-function hideElement(el: HTMLElement, hideOnComplete: boolean): void {
-  const args = {
-    opacity: 0,
-    duration: applyReducedMotion(125),
-  };
-
-  animate(
-    el,
-    hideOnComplete
-      ? {
-          ...args,
-          onComplete: () => {
-            el.classList.add("hidden");
-          },
-        }
-      : args,
-  );
-}
-
-export function hide(): void {
-  requestDebouncedAnimationFrame("timer-progress.hide", () => {
-    hideElement(barOpacityEl, false);
-    hideElement(miniEl, true);
-    hideElement(textEl, true);
-  });
-}
-
-export function instantHide(): void {
-  barOpacityEl.style.opacity = "0";
-
-  miniEl.classList.add("hidden");
-  miniEl.style.opacity = "0";
-
-  textEl.classList.add("hidden");
-  textEl.style.opacity = "0";
-}
-
-function getCurrentCount(): number {
-  if (Config.mode === "custom" && CustomText.getLimitMode() === "section") {
-    const currentSectionIndex =
-      TestWords.words.get(getActiveWordIndex())?.sectionIndex;
-
-    if (currentSectionIndex === undefined) {
-      return 0;
-    }
-    return currentSectionIndex - 1;
-  } else {
-    return getActiveWordIndex();
-  }
-}
-
-function setTimerHtmlToInputLength(el: HTMLElement, wrapInDiv: boolean): void {
-  let historyLength = `${getActiveWordIndex()}`;
-
-  if (wrapInDiv) {
-    historyLength = `<div>${historyLength}</div>`;
-  }
-
-  el.innerHTML = historyLength;
-}
-
-function updateTimer(el: HTMLElement, outof: number, wrapInDiv: boolean): void {
-  if (outof === 0) {
-    setTimerHtmlToInputLength(el, wrapInDiv);
-  } else {
-    el.innerHTML = `${getCurrentCount()}/${outof}`;
-  }
-}
-
-export function update(): void {
-  requestDebouncedAnimationFrame("timer-progress.update", () => {
-    const time = getLiveCachedTestSeconds(performance.now());
-    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);
-        }
-        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;
-        }
-      }
-    } 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 = getCurrentQuote()?.textSplit.length ?? 1;
-      }
-      if (Config.timerStyle === "bar") {
-        const percent = Math.floor(((getActiveWordIndex() + 1) / outof) * 100);
-
-        animate(barEl, {
-          width: `${percent}vw`,
-          duration: 250,
-        });
-      } else if (
-        Config.timerStyle === "text" ||
-        Config.timerStyle === "flash_text"
-      ) {
-        updateTimer(textEl, outof, true);
-      } else if (
-        Config.timerStyle === "mini" ||
-        Config.timerStyle === "flash_mini"
-      ) {
-        updateTimer(miniEl, outof, false);
-      }
-    } else if (Config.mode === "zen") {
-      if (Config.timerStyle === "text" || Config.timerStyle === "flash_text") {
-        setTimerHtmlToInputLength(textEl, true);
-      } else if (
-        Config.timerStyle === "mini" ||
-        Config.timerStyle === "flash_mini"
-      ) {
-        setTimerHtmlToInputLength(miniEl, false);
-      }
-    }
-  });
-}
-
-export function updateStyle(): void {
-  if (!isTestActive()) return;
-  hide();
-  update();
-  if (Config.timerStyle === "off") return;
-  setTimeout(() => {
-    show();
-  }, 125);
-}
-
-configEvent.subscribe(({ key }) => {
-  if (key === "timerStyle") updateStyle();
-});
diff --git a/frontend/static/themes/husqy.css b/frontend/static/themes/husqy.css
deleted file mode 100644
index 8eda898afedd..000000000000
--- a/frontend/static/themes/husqy.css
+++ /dev/null
@@ -1,4 +0,0 @@
-#liveWpm,
-#liveStatsTextTop {
-  color: #c58aff;
-}
diff --git a/frontend/static/themes/matrix.css b/frontend/static/themes/matrix.css
deleted file mode 100644
index 9d39cee42b0e..000000000000
--- a/frontend/static/themes/matrix.css
+++ /dev/null
@@ -1,4 +0,0 @@
-#liveWpm,
-#liveStatsTextTop {
-  color: white;
-}
diff --git a/frontend/static/themes/rainbow_trail.css b/frontend/static/themes/rainbow_trail.css
index adeb41c2cb93..0734aea339a0 100644
--- a/frontend/static/themes/rainbow_trail.css
+++ b/frontend/static/themes/rainbow_trail.css
@@ -63,12 +63,6 @@ footer button:hover > .relative > i,
   transition: all 1s ease;
 }
 
-#liveStatsTextTop.timerMain,
-#liveStatsTextBottom.timerMain,
-#liveStatsMini.timerMain {
-  animation: rainbow-infinite-loop 30s linear infinite;
-}
-
 #words {
   --correct-letter-animation: rainbow-infinite-loop 5s linear infinite;
   --incorrect-letter-animation: rainbow-error-infinite-loop 1s alternate
diff --git a/frontend/static/themes/shadow.css b/frontend/static/themes/shadow.css
index 0a34c8ea72ca..629500afa32c 100644
--- a/frontend/static/themes/shadow.css
+++ b/frontend/static/themes/shadow.css
@@ -21,11 +21,6 @@ header [data-ui-element="logoText"] {
   }
 }
 
-#liveWpm,
-#liveStatsTextTop {
-  color: white;
-}
-
 #result .stats .group,
 [data-nav-item]:hover,
 footer button:hover,
diff --git a/frontend/static/themes/stealth.css b/frontend/static/themes/stealth.css
index c078db40ece8..9fb29910a482 100644
--- a/frontend/static/themes/stealth.css
+++ b/frontend/static/themes/stealth.css
@@ -4,6 +4,3 @@
     color: color-mix(in srgb, #e25303 75%, black 25%);
   }
 }
-#liveStatsTextTop {
-  color: #5e676e;
-}

From 974947571417386235ee093301fe53156cf3f4ec Mon Sep 17 00:00:00 2001
From: Christian Fehmer <fehmer@users.noreply.github.com>
Date: Sun, 19 Jul 2026 16:55:07 +0200
Subject: [PATCH 2/2] ci: run check assets if packages change (@fehmer) (#8251)

---
 .github/workflows/monkey-ci.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/monkey-ci.yml b/.github/workflows/monkey-ci.yml
index 04897f545943..9364ff9c68cf 100644
--- a/.github/workflows/monkey-ci.yml
+++ b/.github/workflows/monkey-ci.yml
@@ -280,7 +280,7 @@ jobs:
         run: npm run lint-json-assets
 
       - name: Validate language assets
-        if: steps.filter.outputs.languages == 'true'
+        if: steps.filter.outputs.languages == 'true' || needs.pre-ci.outputs.should-build-pkg == 'true'
         run: npm run check-assets-languages
 
       - name: Validate quote assets
@@ -288,7 +288,7 @@ jobs:
         run: npm run check-assets-quotes
 
       - name: Validate other assets
-        if: steps.filter.outputs.others == 'true'
+        if: steps.filter.outputs.others == 'true' || needs.pre-ci.outputs.should-build-pkg == 'true'
         run: npm run check-assets-others
 
   ci-pkg: