From 996604956e269c8ab8f8399ae87b230cdf766843 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 26 Jul 2026 17:33:44 +0200
Subject: [PATCH 1/2] fix: keymap mode react not working with
 prefers-reduced-motion (@fehmer)

---
 frontend/src/ts/components/pages/test/Keymap.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index 4194e840dd20..b83c688df636 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -15,7 +15,7 @@ import {
 } from "../../../states/test";
 import { getTheme } from "../../../states/theme";
 import { cn } from "../../../utils/cn";
-import { applyReducedMotion, isMacLike } from "../../../utils/misc";
+import { isMacLike } from "../../../utils/misc";
 import { Anime } from "../../common/anime";
 import { Button } from "../../common/Button";
 import { convertLayoutToKeymap } from "./keymapConverter";
@@ -167,7 +167,8 @@ function Key(
       props.legends?.some((legend) => legend === getKeymapHighlightKey()),
   );
 
-  const fadeDuration = applyReducedMotion(250);
+  // Don't apply reduced motion. If the user activates react/next they want animations.
+  const fadeDuration = 250;
 
   const keyMatchesHighlight = createMemo(() =>
     props.legends?.some((legend) => legend === getKeymapHighlightKey()),

From 0b6ea339ef1668c96d6e8ec34daec298c09149b9 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 26 Jul 2026 18:04:20 +0200
Subject: [PATCH 2/2] fix

---
 .../components/layout/overlays/MediaQueryDebugger.tsx  |  3 +++
 frontend/src/ts/components/pages/test/Keymap.tsx       | 10 +++++-----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/frontend/src/ts/components/layout/overlays/MediaQueryDebugger.tsx b/frontend/src/ts/components/layout/overlays/MediaQueryDebugger.tsx
index aaa36d50c0c1..acbd844f0595 100644
--- a/frontend/src/ts/components/layout/overlays/MediaQueryDebugger.tsx
+++ b/frontend/src/ts/components/layout/overlays/MediaQueryDebugger.tsx
@@ -39,6 +39,9 @@ export function MediaQueryDebugger(): JSXElement {
             <Match when={bp().xxs}>xxs</Match>
           </Switch>
         </div>
+        <div class="hidden w-min rounded-r bg-sub-alt px-2 py-1 motion-reduce:flex">
+          <div class="mr-2">reduced motion</div>
+        </div>
       </div>
     </Show>
   );
diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index b83c688df636..db3761bc388a 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -167,9 +167,6 @@ function Key(
       props.legends?.some((legend) => legend === getKeymapHighlightKey()),
   );
 
-  // Don't apply reduced motion. If the user activates react/next they want animations.
-  const fadeDuration = 250;
-
   const keyMatchesHighlight = createMemo(() =>
     props.legends?.some((legend) => legend === getKeymapHighlightKey()),
   );
@@ -227,10 +224,11 @@ function Key(
     return [getTheme().bg, isNext() ? getTheme().bg : getTheme().sub];
   });
 
+  // Don't apply reduced motion. If the user activates react/next they want animations.
   const animDuration = createMemo(() => {
-    if (isFading()) return fadeDuration;
+    if (isFading()) return 250;
     if (flashInfo().tick === 0) return 0;
-    return fadeDuration;
+    return 250;
   });
 
   return (
@@ -255,6 +253,8 @@ function Key(
         "background-color": "var(--keybgcolor)",
         color: "var(--keycolor)",
       }}
+      // Don't apply reduced motion. If the user activates react/next they want animations.
+      respectReducedMotion={false}
       animation={{
         "--keybgcolor": animKeyBgColor(),
         "--keycolor": animKeyColor(),