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>
This commit is contained in:
v0
2026-03-07 14:50:53 +00:00
parent 4dada4a6f8
commit 766942e189
2 changed files with 33 additions and 15 deletions

View File

@@ -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>