5ebb3e20f9
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>
385 lines
13 KiB
Vue
385 lines
13 KiB
Vue
<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 logo-block-1"
|
|
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 logo-block-2"
|
|
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 logo-block-3"
|
|
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 logo-block-4"
|
|
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 logo-block-5"
|
|
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 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"
|
|
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 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"
|
|
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 logo-diagonal-3"
|
|
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 logo-diagonal-4"
|
|
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 - Staggered timing */
|
|
.logo-stroke {
|
|
stroke-dasharray: 2000;
|
|
stroke-dashoffset: 2000;
|
|
fill: transparent;
|
|
}
|
|
|
|
/* 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 0.4s forwards, undrawStroke 2s ease-in 2.5s 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 {
|
|
to {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes undrawStroke {
|
|
from {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
to {
|
|
stroke-dashoffset: 2000;
|
|
}
|
|
}
|
|
|
|
/* Fill Appearance Animation - starts after strokes mostly drawn */
|
|
.logo-fill {
|
|
opacity: 0;
|
|
animation: fillAppear 0.8s ease-out 1.2s forwards, fillDisappear 0.8s ease-in 3s forwards;
|
|
}
|
|
|
|
/* Stagger fill animations slightly for draw */
|
|
.logo-fill-1 { animation-delay: 1.2s, 3.9s; }
|
|
.logo-fill-2 { animation-delay: 1.3s, 3.8s; }
|
|
.logo-fill-3 { animation-delay: 1.4s, 3.7s; }
|
|
.logo-fill-4 { animation-delay: 1.5s, 3.6s; }
|
|
.logo-fill-5 { animation-delay: 1.6s, 3.5s; }
|
|
.logo-fill-6 { animation-delay: 1.7s, 3.4s; }
|
|
.logo-fill-7 { animation-delay: 1.8s, 3.3s; }
|
|
.logo-fill-8 { animation-delay: 1.9s, 3.2s; }
|
|
.logo-fill-9 { animation-delay: 2.0s, 3.1s; }
|
|
.logo-fill-10 { animation-delay: 2.1s, 3.0s; }
|
|
|
|
@keyframes fillAppear {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fillDisappear {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Splash Fade Out Transition */
|
|
.splash-fade-leave-active {
|
|
transition: opacity 1.5s ease;
|
|
}
|
|
|
|
.splash-fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|