From 436998656b2e468be43fbc1515037bf39ce536dd Mon Sep 17 00:00:00 2001 From: Dorian Date: Thu, 23 Apr 2026 13:43:14 +0100 Subject: [PATCH] shortern splash intro --- src/components/SplashIntro.vue | 8 ++++++-- src/design-system/components/About.vue | 4 ++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/SplashIntro.vue b/src/components/SplashIntro.vue index 70703ed..4cc73ec 100644 --- a/src/components/SplashIntro.vue +++ b/src/components/SplashIntro.vue @@ -66,7 +66,11 @@ import { ref, onMounted, onBeforeUnmount } from 'vue' const props = defineProps({ - duration: { type: Number, default: 3800 }, + // Total on-screen time before the leave transition starts. + // Desktop animation ends at ~2.70s (stroke-draw finishes at 2.30s, + // fill finishes at 2.70s). We give it a 100ms breath then start the + // fade so the splash doesn't linger past its own climax. + duration: { type: Number, default: 2800 }, dismissOnTap: { type: Boolean, default: true }, respectReducedMotion: { type: Boolean, default: true }, portraitQuery: { type: String, default: '(max-width: 768px), (orientation: portrait) and (max-width: 900px)' } @@ -205,7 +209,7 @@ const dPortMound = `M 501.491 1116.015 C 501.156 1116.557, 499.810 1117, 498.50 } /* ---------- Exit ---------- */ -.splash-fade-leave-active { transition: opacity 600ms ease, filter 600ms ease; } +.splash-fade-leave-active { transition: opacity 400ms ease, filter 400ms ease; } .splash-fade-leave-to { opacity: 0; filter: blur(2px); } /* ---------- Reduced motion ---------- */ diff --git a/src/design-system/components/About.vue b/src/design-system/components/About.vue index e7cf188..2c6fbac 100644 --- a/src/design-system/components/About.vue +++ b/src/design-system/components/About.vue @@ -37,13 +37,13 @@ defineProps({ // visual contract — a caller reordering it would break the intent. const CARD_TONES = [ { - card: 'bg-paper border-line', + card: 'bg-cream border-line', year: 'text-muted', title: 'text-ink', body: 'text-muted', }, { - card: 'bg-cream border-line', + card: 'bg-paper border-line', year: 'text-muted', title: 'text-ink', body: 'text-muted',