refactor(v2): merge reduced-effects into useReducedMotion

gantoine · gantoine · commit d248df8623d8 · 2026-07-16T11:25:27.000-04:00
Two hooks modelled overlapping concerns and useReducedEffects imported
useReducedMotion for its default, coupling them. Collapse to a single
useReducedMotion that owns the whole "reduce motion / effects" axis:

  enabled = override ?? OS prefers-reduced-motion   (+ toggle())

It drives the one r-v2-reduced-motion root class (background blur, cover
blur-up, the global animation/transition neutralize) and the JS motion
gates (cover CD-spin, view-transition morphs, RExpandTransition, RBox3D).
One hook, one Settings toggle, one source of truth.

- Delete useReducedEffects; move its override tests onto useReducedMotion.
- Rename the class r-v2-reduced-effects -&gt; r-v2-reduced-motion and the
  localStorage key to settings.v2.reducedMotion.
- Rename the i18n keys reduced-effects(-desc) -&gt; reduced-motion(-desc)
  across all locales; title is now "Reduced motion" (the description
  already covered both blur and animation).

Generated-By: PostHog Code
Task-Id: 6690877a-9c32-4c91-a78b-3d6fd3851fb7
diff --git a/frontend/src/locales/bg_BG/settings.json b/frontend/src/locales/bg_BG/settings.json
@@ -285,8 +285,8 @@
   "rating-header": "Оценка",
   "recently-added-as-grid": "Наскоро добавени ROM-ове като решетка",
   "recently-added-as-grid-desc": "Показвай наскоро добавените ROM-ове като решетка на началната страница",
-  "reduced-effects": "Reduced effects",
-  "reduced-effects-desc": "Disable GPU-heavy visuals and animations (background blur, cover effects, spinning discs, motion) for smoother performance on low-powered devices",
+  "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,8 +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-effects": "Reduced effects",
-  "reduced-effects-desc": "Disable GPU-heavy visuals and animations (background blur, cover effects, spinning discs, motion) for smoother performance on low-powered devices",
+  "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,8 +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-effects": "Reduzierte Effekte",
-  "reduced-effects-desc": "Deaktiviert GPU-intensive Effekte und Animationen (Hintergrund- und Cover-Unschärfe, drehende Discs, Bewegung) für flüssigere Leistung auf leistungsschwachen Geräten",
+  "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,8 +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-effects": "Reduced effects",
-  "reduced-effects-desc": "Disable GPU-heavy visuals and animations (background blur, cover effects, spinning discs, motion) for smoother performance on low-powered devices",
+  "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,8 +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-effects": "Reduced effects",
-  "reduced-effects-desc": "Disable GPU-heavy visuals and animations (background blur, cover effects, spinning discs, motion) for smoother performance on low-powered devices",
+  "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,8 +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-effects": "Efectos reducidos",
-  "reduced-effects-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",
+  "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,8 +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-effects": "Effets réduits",
-  "reduced-effects-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",
+  "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,8 +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-effects": "Reduced effects",
-  "reduced-effects-desc": "Disable GPU-heavy visuals and animations (background blur, cover effects, spinning discs, motion) for smoother performance on low-powered devices",
+  "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,8 +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-effects": "Effetti ridotti",
-  "reduced-effects-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",
+  "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,8 +285,8 @@
   "rating-header": "評価",
   "recently-added-as-grid": "最近追加されたromをグリッドで表示",
   "recently-added-as-grid-desc": "ホームの最近追加されたromをグリッドで表示",
-  "reduced-effects": "Reduced effects",
-  "reduced-effects-desc": "Disable GPU-heavy visuals and animations (background blur, cover effects, spinning discs, motion) for smoother performance on low-powered devices",
+  "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,8 +285,8 @@
   "rating-header": "평가",
   "recently-added-as-grid": "최근에 추가된 롬을 그리드 뷰로",
   "recently-added-as-grid-desc": "홈페이지에 최근에 추가된 롬을 그리드 뷰로 보여줍니다",
-  "reduced-effects": "Reduced effects",
-  "reduced-effects-desc": "Disable GPU-heavy visuals and animations (background blur, cover effects, spinning discs, motion) for smoother performance on low-powered devices",
+  "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,8 +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-effects": "Reduced effects",
-  "reduced-effects-desc": "Disable GPU-heavy visuals and animations (background blur, cover effects, spinning discs, motion) for smoother performance on low-powered devices",
+  "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,8 +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-effects": "Efeitos reduzidos",
-  "reduced-effects-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",
+  "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,8 +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-effects": "Reduced effects",
-  "reduced-effects-desc": "Disable GPU-heavy visuals and animations (background blur, cover effects, spinning discs, motion) for smoother performance on low-powered devices",
+  "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,8 +285,8 @@
   "rating-header": "Рейтинг",
   "recently-added-as-grid": "Недавно добавленные ромы в виде сетки",
   "recently-added-as-grid-desc": "Просмотр карточек недавно добавленных ромов в виде сетки на главной странице",
-  "reduced-effects": "Reduced effects",
-  "reduced-effects-desc": "Disable GPU-heavy visuals and animations (background blur, cover effects, spinning discs, motion) for smoother performance on low-powered devices",
+  "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,8 +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-effects": "Reduced effects",
-  "reduced-effects-desc": "Disable GPU-heavy visuals and animations (background blur, cover effects, spinning discs, motion) for smoother performance on low-powered devices",
+  "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,8 +285,8 @@
   "rating-header": "评分",
   "recently-added-as-grid": "显示最近添加的 Rom 文件（网格）",
   "recently-added-as-grid-desc": "以网格形式在主页上显示最近添加的 Rom 文件（卡片）部分",
-  "reduced-effects": "Reduced effects",
-  "reduced-effects-desc": "Disable GPU-heavy visuals and animations (background blur, cover effects, spinning discs, motion) for smoother performance on low-powered devices",
+  "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,8 +285,8 @@
   "rating-header": "評分",
   "recently-added-as-grid": "顯示最近新增的 Rom 卡片",
   "recently-added-as-grid-desc": "在首頁上以卡片方式顯示最近新增的 Rom",
-  "reduced-effects": "Reduced effects",
-  "reduced-effects-desc": "Disable GPU-heavy visuals and animations (background blur, cover effects, spinning discs, motion) for smoother performance on low-powered devices",
+  "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/shared/GameCover.vue b/frontend/src/v2/components/shared/GameCover.vue
@@ -355,13 +355,14 @@ defineExpose({
   }
 }
 
-/* Reduced-effects mode: same treatment as reduced motion 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-effects) .game-cover__img {
+/* 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-effects) .game-cover__img--reveal {
+:global(html.r-v2-reduced-motion) .game-cover__img--reveal {
   filter: none;
   scale: 1;
 }
diff --git a/frontend/src/v2/composables/useCoverAnimation/index.ts b/frontend/src/v2/composables/useCoverAnimation/index.ts
@@ -19,8 +19,8 @@
 // fight the eased slide).
 //
 // All motion is gated by the user's `disableAnimations` setting (via
-// `motionEnabled`), the OS `prefers-reduced-motion`, AND the app's
-// reduced-effects low-power mode.
+// `motionEnabled`) AND reduced-motion mode (OS `prefers-reduced-motion` plus
+// the user's low-power override, via `useReducedMotion`).
 import {
   computed,
   onBeforeUnmount,
@@ -29,7 +29,6 @@ import {
   type ComputedRef,
   type Ref,
 } from "vue";
-import { useReducedEffects } from "@/v2/composables/useReducedEffects";
 import { useReducedMotion } from "@/v2/composables/useReducedMotion";
 
 export interface SpinConfig {
@@ -115,15 +114,10 @@ export interface UseCoverAnimation {
 export function useCoverAnimation(
   opts: UseCoverAnimationOptions,
 ): UseCoverAnimation {
-  // All reactive, so the spin/video stops the instant any of these flips.
-  // The OS check stays independent of reduced-effects: an explicit
-  // reduced-effects "off" must not re-enable motion for a user whose system
-  // asks to reduce it.
-  const reducedMotion = useReducedMotion();
-  const { enabled: reducedEffects } = useReducedEffects();
+  // Reactive, so the spin/video stops the instant either input flips.
+  const { enabled: reducedMotion } = useReducedMotion();
   const motionOk = computed(
-    () =>
-      opts.motionEnabled.value && !reducedMotion.value && !reducedEffects.value,
+    () => 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/useReducedEffects/index.ts b/frontend/src/v2/composables/useReducedEffects/index.ts
diff --git a/frontend/src/v2/composables/useReducedMotion/index.test.ts b/frontend/src/v2/composables/useReducedMotion/index.test.ts
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
