From f1bf12bb98b95f1d16df2ce8f45dda920e3ee277 Mon Sep 17 00:00:00 2001
From: ZacharyZcR <zacharyzcr1984@gmail.com>
Date: Sun, 9 Nov 2025 08:19:42 +0800
Subject: [PATCH] feat: Add ripple effect to login/logout transitions

Add three-layer expanding ripple animation during fadeOut phase:
- Ripples expand from screen center using primary theme color
- Each layer has staggered delay (0ms, 150ms, 300ms) for wave effect
- Ripples fade out as they expand to create elegant visual feedback
- Uses pure CSS keyframe animation, no external libraries

Total animation: 800ms ripple + 300ms screen fade
---
 src/ui/desktop/DesktopApp.tsx | 41 ++++++++++++++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/ui/desktop/DesktopApp.tsx b/src/ui/desktop/DesktopApp.tsx
index 743ed13a..5d83275a 100644
--- a/src/ui/desktop/DesktopApp.tsx
+++ b/src/ui/desktop/DesktopApp.tsx
@@ -229,7 +229,46 @@ function AppContent() {
           className={`fixed inset-0 bg-background z-[20000] transition-opacity duration-300 ${
             transitionPhase === 'fadeOut' ? 'opacity-100' : 'opacity-0'
           }`}
-        />
+        >
+          {transitionPhase === 'fadeOut' && (
+            <>
+              <div className="absolute inset-0 flex items-center justify-center">
+                <div className="absolute w-0 h-0 bg-primary/20 rounded-full animate-[ping_1s_ease-out]"
+                     style={{
+                       animation: 'ripple 0.8s ease-out forwards',
+                       animationDelay: '0ms'
+                     }}
+                />
+                <div className="absolute w-0 h-0 bg-primary/15 rounded-full"
+                     style={{
+                       animation: 'ripple 0.8s ease-out forwards',
+                       animationDelay: '150ms'
+                     }}
+                />
+                <div className="absolute w-0 h-0 bg-primary/10 rounded-full"
+                     style={{
+                       animation: 'ripple 0.8s ease-out forwards',
+                       animationDelay: '300ms'
+                     }}
+                />
+              </div>
+              <style>{`
+                @keyframes ripple {
+                  0% {
+                    width: 0;
+                    height: 0;
+                    opacity: 1;
+                  }
+                  100% {
+                    width: 200vmax;
+                    height: 200vmax;
+                    opacity: 0;
+                  }
+                }
+              `}</style>
+            </>
+          )}
+        </div>
       )}
 
       <Toaster