From 1978bda59f37e2381da0de782736d50894843ed7 Mon Sep 17 00:00:00 2001
From: Max Goodhart <c@chromakode.com>
Date: Mon, 26 Jan 2026 00:35:35 -0800
Subject: [PATCH] Desaturate videos when loading

---
 packages/streamwall/src/renderer/overlay.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/streamwall/src/renderer/overlay.tsx b/packages/streamwall/src/renderer/overlay.tsx
index f7770ef..e33a290 100644
--- a/packages/streamwall/src/renderer/overlay.tsx
+++ b/packages/streamwall/src/renderer/overlay.tsx
@@ -75,7 +75,7 @@ function Overlay({
             activeColor={activeColor}
             isListening={isListening}
           >
-            <BlurCover isBlurred={isBlurred} />
+            <FilterCover isBlurred={isBlurred} isDesaturated={isLoading} />
             {hasTitle && (
               <StreamTitle
                 position={position}
@@ -322,13 +322,16 @@ const LoadingSpinner = styled(TailSpin)<{ isVisible: boolean }>`
   visibility: ${({ isVisible }) => (isVisible ? 'visible' : 'hidden')};
 `
 
-const BlurCover = styled.div`
+const FilterCover = styled.div`
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
-  backdrop-filter: ${({ isBlurred }) => (isBlurred ? 'blur(30px)' : 'blur(0)')};
+  backdrop-filter: ${({ isBlurred, isDesaturated }) =>
+    [isBlurred ? 'blur(30px)' : '', isDesaturated ? 'grayscale(75%)' : ''].join(
+      ' ',
+    )};
 `
 
 const VersionText = styled.div`