Merge pull request #3766 from rommapp/posthog-code/v2-reduced-effects

gantoine · web-flow · commit cb7a67a1e65c · 2026-07-16T13:13:10.000-04:00
feat(v2): add reduced-effects mode for low-power devices
diff --git a/frontend/src/locales/bg_BG/settings.json b/frontend/src/locales/bg_BG/settings.json
@@ -285,6 +285,8 @@
   "rating-header": "Оценка",
   "recently-added-as-grid": "Наскоро добавени ROM-ове като решетка",
   "recently-added-as-grid-desc": "Показвай наскоро добавените ROM-ове като решетка на началната страница",
+  "reduced-motion": "Reduced motion",
+  "reduced-motion-desc": "Disable GPU-heavy visuals and animations (background blur, cover effects, spinning discs, motion) for smoother performance on low-powered devices",
   "regenerate-code": "Регенерирай кода",
   "regenerate-token": "Регенерирай токена",
   "regenerate-token-title": "Регенериране на токен",
diff --git a/frontend/src/locales/cs_CZ/settings.json b/frontend/src/locales/cs_CZ/settings.json
@@ -285,6 +285,8 @@
   "rating-header": "Hodnocení",
   "recently-added-as-grid": "Nedávno přidané ROM jako mřížka",
   "recently-added-as-grid-desc": "Zobrazit karty nedávno přidaných ROM jako mřížku na hlavní stránce",
+  "reduced-motion": "Reduced motion",
+  "reduced-motion-desc": "Disable GPU-heavy visuals and animations (background blur, cover effects, spinning discs, motion) for smoother performance on low-powered devices",
   "regenerate-code": "Vygenerovat nový kód",
   "regenerate-token": "Vygenerovat nový token",
   "regenerate-token-title": "Vygenerovat nový token",
diff --git a/frontend/src/locales/de_DE/settings.json b/frontend/src/locales/de_DE/settings.json
@@ -285,6 +285,8 @@
   "rating-header": "Bewertung",
   "recently-added-as-grid": "Kürzlich hinzugefügte ROMs als Raster darstellen",
   "recently-added-as-grid-desc": "Kürzlich hinzugefügte ROMs werden auf der Startseite als Raster gezeigt",
+  "reduced-motion": "Reduzierte Bewegung",
+  "reduced-motion-desc": "Deaktiviert GPU-intensive Effekte und Animationen (Hintergrund- und Cover-Unschärfe, drehende Discs, Bewegung) für flüssigere Leistung auf leistungsschwachen Geräten",
   "regenerate-code": "Code regenerieren",
   "regenerate-token": "Token regenerieren",
   "regenerate-token-title": "Token regenerieren",
diff --git a/frontend/src/locales/en_GB/settings.json b/frontend/src/locales/en_GB/settings.json
@@ -285,6 +285,8 @@
   "rating-header": "Rating",
   "recently-added-as-grid": "Recently added ROMs as grid",
   "recently-added-as-grid-desc": "View recently added ROM cards as a grid at the home page",
+  "reduced-motion": "Reduced motion",
+  "reduced-motion-desc": "Disable GPU-heavy visuals and animations (background blur, cover effects, spinning discs, motion) for smoother performance on low-powered devices",
   "regenerate-code": "Regenerate code",
   "regenerate-token": "Regenerate token",
   "regenerate-token-title": "Regenerate token",
diff --git a/frontend/src/locales/en_US/settings.json b/frontend/src/locales/en_US/settings.json
@@ -285,6 +285,8 @@
   "rating-header": "Rating",
   "recently-added-as-grid": "Recently added ROMs as grid",
   "recently-added-as-grid-desc": "View recently added ROM cards as a grid at the home page",
+  "reduced-motion": "Reduced motion",
+  "reduced-motion-desc": "Disable GPU-heavy visuals and animations (background blur, cover effects, spinning discs, motion) for smoother performance on low-powered devices",
   "regenerate-code": "Regenerate code",
   "regenerate-token": "Regenerate token",
   "regenerate-token-title": "Regenerate token",
diff --git a/frontend/src/locales/es_ES/settings.json b/frontend/src/locales/es_ES/settings.json
@@ -285,6 +285,8 @@
   "rating-header": "Valoración",
   "recently-added-as-grid": "Mostrar ROMs añadidos recientemente como cuadrícula",
   "recently-added-as-grid-desc": "Mostrar la sección de ROMs añadidos recientemente como cuadrícula en la página principal",
+  "reduced-motion": "Movimiento reducido",
+  "reduced-motion-desc": "Desactiva los efectos gráficos y animaciones costosos (desenfoque de fondo y de carátula, discos giratorios, movimiento) para un mejor rendimiento en dispositivos de baja potencia",
   "regenerate-code": "Regenerar código",
   "regenerate-token": "Regenerar token",
   "regenerate-token-title": "Regenerar este token",
diff --git a/frontend/src/locales/fr_FR/settings.json b/frontend/src/locales/fr_FR/settings.json
@@ -285,6 +285,8 @@
   "rating-header": "Note",
   "recently-added-as-grid": "ROMs récemment ajoutés en grille",
   "recently-added-as-grid-desc": "Voir les cartes des ROMs récemment ajoutés en grille sur la page d'accueil",
+  "reduced-motion": "Mouvement réduit",
+  "reduced-motion-desc": "Désactive les effets graphiques et animations coûteux (flou de l'arrière-plan et des jaquettes, disques qui tournent, mouvements) pour de meilleures performances sur les appareils peu puissants",
   "regenerate-code": "Régénérer le code",
   "regenerate-token": "Régénérer le token",
   "regenerate-token-title": "Régénérer le token",
diff --git a/frontend/src/locales/hu_HU/settings.json b/frontend/src/locales/hu_HU/settings.json
@@ -285,6 +285,8 @@
   "rating-header": "Értékelés",
   "recently-added-as-grid": "Legutóbb hozzáadott ROM-ok rácsnézetben",
   "recently-added-as-grid-desc": "A főoldalon a legutóbb hozzáadott ROM-kártyák rácsnézetben jelennek meg",
+  "reduced-motion": "Reduced motion",
+  "reduced-motion-desc": "Disable GPU-heavy visuals and animations (background blur, cover effects, spinning discs, motion) for smoother performance on low-powered devices",
   "regenerate-code": "Kód újragenerálása",
   "regenerate-token": "Token újragenerálása",
   "regenerate-token-title": "Token újragenerálása",
diff --git a/frontend/src/locales/it_IT/settings.json b/frontend/src/locales/it_IT/settings.json
@@ -285,6 +285,8 @@
   "rating-header": "Valutazione",
   "recently-added-as-grid": "Rom aggiunte di recente come griglia",
   "recently-added-as-grid-desc": "Visualizza le ROM aggiunte di recente come una griglia nella home",
+  "reduced-motion": "Movimento ridotto",
+  "reduced-motion-desc": "Disattiva gli effetti grafici e le animazioni pesanti (sfocatura dello sfondo e delle copertine, dischi rotanti, movimento) per prestazioni più fluide su dispositivi poco potenti",
   "regenerate-code": "Rigenera codice",
   "regenerate-token": "Rigenera token",
   "regenerate-token-title": "Rigenera token",
diff --git a/frontend/src/locales/ja_JP/settings.json b/frontend/src/locales/ja_JP/settings.json
@@ -285,6 +285,8 @@
   "rating-header": "評価",
   "recently-added-as-grid": "最近追加されたromをグリッドで表示",
   "recently-added-as-grid-desc": "ホームの最近追加されたromをグリッドで表示",
+  "reduced-motion": "Reduced motion",
+  "reduced-motion-desc": "Disable GPU-heavy visuals and animations (background blur, cover effects, spinning discs, motion) for smoother performance on low-powered devices",
   "regenerate-code": "コードを再生成",
   "regenerate-token": "トークンを再生成",
   "regenerate-token-title": "トークンを再生成",
diff --git a/frontend/src/locales/ko_KR/settings.json b/frontend/src/locales/ko_KR/settings.json
@@ -285,6 +285,8 @@
   "rating-header": "평가",
   "recently-added-as-grid": "최근에 추가된 롬을 그리드 뷰로",
   "recently-added-as-grid-desc": "홈페이지에 최근에 추가된 롬을 그리드 뷰로 보여줍니다",
+  "reduced-motion": "Reduced motion",
+  "reduced-motion-desc": "Disable GPU-heavy visuals and animations (background blur, cover effects, spinning discs, motion) for smoother performance on low-powered devices",
   "regenerate-code": "코드 재생성",
   "regenerate-token": "토큰 재생성",
   "regenerate-token-title": "토큰 재생성",
diff --git a/frontend/src/locales/pl_PL/settings.json b/frontend/src/locales/pl_PL/settings.json
@@ -285,6 +285,8 @@
   "rating-header": "Ocena",
   "recently-added-as-grid": "Ostatnio dodane ROM-y w widoku siatki",
   "recently-added-as-grid-desc": "Wyświetl ostatnio dodane ROM-y w formie siatki na stronie głównej",
+  "reduced-motion": "Reduced motion",
+  "reduced-motion-desc": "Disable GPU-heavy visuals and animations (background blur, cover effects, spinning discs, motion) for smoother performance on low-powered devices",
   "regenerate-code": "Wygeneruj kod ponownie",
   "regenerate-token": "Wygeneruj token ponownie",
   "regenerate-token-title": "Wygeneruj token ponownie",
diff --git a/frontend/src/locales/pt_BR/settings.json b/frontend/src/locales/pt_BR/settings.json
@@ -285,6 +285,8 @@
   "rating-header": "Avaliação",
   "recently-added-as-grid": "ROMs adicionados recentemente como grade",
   "recently-added-as-grid-desc": "Ver cartões de ROMs adicionados recentemente como uma grade na página inicial",
+  "reduced-motion": "Movimento reduzido",
+  "reduced-motion-desc": "Desativa efeitos gráficos e animações pesados (desfoque de fundo e da capa, discos girando, movimento) para melhor desempenho em dispositivos de baixa potência",
   "regenerate-code": "Regenerar código",
   "regenerate-token": "Regenerar token",
   "regenerate-token-title": "Regenerar token",
diff --git a/frontend/src/locales/ro_RO/settings.json b/frontend/src/locales/ro_RO/settings.json
@@ -285,6 +285,8 @@
   "rating-header": "Evaluare",
   "recently-added-as-grid": "Rom-uri adăugate recent în grilă",
   "recently-added-as-grid-desc": "Vezi cardurile rom-urilor adăugate recent în grilă pe pagina principală",
+  "reduced-motion": "Reduced motion",
+  "reduced-motion-desc": "Disable GPU-heavy visuals and animations (background blur, cover effects, spinning discs, motion) for smoother performance on low-powered devices",
   "regenerate-code": "Regenerează codul",
   "regenerate-token": "Regenerează token-ul",
   "regenerate-token-title": "Regenerează token-ul",
diff --git a/frontend/src/locales/ru_RU/settings.json b/frontend/src/locales/ru_RU/settings.json
@@ -285,6 +285,8 @@
   "rating-header": "Рейтинг",
   "recently-added-as-grid": "Недавно добавленные ромы в виде сетки",
   "recently-added-as-grid-desc": "Просмотр карточек недавно добавленных ромов в виде сетки на главной странице",
+  "reduced-motion": "Reduced motion",
+  "reduced-motion-desc": "Disable GPU-heavy visuals and animations (background blur, cover effects, spinning discs, motion) for smoother performance on low-powered devices",
   "regenerate-code": "Перегенерировать код",
   "regenerate-token": "Перегенерировать токен",
   "regenerate-token-title": "Перегенерировать токен",
diff --git a/frontend/src/locales/tr_TR/settings.json b/frontend/src/locales/tr_TR/settings.json
@@ -285,6 +285,8 @@
   "rating-header": "Puan",
   "recently-added-as-grid": "Son eklenen ROM'lar ızgara olarak",
   "recently-added-as-grid-desc": "Ana sayfada son eklenen ROM kartlarını ızgara görünümünde göster",
+  "reduced-motion": "Reduced motion",
+  "reduced-motion-desc": "Disable GPU-heavy visuals and animations (background blur, cover effects, spinning discs, motion) for smoother performance on low-powered devices",
   "regenerate-code": "Kodu yeniden oluştur",
   "regenerate-token": "Tokenı yeniden oluştur",
   "regenerate-token-title": "Tokenı yeniden oluştur",
diff --git a/frontend/src/locales/zh_CN/settings.json b/frontend/src/locales/zh_CN/settings.json
@@ -285,6 +285,8 @@
   "rating-header": "评分",
   "recently-added-as-grid": "显示最近添加的 Rom 文件（网格）",
   "recently-added-as-grid-desc": "以网格形式在主页上显示最近添加的 Rom 文件（卡片）部分",
+  "reduced-motion": "Reduced motion",
+  "reduced-motion-desc": "Disable GPU-heavy visuals and animations (background blur, cover effects, spinning discs, motion) for smoother performance on low-powered devices",
   "regenerate-code": "重新生成代码",
   "regenerate-token": "重新生成令牌",
   "regenerate-token-title": "重新生成令牌",
diff --git a/frontend/src/locales/zh_TW/settings.json b/frontend/src/locales/zh_TW/settings.json
@@ -285,6 +285,8 @@
   "rating-header": "評分",
   "recently-added-as-grid": "顯示最近新增的 Rom 卡片",
   "recently-added-as-grid-desc": "在首頁上以卡片方式顯示最近新增的 Rom",
+  "reduced-motion": "Reduced motion",
+  "reduced-motion-desc": "Disable GPU-heavy visuals and animations (background blur, cover effects, spinning discs, motion) for smoother performance on low-powered devices",
   "regenerate-code": "重新產生代碼",
   "regenerate-token": "重新產生權杖",
   "regenerate-token-title": "重新產生權杖",
diff --git a/frontend/src/v2/components/AppShell/AppNav.vue b/frontend/src/v2/components/AppShell/AppNav.vue
@@ -123,6 +123,17 @@ onBeforeUnmount(() => {
   border-bottom-color: var(--r-color-border);
 }
 
+/* Reduced-motion / low-power: the glass is a backdrop-filter blur, which is
+   expensive on weak GPUs and, against the now-solid page background (the
+   backdrop art is dropped in this mode), just reads as murky. Swap it for a
+   flat opaque surface so the fixed bar stays a clean, solid strip as content
+   scrolls under it. */
+:global(html.r-v2-reduced-motion) .r-v2-nav-bar::before {
+  background: var(--r-color-bg);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
 /* Grid `1fr auto 1fr` keeps the tab pill geometrically centred on the
    viewport regardless of the side clusters' widths. With flex +
    justify-content:center the pill drifts whenever logo and right
diff --git a/frontend/src/v2/components/shared/GameCover.vue b/frontend/src/v2/components/shared/GameCover.vue
@@ -355,6 +355,18 @@ defineExpose({
   }
 }
 
+/* Reduced-motion mode: same treatment as the reduced-motion media block
+   above for the bloom. A blur(16px) per cover, ~100 at once on a full grid,
+   is expensive on weak GPUs; the covers still fade in, just without the
+   blur/scale flourish. */
+:global(html.r-v2-reduced-motion) .game-cover__img {
+  transition: opacity 0.25s ease;
+}
+:global(html.r-v2-reduced-motion) .game-cover__img--reveal {
+  filter: none;
+  scale: 1;
+}
+
 .game-cover__video {
   position: absolute;
   top: 0.75rem;
diff --git a/frontend/src/v2/composables/useCoverAnimation/index.ts b/frontend/src/v2/composables/useCoverAnimation/index.ts
@@ -19,7 +19,8 @@
 // fight the eased slide).
 //
 // All motion is gated by the user's `disableAnimations` setting (via
-// `motionEnabled`) AND the OS `prefers-reduced-motion`.
+// `motionEnabled`) AND reduced-motion mode (OS `prefers-reduced-motion` plus
+// the user's low-power override, via `useReducedMotion`).
 import {
   computed,
   onBeforeUnmount,
@@ -28,6 +29,7 @@ import {
   type ComputedRef,
   type Ref,
 } from "vue";
+import { useReducedMotion } from "@/v2/composables/useReducedMotion";
 
 export interface SpinConfig {
   /** Top rotational speed, deg/sec. */
@@ -78,15 +80,6 @@ export function stepSpin(
   return { angle, velocity };
 }
 
-/** True when the OS asks for reduced motion. */
-function prefersReducedMotion(): boolean {
-  return (
-    typeof window !== "undefined" &&
-    typeof window.matchMedia === "function" &&
-    window.matchMedia("(prefers-reduced-motion: reduce)").matches
-  );
-}
-
 export interface UseCoverAnimationOptions {
   /** The cover <img> element (the thing that spins / slides). */
   el: Ref<HTMLElement | null>;
@@ -121,8 +114,10 @@ export interface UseCoverAnimation {
 export function useCoverAnimation(
   opts: UseCoverAnimationOptions,
 ): UseCoverAnimation {
+  // Reactive, so the spin/video stops the instant either input flips.
+  const { enabled: reducedMotion } = useReducedMotion();
   const motionOk = computed(
-    () => opts.motionEnabled.value && !prefersReducedMotion(),
+    () => opts.motionEnabled.value && !reducedMotion.value,
   );
 
   // The slide (`margin-top`) is eased in CSS (`.game-cover__img`) so it
diff --git a/frontend/src/v2/composables/useReducedMotion/index.test.ts b/frontend/src/v2/composables/useReducedMotion/index.test.ts
@@ -0,0 +1,121 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { nextTick } from "vue";
+
+const KEY = "settings.v2.reducedMotion";
+
+// A minimal in-memory Storage. The hook reads `window.localStorage` (via
+// vueuse), which under this env + Node isn't reliably wired up for a pure,
+// non-DOM test file, so we install our own and assert against it.
+function makeStorage(): Storage {
+  const map = new Map<string, string>();
+  return {
+    get length() {
+      return map.size;
+    },
+    clear: () => map.clear(),
+    getItem: (key) => (map.has(key) ? (map.get(key) as string) : null),
+    setItem: (key, value) => void map.set(key, String(value)),
+    removeItem: (key) => void map.delete(key),
+    key: (index) => [...map.keys()][index] ?? null,
+  };
+}
+let store: Storage;
+
+// Force the OS `prefers-reduced-motion` result the next fresh import will read.
+function stubReducedMotion(matches: boolean) {
+  window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+    matches,
+    media: query,
+    onchange: null,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+}
+
+// `override` / `systemPreference` / `enabled` are module-level singletons
+// created at import time, so they read localStorage + matchMedia exactly once
+// on load. Re-import fresh after seeding both to exercise the default /
+// override paths in isolation.
+async function loadFresh() {
+  vi.resetModules();
+  const { useReducedMotion } = await import("./index");
+  return useReducedMotion();
+}
+
+const realMatchMedia = window.matchMedia;
+
+beforeEach(() => {
+  store = makeStorage();
+  vi.stubGlobal("localStorage", store);
+  Object.defineProperty(window, "localStorage", {
+    value: store,
+    configurable: true,
+    writable: true,
+  });
+  stubReducedMotion(false);
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  window.matchMedia = realMatchMedia;
+});
+
+describe("useReducedMotion", () => {
+  it("defaults to the system prefers-reduced-motion setting when unset", async () => {
+    stubReducedMotion(true);
+    const { enabled } = await loadFresh();
+    expect(enabled.value).toBe(true);
+  });
+
+  it("defaults to off when the system has no reduced-motion preference", async () => {
+    stubReducedMotion(false);
+    const { enabled } = await loadFresh();
+    expect(enabled.value).toBe(false);
+  });
+
+  it("an explicit 'off' override wins over a system reduced-motion preference", async () => {
+    stubReducedMotion(true);
+    store.setItem(KEY, "false");
+    const { enabled } = await loadFresh();
+    expect(enabled.value).toBe(false);
+  });
+
+  it("restores an explicit 'on' override regardless of the system setting", async () => {
+    stubReducedMotion(false);
+    store.setItem(KEY, "true");
+    const { enabled } = await loadFresh();
+    expect(enabled.value).toBe(true);
+  });
+
+  it("toggle() records an explicit override under the settings key", async () => {
+    const { enabled, toggle } = await loadFresh();
+    expect(enabled.value).toBe(false);
+
+    expect(toggle()).toBe(true);
+    expect(enabled.value).toBe(true);
+    await nextTick();
+    expect(store.getItem(KEY)).toBe("true");
+  });
+
+  it("toggle() from a system-on default writes an explicit off", async () => {
+    stubReducedMotion(true);
+    const { enabled, toggle } = await loadFresh();
+    expect(enabled.value).toBe(true);
+
+    expect(toggle()).toBe(false);
+    await nextTick();
+    expect(store.getItem(KEY)).toBe("false");
+  });
+
+  it("shares a single instance across calls within a load", async () => {
+    vi.resetModules();
+    const { useReducedMotion } = await import("./index");
+    const a = useReducedMotion();
+    const b = useReducedMotion();
+    a.toggle();
+    expect(b.enabled.value).toBe(true);
+  });
+});
diff --git a/frontend/src/v2/composables/useReducedMotion/index.ts b/frontend/src/v2/composables/useReducedMotion/index.ts
diff --git a/frontend/src/v2/composables/useViewTransition/index.ts b/frontend/src/v2/composables/useViewTransition/index.ts
diff --git a/frontend/src/v2/layouts/AppLayout.vue b/frontend/src/v2/layouts/AppLayout.vue
diff --git a/frontend/src/v2/lib/media/RBox3D/RBox3D.vue b/frontend/src/v2/lib/media/RBox3D/RBox3D.vue
diff --git a/frontend/src/v2/lib/structural/RExpandTransition/RExpandTransition.vue b/frontend/src/v2/lib/structural/RExpandTransition/RExpandTransition.vue
diff --git a/frontend/src/v2/styles/global.css b/frontend/src/v2/styles/global.css
diff --git a/frontend/src/v2/views/Settings/UserInterface.vue b/frontend/src/v2/views/Settings/UserInterface.vue
