From 35110905ff36e393d3562bdce458b0a049919705 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Wed, 18 Feb 2026 10:44:32 +0000
Subject: [PATCH] Update SplashScreen component with improved text and logo
 interactions

- Changed the tap-to-start text from "Enter the Exit" to "Enter to Exit" for clarity.
- Enhanced the logo hover effect to play a keyboard typing sound, improving user feedback.
- Updated CSS for the tap-to-start logo to include new transition effects and animations for a more engaging experience.
---
 neode-ui/src/components/SplashScreen.vue | 47 +++++++++++++++++++-----
 1 file changed, 37 insertions(+), 10 deletions(-)

diff --git a/neode-ui/src/components/SplashScreen.vue b/neode-ui/src/components/SplashScreen.vue
index 6bd912c5..fab330ef 100644
--- a/neode-ui/src/components/SplashScreen.vue
+++ b/neode-ui/src/components/SplashScreen.vue
@@ -108,12 +108,15 @@
             class="tap-to-start-text font-archipelago font-extrabold text-6xl sm:text-7xl md:text-8xl lg:text-9xl tracking-widest uppercase whitespace-nowrap select-none transition-opacity duration-300"
             :class="{ 'opacity-0': tapStartTransitioning }"
           >
-            Enter the Exit
+            Enter to Exit
           </span>
           <div
-            class="tap-to-start-logo absolute"
-            :class="{ 'tap-logo-launch': tapStartTransitioning }"
-            @mouseenter="introLogoHover = true"
+            class="tap-to-start-logo absolute transition-transform duration-300 ease-out"
+            :class="[
+              { 'tap-logo-launch': tapStartTransitioning },
+              { 'scale-110': introLogoHover && !tapStartTransitioning }
+            ]"
+            @mouseenter="onIntroLogoHover"
             @mouseleave="introLogoHover = false"
           >
             <!-- Audio viz ring - visible on hover -->
@@ -148,7 +151,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
 import ScreensaverLogo from '@/components/ScreensaverLogo.vue'
-import { playIntroTyping, playLoopStart, playPop, playWelcomeNoderunnerSpeech, resumeAudioContext, startSynthwave, stopIntroTyping } from '@/composables/useLoginSounds'
+import { playIntroTyping, playKeyboardTypingSound, playLoopStart, playPop, playWelcomeNoderunnerSpeech, resumeAudioContext, startSynthwave, stopIntroTyping } from '@/composables/useLoginSounds'
 
 const emit = defineEmits<{
   complete: []
@@ -254,6 +257,11 @@ watch([showWelcome, showLogo], ([welcome, logo]) => {
 // Check if user has seen intro
 const seenIntro = localStorage.getItem('neode_intro_seen') === '1'
 
+function onIntroLogoHover() {
+  introLogoHover.value = true
+  if (!tapStartTransitioning.value) playKeyboardTypingSound()
+}
+
 function handleTapToStart() {
   if (!showTapToStart.value || tapStartTransitioning.value) return
   resumeAudioContext()
@@ -636,12 +644,31 @@ onBeforeUnmount(() => {
   position: absolute;
   z-index: 0;
   pointer-events: none;
-  color: rgba(0, 0, 0, 0.35);
-  animation: tap-to-start-text-pulse 4s ease-in-out infinite;
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.35) 0%,
+    rgba(0, 0, 0, 0.35) 38%,
+    rgba(0, 0, 0, 0.35) 40%,
+    rgba(255, 255, 255, 0.5) 48%,
+    rgba(255, 255, 255, 0.7) 50%,
+    rgba(255, 255, 255, 0.5) 52%,
+    rgba(0, 0, 0, 0.35) 60%,
+    rgba(0, 0, 0, 0.35) 100%
+  );
+  background-size: 250% 100%;
+  background-position: 0% 0;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: tap-to-start-flare-wipe 14s ease-in-out infinite;
 }
-@keyframes tap-to-start-text-pulse {
-  0%, 100% { color: rgba(0, 0, 0, 0.3); }
-  50% { color: rgba(0, 0, 0, 0.5); }
+@keyframes tap-to-start-flare-wipe {
+  0%, 82%, 100% {
+    background-position: 0% 0;
+  }
+  88% {
+    background-position: 100% 0;
+  }
 }
 .tap-to-start-logo {
   position: relative;