From 53b3b5e1fceaf64b6c3f718b93f3487cc04dacb2 Mon Sep 17 00:00:00 2001 From: byGalax Date: Sat, 16 May 2026 23:25:01 +0200 Subject: [PATCH] perf(P6A.T2): respect prefers-reduced-motion globally + gate confetti MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Update globals.css reduced-motion block: 0.01ms → 0.001ms durations and add scroll-behavior: auto to suppress all transitions/animations when OS reduced-motion preference is active. - Gate canvas-confetti burst in GameModal behind matchMedia check so the particle effect is skipped entirely for users who opt out of motion. Co-Authored-By: Claude Sonnet 4.6 --- apps/desktop/src/components/GameModal.tsx | 8 ++++++++ apps/desktop/src/styles/globals.css | 5 +++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/apps/desktop/src/components/GameModal.tsx b/apps/desktop/src/components/GameModal.tsx index bab0a90..ef5424d 100644 --- a/apps/desktop/src/components/GameModal.tsx +++ b/apps/desktop/src/components/GameModal.tsx @@ -48,6 +48,14 @@ export function GameModal({ gameId, onClose }: Props) { useEffect(() => { if (finished && winnerIdx !== null && winnerIdx === myPlayerIdx) { + // Respect the OS-level reduced-motion preference. + if ( + typeof window !== 'undefined' && + window.matchMedia && + window.matchMedia('(prefers-reduced-motion: reduce)').matches + ) { + return; + } // Two bursts from the lower corners for a celebratory feel. void confetti({ particleCount: 80, diff --git a/apps/desktop/src/styles/globals.css b/apps/desktop/src/styles/globals.css index 0828171..ba4a1d0 100644 --- a/apps/desktop/src/styles/globals.css +++ b/apps/desktop/src/styles/globals.css @@ -85,9 +85,10 @@ *, *::before, *::after { - animation-duration: 0.01ms !important; + animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; + transition-duration: 0.001ms !important; + scroll-behavior: auto !important; } } }