From 896e5d3cedbe2c3f332082fbea08597776b7f3c4 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Tue, 3 Feb 2026 00:11:08 +0000
Subject: [PATCH] Add splash intro animation with logo

Animation Sequence (5 seconds total):
1. Borders draw (0-1.5s): Stroke dasharray animation
2. Fills appear (1.2-2.1s): Staggered opacity fade-in for each shape
3. Hold (2.1-3s): Logo fully visible
4. Undraw (3-4.5s): Scale down + fade out
5. Reveal (4.5-5s): Interface fades in

Features:
- Black background (#0a0a0a)
- SVG stroke-dasharray for border drawing effect
- Staggered fill animations for depth
- Center circle draws slower for emphasis
- Scale + fade undraw effect
- Fixed z-index: 9999 overlay
- Smooth transition when removing splash

Draft implementation ready for refinement!

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/components/SplashIntro.vue | 349 +++++++++++++++++++++++++++++++++
 src/views/Browse.vue           |   3 +
 2 files changed, 352 insertions(+)
 create mode 100644 src/components/SplashIntro.vue

diff --git a/src/components/SplashIntro.vue b/src/components/SplashIntro.vue
new file mode 100644
index 0000000..2a2f34e
--- /dev/null
+++ b/src/components/SplashIntro.vue
@@ -0,0 +1,349 @@
+<template>
+  <Transition name="splash-fade">
+    <div v-if="showSplash" class="splash-screen">
+      <div class="splash-content">
+        <svg 
+          width="400" 
+          height="400" 
+          viewBox="0 0 1374 1401" 
+          fill="none" 
+          xmlns="http://www.w3.org/2000/svg"
+          class="splash-logo"
+        >
+          <!-- Top Left Block -->
+          <path 
+            class="logo-stroke"
+            d="M321.5 2.5V417.5H1.5V2.5H321.5Z" 
+            stroke="url(#paint1_linear_548_65)" 
+            stroke-width="3"
+            fill="transparent"
+          />
+          <path 
+            class="logo-fill logo-fill-1"
+            d="M321.5 2.5V417.5H1.5V2.5H321.5Z" 
+            fill="url(#paint0_linear_548_65)"
+          />
+
+          <!-- Top Right Block -->
+          <path 
+            class="logo-stroke"
+            d="M1372.5 1.5V416.5H1052.5V1.5H1372.5Z" 
+            stroke="url(#paint3_linear_548_65)" 
+            stroke-width="3"
+            fill="transparent"
+          />
+          <path 
+            class="logo-fill logo-fill-2"
+            d="M1372.5 1.5V416.5H1052.5V1.5H1372.5Z" 
+            fill="url(#paint2_linear_548_65)"
+          />
+
+          <!-- Bottom Left Block -->
+          <path 
+            class="logo-stroke"
+            d="M321.5 984.5V1399.5H1.5V984.5H321.5Z" 
+            stroke="url(#paint5_linear_548_65)" 
+            stroke-width="3"
+            fill="transparent"
+          />
+          <path 
+            class="logo-fill logo-fill-3"
+            d="M321.5 984.5V1399.5H1.5V984.5H321.5Z" 
+            fill="url(#paint4_linear_548_65)"
+          />
+
+          <!-- Center Bottom Block (Dark) -->
+          <path 
+            class="logo-stroke"
+            d="M909.5 984.5V1399.5H464.5V984.5H909.5Z" 
+            stroke="url(#paint6_linear_548_65)" 
+            stroke-width="3"
+            fill="transparent"
+          />
+          <path 
+            class="logo-fill logo-fill-4"
+            d="M909.5 984.5V1399.5H464.5V984.5H909.5Z" 
+            fill="#1D1D1D"
+          />
+
+          <!-- Bottom Right Block -->
+          <path 
+            class="logo-stroke"
+            d="M1372.5 983.5V1398.5H1052.5V983.5H1372.5Z" 
+            stroke="url(#paint8_linear_548_65)" 
+            stroke-width="3"
+            fill="transparent"
+          />
+          <path 
+            class="logo-fill logo-fill-5"
+            d="M1372.5 983.5V1398.5H1052.5V983.5H1372.5Z" 
+            fill="url(#paint7_linear_548_65)"
+          />
+
+          <!-- Center Diagonals -->
+          <path 
+            class="logo-stroke logo-diagonal"
+            d="M467.042 558.5L630.433 841.5H469.695L306.305 558.5H467.042Z" 
+            stroke="url(#paint10_linear_548_65)" 
+            stroke-width="3"
+            fill="transparent"
+          />
+          <path 
+            class="logo-fill logo-fill-6"
+            d="M467.042 558.5L630.433 841.5H469.695L306.305 558.5H467.042Z" 
+            fill="url(#paint9_linear_548_65)"
+          />
+
+          <path 
+            class="logo-stroke logo-diagonal"
+            d="M832.507 558.5L995.897 841.5H835.092L671.701 558.5H832.507Z" 
+            stroke="url(#paint12_linear_548_65)" 
+            stroke-width="3"
+            fill="transparent"
+          />
+          <path 
+            class="logo-fill logo-fill-7"
+            d="M832.507 558.5L995.897 841.5H835.092L671.701 558.5H832.507Z" 
+            fill="url(#paint11_linear_548_65)"
+          />
+
+          <path 
+            class="logo-stroke logo-diagonal"
+            d="M1372.5 558.5V841.5H1200.56L1037.17 558.5H1372.5Z" 
+            stroke="url(#paint14_linear_548_65)" 
+            stroke-width="3"
+            fill="transparent"
+          />
+          <path 
+            class="logo-fill logo-fill-8"
+            d="M1372.5 558.5V841.5H1200.56L1037.17 558.5H1372.5Z" 
+            fill="url(#paint13_linear_548_65)"
+          />
+
+          <path 
+            class="logo-stroke logo-diagonal"
+            d="M101.646 558.5L265.036 841.5H1.5V558.5H101.646Z" 
+            stroke="url(#paint16_linear_548_65)" 
+            stroke-width="3"
+            fill="transparent"
+          />
+          <path 
+            class="logo-fill logo-fill-9"
+            d="M101.646 558.5L265.036 841.5H1.5V558.5H101.646Z" 
+            fill="url(#paint15_linear_548_65)"
+          />
+
+          <!-- Center Circle -->
+          <circle 
+            class="logo-stroke logo-circle"
+            cx="687.5" 
+            cy="210.5" 
+            r="209" 
+            stroke="url(#paint17_linear_548_65)" 
+            stroke-width="3"
+            fill="transparent"
+          />
+          <circle 
+            class="logo-fill logo-fill-10"
+            cx="687.5" 
+            cy="210.5" 
+            r="209" 
+            fill="#1D1D1D"
+          />
+
+          <defs>
+            <linearGradient id="paint0_linear_548_65" x1="124.804" y1="-297.569" x2="1351.77" y2="-186.399" gradientUnits="userSpaceOnUse">
+              <stop stop-color="#F0003D"/>
+              <stop offset="0.369792" stop-color="#FA4727"/>
+              <stop offset="0.776042" stop-color="#6B90F4"/>
+            </linearGradient>
+            <linearGradient id="paint1_linear_548_65" x1="0" y1="1" x2="323" y2="419" gradientUnits="userSpaceOnUse">
+              <stop stop-color="white"/>
+              <stop offset="1" stop-color="#F52532"/>
+            </linearGradient>
+            <linearGradient id="paint2_linear_548_65" x1="1175.8" y1="-298.569" x2="2402.77" y2="-187.399" gradientUnits="userSpaceOnUse">
+              <stop stop-color="#F0003D"/>
+              <stop offset="0.369792" stop-color="#FA4727"/>
+              <stop offset="0.776042" stop-color="#6B90F4"/>
+            </linearGradient>
+            <linearGradient id="paint3_linear_548_65" x1="1051" y1="0" x2="1374" y2="418" gradientUnits="userSpaceOnUse">
+              <stop stop-color="white"/>
+              <stop offset="1" stop-color="#F52532"/>
+            </linearGradient>
+            <linearGradient id="paint4_linear_548_65" x1="124.804" y1="684.431" x2="1351.77" y2="795.601" gradientUnits="userSpaceOnUse">
+              <stop stop-color="#F0003D"/>
+              <stop offset="0.369792" stop-color="#FA4727"/>
+              <stop offset="0.776042" stop-color="#6B90F4"/>
+            </linearGradient>
+            <linearGradient id="paint5_linear_548_65" x1="323" y1="1067.2" x2="6.09023e-06" y2="1316.8" gradientUnits="userSpaceOnUse">
+              <stop stop-color="white"/>
+              <stop offset="1" stop-color="#F52532"/>
+            </linearGradient>
+            <linearGradient id="paint6_linear_548_65" x1="687" y1="1401" x2="687" y2="983" gradientUnits="userSpaceOnUse">
+              <stop/>
+              <stop offset="1" stop-color="#666666"/>
+            </linearGradient>
+            <linearGradient id="paint7_linear_548_65" x1="1175.8" y1="683.431" x2="2402.77" y2="794.601" gradientUnits="userSpaceOnUse">
+              <stop stop-color="#F0003D"/>
+              <stop offset="0.369792" stop-color="#FA4727"/>
+              <stop offset="0.776042" stop-color="#6B90F4"/>
+            </linearGradient>
+            <linearGradient id="paint8_linear_548_65" x1="1374" y1="1066.2" x2="1051" y2="1315.8" gradientUnits="userSpaceOnUse">
+              <stop stop-color="white"/>
+              <stop offset="1" stop-color="#F52532"/>
+            </linearGradient>
+            <linearGradient id="paint9_linear_548_65" x1="-202.64" y1="492.439" x2="1176.93" y2="666.265" gradientUnits="userSpaceOnUse">
+              <stop stop-color="#F0003D"/>
+              <stop offset="0.369792" stop-color="#FA4727"/>
+              <stop offset="0.776042" stop-color="#6B90F4"/>
+            </linearGradient>
+            <linearGradient id="paint10_linear_548_65" x1="303.707" y1="557" x2="562.607" y2="896.973" gradientUnits="userSpaceOnUse">
+              <stop stop-color="#FAFAFA"/>
+              <stop offset="1" stop-color="#A5729F"/>
+            </linearGradient>
+            <linearGradient id="paint11_linear_548_65" x1="162.651" y1="492.439" x2="1542.49" y2="666.336" gradientUnits="userSpaceOnUse">
+              <stop stop-color="#F0003D"/>
+              <stop offset="0.369792" stop-color="#FA4727"/>
+              <stop offset="0.776042" stop-color="#6B90F4"/>
+            </linearGradient>
+            <linearGradient id="paint12_linear_548_65" x1="669.104" y1="557" x2="927.989" y2="897.025" gradientUnits="userSpaceOnUse">
+              <stop stop-color="#FAFAFA"/>
+              <stop offset="1" stop-color="#A5729F"/>
+            </linearGradient>
+            <linearGradient id="paint13_linear_548_65" x1="512.679" y1="492.439" x2="1933.21" y2="676.92" gradientUnits="userSpaceOnUse">
+              <stop stop-color="#F0003D"/>
+              <stop offset="0.369792" stop-color="#FA4727"/>
+              <stop offset="0.776042" stop-color="#6B90F4"/>
+            </linearGradient>
+            <linearGradient id="paint14_linear_548_65" x1="1034.57" y1="557" x2="1291.29" y2="904.456" gradientUnits="userSpaceOnUse">
+              <stop stop-color="#FAFAFA"/>
+              <stop offset="1" stop-color="#A5729F"/>
+            </linearGradient>
+            <linearGradient id="paint15_linear_548_65" x1="-411.498" y1="492.439" x2="715.627" y2="607.854" gradientUnits="userSpaceOnUse">
+              <stop stop-color="#F0003D"/>
+              <stop offset="0.369792" stop-color="#FA4727"/>
+              <stop offset="0.776042" stop-color="#6B90F4"/>
+            </linearGradient>
+            <linearGradient id="paint16_linear_548_65" x1="0" y1="557" x2="268" y2="843" gradientUnits="userSpaceOnUse">
+              <stop stop-color="#FAFAFA"/>
+              <stop offset="1" stop-color="#A5729F"/>
+            </linearGradient>
+            <linearGradient id="paint17_linear_548_65" x1="687.5" y1="0" x2="687.5" y2="421" gradientUnits="userSpaceOnUse">
+              <stop/>
+              <stop offset="1" stop-color="#666666"/>
+            </linearGradient>
+          </defs>
+        </svg>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+const showSplash = ref(true)
+
+onMounted(() => {
+  // Hide splash after animation completes (5s total animation)
+  setTimeout(() => {
+    showSplash.value = false
+  }, 5000)
+})
+</script>
+
+<style scoped>
+.splash-screen {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: #0a0a0a;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.splash-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.splash-logo {
+  width: 400px;
+  height: 400px;
+}
+
+/* Stroke Drawing Animation */
+.logo-stroke {
+  stroke-dasharray: 2000;
+  stroke-dashoffset: 2000;
+  fill: transparent;
+  animation: drawStroke 1.5s ease-out forwards;
+}
+
+/* Circle stroke draws slower */
+.logo-circle {
+  animation: drawStroke 2s ease-out forwards;
+}
+
+/* Diagonal strokes draw with slight delay */
+.logo-diagonal {
+  animation: drawStroke 1.5s ease-out 0.3s forwards;
+}
+
+@keyframes drawStroke {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+/* Fill Appearance Animation - starts after strokes mostly drawn */
+.logo-fill {
+  opacity: 0;
+  animation: fillAppear 0.8s ease-out 1.2s forwards;
+}
+
+/* Stagger fill animations slightly */
+.logo-fill-1 { animation-delay: 1.2s; }
+.logo-fill-2 { animation-delay: 1.3s; }
+.logo-fill-3 { animation-delay: 1.4s; }
+.logo-fill-4 { animation-delay: 1.5s; }
+.logo-fill-5 { animation-delay: 1.6s; }
+.logo-fill-6 { animation-delay: 1.7s; }
+.logo-fill-7 { animation-delay: 1.8s; }
+.logo-fill-8 { animation-delay: 1.9s; }
+.logo-fill-9 { animation-delay: 2.0s; }
+.logo-fill-10 { animation-delay: 2.1s; }
+
+@keyframes fillAppear {
+  to {
+    opacity: 1;
+  }
+}
+
+/* Reverse Animation - Undraw everything */
+.splash-logo {
+  animation: undrawAll 1.5s ease-in 3s forwards;
+}
+
+@keyframes undrawAll {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+}
+
+/* Splash Fade Out Transition */
+.splash-fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.splash-fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/views/Browse.vue b/src/views/Browse.vue
index 883b0e5..7900299 100644
--- a/src/views/Browse.vue
+++ b/src/views/Browse.vue
@@ -1,4 +1,7 @@
 <template>
+  <!-- Splash Intro -->
+  <SplashIntro />
+  
   <div class="browse-view">
     <!-- Header / Navigation -->
     <header class="fixed top-0 left-0 right-0 z-50 pt-4 px-4">