From 766942e1897a668ae58da0aeb7848d6a867368e1 Mon Sep 17 00:00:00 2001
From: v0 <v0[bot]@users.noreply.github.com>
Date: Sat, 7 Mar 2026 14:50:53 +0000
Subject: [PATCH] feat: replace glitch flicker with smooth color gradient
 animation

Update title with decryption effect and continuous color cycle animation.

Co-authored-by: Simon <85533298+handsomezhuzhu@users.noreply.github.com>
---
 app/globals.css                | 29 +++++++++++++++++++++++++++++
 components/site-navigation.tsx | 19 ++++---------------
 2 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 1692fce..0971c1b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -124,3 +124,32 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* Cyber gradient flow animation */
+@keyframes gradient-flow {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.cyber-title {
+  background: linear-gradient(
+    90deg,
+    oklch(0.75 0.12 180),
+    oklch(0.7 0.15 220),
+    oklch(0.65 0.18 280),
+    oklch(0.7 0.15 320),
+    oklch(0.75 0.12 180)
+  );
+  background-size: 300% 100%;
+  animation: gradient-flow 6s ease infinite;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
diff --git a/components/site-navigation.tsx b/components/site-navigation.tsx
index b13da1a..c881082 100644
--- a/components/site-navigation.tsx
+++ b/components/site-navigation.tsx
@@ -374,7 +374,7 @@ function getServerBadgeStyle(server: string) {
 export function SiteNavigation() {
   const [searchQuery, setSearchQuery] = useState("")
   const [displayText, setDisplayText] = useState("")
-  const [glitchActive, setGlitchActive] = useState(false)
+  const [isAnimationDone, setIsAnimationDone] = useState(false)
   const fullText = "SIMON站点导航"
 
   useEffect(() => {
@@ -396,18 +396,12 @@ export function SiteNavigation() {
       if (frame > totalFrames) {
         clearInterval(interval)
         setDisplayText(fullText)
+        setIsAnimationDone(true)
       }
     }, 40)
 
-    // Periodic glitch effect
-    const glitchInterval = setInterval(() => {
-      setGlitchActive(true)
-      setTimeout(() => setGlitchActive(false), 150)
-    }, 4000)
-
     return () => {
       clearInterval(interval)
-      clearInterval(glitchInterval)
     }
   }, [])
 
@@ -431,14 +425,9 @@ export function SiteNavigation() {
         {/* Header - 居中设计 */}
         <header className="mb-16 text-center">
           <h1
-            className={`text-4xl md:text-6xl font-bold tracking-widest mb-4 font-mono transition-all duration-75 ${
-              glitchActive ? "text-primary [text-shadow:2px_0_#ff0080,-2px_0_#00ffff]" : "text-foreground"
+            className={`text-4xl md:text-6xl font-bold tracking-widest mb-4 font-mono transition-all duration-500 ${
+              isAnimationDone ? "cyber-title" : "text-foreground"
             }`}
-            style={{
-              textShadow: glitchActive
-                ? "2px 0 #ff0080, -2px 0 #00ffff, 0 0 20px rgba(var(--primary), 0.8)"
-                : "0 0 30px oklch(0.75 0.12 180 / 0.3)",
-            }}
           >
             {displayText || "SIMON站点导航"}
           </h1>