From 6aca2827b9415cc5091f64911e879bbdead835ae Mon Sep 17 00:00:00 2001 From: Truong Trung Nghia <149591043+ttncode@users.noreply.github.com> Date: Thu, 12 Nov 2026 23:24:17 +0700 Subject: [PATCH] fix(focus): play the coffee refill even with reduced motion on Windows with Animation effects off reports prefers-reduced-motion, which skipped the fizz in the desktop app and in browsers on that PC. --- src/components/focus/PixelArt.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/focus/PixelArt.tsx b/src/components/focus/PixelArt.tsx index 6d87380..d5aca59 100644 --- a/src/components/focus/PixelArt.tsx +++ b/src/components/focus/PixelArt.tsx @@ -130,8 +130,6 @@ interface Refill { readonly to: number; } -const prefersReducedMotion = () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches; - /** Shows the coffee frame; when the cup jumps to a fuller level it fizzes up to it on a canvas over the empty cup. */ function CoffeeCup({ frame, frames, className, label }: { frame: number; frames: number; className: string; label: string }) { const canvasRef = useRef(null); @@ -139,7 +137,8 @@ function CoffeeCup({ frame, frames, className, label }: { frame: number; frames: const [refill, setRefill] = useState(null); if (frame !== lastFrame) { setLastFrame(frame); - if (isRefill(lastFrame, frame) && !prefersReducedMotion()) setRefill({ from: lastFrame, to: frame }); + // Plays even with reduced motion on: the owner chose to always show this short refill. + if (isRefill(lastFrame, frame)) setRefill({ from: lastFrame, to: frame }); } useEffect(() => {