lfg2025/indee-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add heavily staggered border drawing animation

Browse Source 
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>
This commit is contained in:
Dorian
2026-02-03 00:15:26 +00:00
parent 33eb672b36
commit 5ebb3e20f9
1 changed files with 49 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/SplashIntro.vue
View File

@@ -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 {