From 4dada4a6f8753b7cf2888d5e76a706d8ba0c1c45 Mon Sep 17 00:00:00 2001
From: v0 <v0[bot]@users.noreply.github.com>
Date: Sat, 7 Mar 2026 14:48:57 +0000
Subject: [PATCH] feat: add cyberpunk navigation effects

Update site navigation title and remove top icon, add random glitch effects.

Co-authored-by: Simon <85533298+handsomezhuzhu@users.noreply.github.com>
---
 components/site-navigation.tsx | 73 +++++++++++++++++++++++++++-------
 1 file changed, 59 insertions(+), 14 deletions(-)

diff --git a/components/site-navigation.tsx b/components/site-navigation.tsx
index 43fcd89..b13da1a 100644
--- a/components/site-navigation.tsx
+++ b/components/site-navigation.tsx
@@ -2,8 +2,8 @@
 
 import type React from "react"
 
-import { useState } from "react"
-import { ExternalLink, Globe, Server, Mail, Zap, Shield, Code, FileText, Search } from "lucide-react"
+import { useState, useEffect } from "react"
+import { ExternalLink, Server, Mail, Zap, Shield, Code, FileText, Search } from "lucide-react"
 
 interface Site {
   domain: string
@@ -373,6 +373,43 @@ function getServerBadgeStyle(server: string) {
 
 export function SiteNavigation() {
   const [searchQuery, setSearchQuery] = useState("")
+  const [displayText, setDisplayText] = useState("")
+  const [glitchActive, setGlitchActive] = useState(false)
+  const fullText = "SIMON站点导航"
+
+  useEffect(() => {
+    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*_-+=<>?/\\|~"
+    let frame = 0
+    const totalFrames = fullText.length * 5
+
+    const interval = setInterval(() => {
+      let output = ""
+      for (let i = 0; i < fullText.length; i++) {
+        if (i < Math.floor(frame / 5)) {
+          output += fullText[i]
+        } else {
+          output += chars[Math.floor(Math.random() * chars.length)]
+        }
+      }
+      setDisplayText(output)
+      frame++
+      if (frame > totalFrames) {
+        clearInterval(interval)
+        setDisplayText(fullText)
+      }
+    }, 40)
+
+    // Periodic glitch effect
+    const glitchInterval = setInterval(() => {
+      setGlitchActive(true)
+      setTimeout(() => setGlitchActive(false), 150)
+    }, 4000)
+
+    return () => {
+      clearInterval(interval)
+      clearInterval(glitchInterval)
+    }
+  }, [])
 
   const filteredCategories = categories
     .map((category) => ({
@@ -393,19 +430,27 @@ export function SiteNavigation() {
       <div className="mx-auto max-w-6xl">
         {/* Header - 居中设计 */}
         <header className="mb-16 text-center">
-          <div className="inline-flex items-center justify-center gap-3 mb-6">
-            <div className="p-3 bg-primary/10 rounded-2xl">
-              <Globe className="size-8 text-primary" />
-            </div>
-          </div>
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground mb-4">
-            站点导航
+          <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"
+            }`}
+            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>
-          <p className="text-muted-foreground text-lg md:text-xl">
-            <span className="font-mono text-primary/80">zhuzihan.com</span>
-            <span className="mx-2 text-border">|</span>
-            全部站点与服务管理
-          </p>
+          <div className="flex items-center justify-center gap-2 mb-2">
+            <span className="block h-px w-16 bg-primary/30" />
+            <p className="text-muted-foreground text-sm md:text-base tracking-widest uppercase font-mono">
+              <span className="text-primary/80">zhuzihan.com</span>
+              <span className="mx-2 text-border">|</span>
+              全部站点与服务管理
+            </p>
+            <span className="block h-px w-16 bg-primary/30" />
+          </div>
         </header>
 
         {/* Search - 居中设计 */}