lfg2025/archy
1
0
Fork 0
Code Issues 14 Pull Requests Actions Packages Projects Releases 44 Wiki Activity

Update SplashScreen component with improved text and logo interactions

Browse Source 
- 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.
This commit is contained in:
Dorian 2026-02-18 10:44:32 +00:00
parent 55a13e0183
commit 35110905ff
1 changed files with 37 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
neode-ui/src/components/SplashScreen.vue
View File

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