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 4194e840dd20..db3761bc388a 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,8 +167,6 @@ function Key(
       props.legends?.some((legend) => legend === getKeymapHighlightKey()),
   );
 
-  const fadeDuration = applyReducedMotion(250);
-
   const keyMatchesHighlight = createMemo(() =>
     props.legends?.some((legend) => legend === getKeymapHighlightKey()),
   );
@@ -226,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 (
@@ -254,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(),