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
2026-02-03 00:11:08 +00:00
parent d44878bae6
commit 896e5d3ced
2 changed files with 352 additions and 0 deletions

View File

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