From 5ebb3e20f9d93dc8c0c444cbdc9146cacb430200 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Tue, 3 Feb 2026 00:15:26 +0000
Subject: [PATCH] Add heavily staggered border drawing animation

Draw sequence (cascading):
- 0.0s: Top left block starts
- 0.2s: Top right block
- 0.4s: Center circle
- 0.6s: Diagonal 1
- 0.8s: Diagonal 2
- 1.0s: Diagonal 3
- 1.2s: Diagonal 4
- 1.4s: Bottom left block
- 1.6s: Bottom center block
- 1.8s: Bottom right block

Undraw mirrors this in perfect reverse!
Creates a beautiful cascading effect.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/components/SplashIntro.vue | 65 +++++++++++++++++++++++++---------
 1 file changed, 49 insertions(+), 16 deletions(-)

diff --git a/src/components/SplashIntro.vue b/src/components/SplashIntro.vue
index 111b77b..fcd6568 100644
--- a/src/components/SplashIntro.vue
+++ b/src/components/SplashIntro.vue
@@ -12,7 +12,7 @@
         >
           <!-- Top Left Block -->
           <path 
-            class="logo-stroke"
+            class="logo-stroke logo-block-1"
             d="M321.5 2.5V417.5H1.5V2.5H321.5Z" 
             stroke="url(#paint1_linear_548_65)" 
             stroke-width="3"
@@ -26,7 +26,7 @@
 
           <!-- Top Right Block -->
           <path 
-            class="logo-stroke"
+            class="logo-stroke logo-block-2"
             d="M1372.5 1.5V416.5H1052.5V1.5H1372.5Z" 
             stroke="url(#paint3_linear_548_65)" 
             stroke-width="3"
@@ -40,7 +40,7 @@
 
           <!-- Bottom Left Block -->
           <path 
-            class="logo-stroke"
+            class="logo-stroke logo-block-3"
             d="M321.5 984.5V1399.5H1.5V984.5H321.5Z" 
             stroke="url(#paint5_linear_548_65)" 
             stroke-width="3"
@@ -54,7 +54,7 @@
 
           <!-- Center Bottom Block (Dark) -->
           <path 
-            class="logo-stroke"
+            class="logo-stroke logo-block-4"
             d="M909.5 984.5V1399.5H464.5V984.5H909.5Z" 
             stroke="url(#paint6_linear_548_65)" 
             stroke-width="3"
@@ -68,7 +68,7 @@
 
           <!-- Bottom Right Block -->
           <path 
-            class="logo-stroke"
+            class="logo-stroke logo-block-5"
             d="M1372.5 983.5V1398.5H1052.5V983.5H1372.5Z" 
             stroke="url(#paint8_linear_548_65)" 
             stroke-width="3"
@@ -82,7 +82,7 @@
 
           <!-- Center Diagonals -->
           <path 
-            class="logo-stroke logo-diagonal"
+            class="logo-stroke logo-diagonal logo-diagonal-1"
             d="M467.042 558.5L630.433 841.5H469.695L306.305 558.5H467.042Z" 
             stroke="url(#paint10_linear_548_65)" 
             stroke-width="3"
@@ -95,7 +95,7 @@
           />
 
           <path 
-            class="logo-stroke logo-diagonal"
+            class="logo-stroke logo-diagonal logo-diagonal-2"
             d="M832.507 558.5L995.897 841.5H835.092L671.701 558.5H832.507Z" 
             stroke="url(#paint12_linear_548_65)" 
             stroke-width="3"
@@ -108,7 +108,7 @@
           />
 
           <path 
-            class="logo-stroke logo-diagonal"
+            class="logo-stroke logo-diagonal logo-diagonal-3"
             d="M1372.5 558.5V841.5H1200.56L1037.17 558.5H1372.5Z" 
             stroke="url(#paint14_linear_548_65)" 
             stroke-width="3"
@@ -121,7 +121,7 @@
           />
 
           <path 
-            class="logo-stroke logo-diagonal"
+            class="logo-stroke logo-diagonal logo-diagonal-4"
             d="M101.646 558.5L265.036 841.5H1.5V558.5H101.646Z" 
             stroke="url(#paint16_linear_548_65)" 
             stroke-width="3"
@@ -274,22 +274,55 @@ onMounted(() => {
   height: 400px;
 }
 
-/* Stroke Drawing Animation */
+/* Stroke Drawing Animation - Staggered timing */
 .logo-stroke {
   stroke-dasharray: 2000;
   stroke-dashoffset: 2000;
   fill: transparent;
-  animation: drawStroke 1.5s ease-out forwards, undrawStroke 1.5s ease-in 3s forwards;
 }
 
-/* Circle stroke draws slower */
+/* Top blocks draw first */
+.logo-block-1 {
+  animation: drawStroke 1.5s ease-out 0s forwards, undrawStroke 1.5s ease-in 3.4s forwards;
+}
+
+.logo-block-2 {
+  animation: drawStroke 1.5s ease-out 0.2s forwards, undrawStroke 1.5s ease-in 3.2s forwards;
+}
+
+/* Center circle draws after top blocks */
 .logo-circle {
-  animation: drawStroke 2s ease-out forwards, undrawStroke 2s ease-in 3s forwards;
+  animation: drawStroke 2s ease-out 0.4s forwards, undrawStroke 2s ease-in 2.5s forwards;
 }
 
-/* Diagonal strokes draw with slight delay */
-.logo-diagonal {
-  animation: drawStroke 1.5s ease-out 0.3s forwards, undrawStroke 1.5s ease-in 2.7s forwards;
+/* Diagonals draw in sequence */
+.logo-diagonal-1 {
+  animation: drawStroke 1.5s ease-out 0.6s forwards, undrawStroke 1.5s ease-in 2.8s forwards;
+}
+
+.logo-diagonal-2 {
+  animation: drawStroke 1.5s ease-out 0.8s forwards, undrawStroke 1.5s ease-in 2.6s forwards;
+}
+
+.logo-diagonal-3 {
+  animation: drawStroke 1.5s ease-out 1.0s forwards, undrawStroke 1.5s ease-in 2.4s forwards;
+}
+
+.logo-diagonal-4 {
+  animation: drawStroke 1.5s ease-out 1.2s forwards, undrawStroke 1.5s ease-in 2.2s forwards;
+}
+
+/* Bottom blocks draw last */
+.logo-block-3 {
+  animation: drawStroke 1.5s ease-out 1.4s forwards, undrawStroke 1.5s ease-in 2.0s forwards;
+}
+
+.logo-block-4 {
+  animation: drawStroke 1.5s ease-out 1.6s forwards, undrawStroke 1.5s ease-in 1.8s forwards;
+}
+
+.logo-block-5 {
+  animation: drawStroke 1.5s ease-out 1.8s forwards, undrawStroke 1.5s ease-in 1.6s forwards;
 }
 
 @keyframes drawStroke {