diff --git a/src/components/splash/LogoSplash.vue b/src/components/splash/LogoSplash.vue index 7777785..272b3a7 100644 --- a/src/components/splash/LogoSplash.vue +++ b/src/components/splash/LogoSplash.vue @@ -5,6 +5,7 @@ const emit = defineEmits<{ complete: [] }>() const isAnimating = ref(false) const showTagline = ref(false) +const showPsyop = ref(false) const isFading = ref(false) const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches @@ -13,28 +14,34 @@ onMounted(() => { if (prefersReducedMotion) { isAnimating.value = true showTagline.value = true + showPsyop.value = true setTimeout(() => emit('complete'), 800) return } + // Phase 1: Logo draws in requestAnimationFrame(() => { isAnimating.value = true }) - // Logo finishes at ~1700ms (6 paths * 200ms stagger + 700ms draw) - // Show tagline after logo is fully revealed + // Phase 2: Logo shrinks up, tagline words slam in one by one setTimeout(() => { showTagline.value = true - }, 1900) + }, 1800) - // Start fading out after tagline has been visible + // Phase 3: "PSYOP" lands last with extra punch + setTimeout(() => { + showPsyop.value = true + }, 2800) + + // Phase 4: Hold, then fade setTimeout(() => { isFading.value = true - }, 3800) + }, 4200) setTimeout(() => { emit('complete') - }, 4200) + }, 4700) }) @@ -43,7 +50,7 @@ onMounted(() => { class="splash-overlay" :class="{ 'splash-fade-out': isFading }" > -