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>
This commit is contained in:
Dorian
349
src/components/SplashIntro.vue
Normal file
349
src/components/SplashIntro.vue
Normal file
@@ -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>
|
||||||
@@ -1,4 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<!-- Splash Intro -->
|
||||||
|
<SplashIntro />
|
||||||
|
|
||||||
<div class="browse-view">
|
<div class="browse-view">
|
||||||
<!-- Header / Navigation -->
|
<!-- Header / Navigation -->
|
||||||
<header class="fixed top-0 left-0 right-0 z-50 pt-4 px-4">
|
<header class="fixed top-0 left-0 right-0 z-50 pt-4 px-4">
|
||||||
|
|||||||
Reference in New Issue
Block a user