From cb2b4a963a4271a89d0e56c731405dce3e1aed91 Mon Sep 17 00:00:00 2001
From: JSR <pandajsr72@gmail.com>
Date: Sat, 18 Jul 2026 09:59:12 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=90=8C=E6=AD=A5=E7=A7=AF=E5=88=86?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E9=81=AE=E7=BD=A9=E6=A8=A1=E7=B3=8A=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Home.tsx | 32 ++++++++++++++++++++++----------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index 66eab70..e613f0e 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -864,11 +864,17 @@ export const Home: React.FC<HomeProps> = ({
       if (maskEl) {
         operationMaskAnimationRef.current?.cancel()
         maskEl.style.visibility = "visible"
-        operationMaskAnimationRef.current = maskEl.animate([{ opacity: 0 }, { opacity: 1 }], {
-          duration: operationMorphOpenDuration,
-          easing: operationMorphEasing,
-          fill: "both",
-        })
+        operationMaskAnimationRef.current = maskEl.animate(
+          [
+            { opacity: 0, backdropFilter: "blur(0px)", WebkitBackdropFilter: "blur(0px)" },
+            { opacity: 1, backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" },
+          ],
+          {
+            duration: operationMorphOpenDuration,
+            easing: operationMorphEasing,
+            fill: "both",
+          }
+        )
         logHome("operation:morph:mask-fade-in", {
           duration: operationMorphOpenDuration,
           easing: operationMorphEasing,
@@ -1250,11 +1256,17 @@ export const Home: React.FC<HomeProps> = ({
             }
           )
           if (maskEl) {
-            operationMaskAnimationRef.current = maskEl.animate([{ opacity: 1 }, { opacity: 0 }], {
-              duration: operationMorphCloseDuration,
-              easing: operationMorphCloseEasing,
-              fill: "both",
-            })
+            operationMaskAnimationRef.current = maskEl.animate(
+              [
+                { opacity: 1, backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" },
+                { opacity: 0, backdropFilter: "blur(0px)", WebkitBackdropFilter: "blur(0px)" },
+              ],
+              {
+                duration: operationMorphCloseDuration,
+                easing: operationMorphCloseEasing,
+                fill: "both",
+              }
+            )
             logHome("operation:morph:mask-fade-out", {
               duration: operationMorphCloseDuration,
               easing: operationMorphCloseEasing,