lfg2025/archy
1
0
Fork 0
Code Issues 16 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="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 }" :class="{ 'opacity-0': tapStartTransitioning }"
> >
Enter the Exit Enter to Exit
</span> </span>
<div <div
class="tap-to-start-logo absolute" class="tap-to-start-logo absolute transition-transform duration-300 ease-out"
:class="{ 'tap-logo-launch': tapStartTransitioning }" :class="[
@mouseenter="introLogoHover = true" { 'tap-logo-launch': tapStartTransitioning },
{ 'scale-110': introLogoHover && !tapStartTransitioning }
]"
@mouseenter="onIntroLogoHover"
@mouseleave="introLogoHover = false" @mouseleave="introLogoHover = false"
> >
<!-- Audio viz ring - visible on hover --> <!-- Audio viz ring - visible on hover -->
@ -148,7 +151,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch } from 'vue' import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
import ScreensaverLogo from '@/components/ScreensaverLogo.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<{ const emit = defineEmits<{
complete: [] complete: []
@ -254,6 +257,11 @@ watch([showWelcome, showLogo], ([welcome, logo]) => {
// Check if user has seen intro // Check if user has seen intro
const seenIntro = localStorage.getItem('neode_intro_seen') === '1' const seenIntro = localStorage.getItem('neode_intro_seen') === '1'
function onIntroLogoHover() {
introLogoHover.value = true
if (!tapStartTransitioning.value) playKeyboardTypingSound()
}
function handleTapToStart() { function handleTapToStart() {
if (!showTapToStart.value || tapStartTransitioning.value) return if (!showTapToStart.value || tapStartTransitioning.value) return
resumeAudioContext() resumeAudioContext()
@ -636,12 +644,31 @@ onBeforeUnmount(() => {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
pointer-events: none; pointer-events: none;
color: rgba(0, 0, 0, 0.35); background: linear-gradient(
animation: tap-to-start-text-pulse 4s ease-in-out infinite; 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 { @keyframes tap-to-start-flare-wipe {
0%, 100% { color: rgba(0, 0, 0, 0.3); } 0%, 82%, 100% {
50% { color: rgba(0, 0, 0, 0.5); } background-position: 0% 0;
}
88% {
background-position: 100% 0;
}
} }
.tap-to-start-logo { .tap-to-start-logo {
position: relative; position: relative;