update splash screen

src/lib/components/SplashScreen.svelte

@@ -1,158 +1,247 @@
 <script lang="ts">
-  let containerEl: HTMLDivElement;
+  let { closing = false } = $props();
-  let mouseX = $state(0);
-  let mouseY = $state(0);
-
-  function handleMouseMove(event: MouseEvent) {
-    if (!containerEl) return;
-    const { clientX, clientY } = event;
-    const { left, top, width, height } = containerEl.getBoundingClientRect();
-    mouseX = (clientX - left - width / 2) / (width / 2);
-    mouseY = (clientY - top - height / 2) / (height / 2);
-  }
 </script>
 
-<div
+<div class="splash-screen" class:closing>
-  class="splash-screen"
+  <div class="content">
-  bind:this={containerEl}
+    <div class="logo-container">
-  onmousemove={handleMouseMove}
+      <img src="/logo-no-text.png" alt="Portal BTC Logo" class="logo" />
-  onmouseleave={() => {
+    </div>
-    mouseX = 0;
+
-    mouseY = 0;
+    <div class="branding">
-  }}
+      <h1 class="app-name">
->
+        <span class="portal">PORTAL</span><span class="btc">BTC</span>
-  <div class="grid-container" style="--mouse-x: {mouseX}; --mouse-y: {mouseY};">
+      </h1>
-    <div class="grid" />
+      <p class="tagline">Your portal to everything Bitcoin</p>
+    </div>
+
+    <div class="loading-container">
+      <div class="loading-bar">
+        <div class="loading-fill"></div>
+      </div>
+      <div class="loading-text">Initializing wallet...</div>
+    </div>
   </div>
-  <div class="logo-container">
+  <div class="arx-branding">
-    <img src="/favicon.png" alt="Portal BTC Logo" class="logo" />
+    <span class="powered-by">Powered by</span>
+    <img src="/arx-logo.svg" alt="Arx" class="arx-logo" />
   </div>
-  <div class="scanlines"></div>
 </div>
 
 <style>
+  .splash-screen.closing {
+    animation: wipe-out 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
+  }
+
+  @keyframes wipe-out {
+    from {
+      clip-path: circle(150% at top right);
+    }
+    to {
+      clip-path: circle(0% at top right);
+    }
+  }
+
   .splash-screen {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
-    background: radial-gradient(ellipse at center, #1b2735 0%, #090a0f 100%);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 9999;
-    color: white;
-    opacity: 1;
-    transition: opacity 1s ease-out;
     overflow: hidden;
   }
 
-  .grid-container {
+  .content {
-    position: absolute;
+    text-align: center;
-    width: 100%;
-    height: 100%;
-    perspective: 400px;
-    transform-style: preserve-3d;
-    transform: rotateX(calc(var(--mouse-y) * -5deg))
-      rotateY(calc(var(--mouse-x) * 5deg));
-    transition: transform 0.2s linear;
-  }
-
-  .grid {
-    position: absolute;
-    width: 250vw;
-    height: 250vh;
-    top: -75vh;
-    left: -75vw;
-    background-image:
-      linear-gradient(rgba(0, 255, 255, 0.4) 1px, transparent 1px),
-      linear-gradient(to right, rgba(0, 255, 255, 0.4) 1px, transparent 1px);
-    background-size: 50px 50px;
-    transform: rotateX(80deg) translateY(200px) translateZ(-300px);
-    animation: moveGrid 5s linear infinite;
-    will-change: background-position;
-  }
-
-  @keyframes moveGrid {
-    from {
-      background-position: 0 0;
-    }
-    to {
-      background-position: 0 -100px;
-    }
   }
 
   .logo-container {
     position: relative;
-    width: 40vw;
+    width: 120px;
-    max-width: 300px;
+    height: 120px;
-    animation: flicker 3s infinite;
+    margin: 0 auto 2rem;
+    animation: logoFloat 4s ease-in-out infinite;
+  }
+
+  @keyframes logoFloat {
+    0%,
+    100% {
+      transform: translateY(0px);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
   }
 
   .logo {
-    width: 100%;
+    position: relative;
-    height: auto;
-    object-fit: contain;
-    animation: pulse 2.5s infinite ease-in-out;
-    filter: drop-shadow(0 0 7px #ff00ff) drop-shadow(0 0 15px #00ffff)
-      drop-shadow(0 0 20px #ff00ff);
-  }
-
-  @keyframes pulse {
-    0% {
-      transform: scale(1);
-    }
-    50% {
-      transform: scale(1.05);
-    }
-    100% {
-      transform: scale(1);
-    }
-  }
-
-  @keyframes flicker {
-    0%,
-    100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.95;
-    }
-    52% {
-      opacity: 1;
-    }
-    55% {
-      opacity: 0.98;
-    }
-    56% {
-      opacity: 1;
-    }
-  }
-
-  .scanlines {
-    position: fixed;
-    top: 0;
-    left: 0;
     width: 100%;
     height: 100%;
-    background: linear-gradient(
+    object-fit: contain;
-      to bottom,
+    filter: drop-shadow(0 0 10px black) drop-shadow(0 0 20px black);
-      rgba(18, 16, 16, 0) 50%,
-      rgba(0, 0, 0, 0.25) 50%
-    );
-    background-size: 100% 4px;
-    animation: scanlines 0.2s linear infinite;
-    pointer-events: none;
-    z-index: 10000;
   }
 
-  @keyframes scanlines {
+  .branding {
+    margin-bottom: 1.5rem;
+  }
+
+  .app-name {
+    font-size: 2rem;
+    margin: 0 0 1rem 0;
+    letter-spacing: 0.2em;
+    line-height: 1.2;
+  }
+
+  .portal {
+    color: var(--primary-color);
+    -webkit-text-fill-color: white;
+    -webkit-text-stroke: 1px;
+  }
+
+  .btc {
+    color: var(--accent-color);
+    -webkit-text-fill-color: white;
+    -webkit-text-stroke: 1px;
+  }
+
+  .tagline {
+    font-size: 0.6rem;
+    color: rgba(255, 255, 255, 0.8);
+    -webkit-text-fill-color: white;
+    -webkit-text-stroke: 1px;
+    margin: 0;
+    letter-spacing: 0.1em;
+    animation: fadeInUp 1s ease-out 1s both;
+  }
+
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .loading-container {
+    animation: fadeInUp 1s ease-out 1.5s both;
+  }
+
+  .loading-bar {
+    width: 200px;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--accent-color);
+    border-radius: 2px;
+    margin: 0 auto 1rem;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .loading-fill {
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      var(--primary-color) 0%,
+      var(--accent-color) 50%,
+      var(--primary-color) 100%
+    );
+    border-radius: 2px;
+    animation: loadingProgress 3s ease-in-out infinite;
+  }
+
+  @keyframes loadingProgress {
     0% {
-      background-position: 0 0;
+      width: 0%;
+      transform: translateX(-100%);
+    }
+    50% {
+      width: 100%;
+      transform: translateX(0%);
     }
     100% {
-      background-position: 0 4px;
+      width: 100%;
+      transform: translateX(100%);
+    }
+  }
+
+  .loading-text {
+    font-size: 0.5rem;
+    color: rgba(255, 255, 255, 0.9);
+    letter-spacing: 0.1em;
+    animation: loadingText 2s ease-in-out infinite;
+  }
+
+  @keyframes loadingText {
+    0%,
+    20% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+    80%,
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .arx-branding {
+    position: absolute;
+    bottom: 2rem;
+    right: 2rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    opacity: 0;
+    animation: fadeInUp 1s ease-out 2s both;
+  }
+
+  .powered-by {
+    font-size: 0.85rem;
+    color: white;
+    -webkit-text-fill-color: white;
+    -webkit-text-stroke: 1px;
+  }
+
+  .arx-logo {
+    height: 2rem;
+    filter: drop-shadow(0 0 5px black);
+  }
+
+  @media (max-width: 768px) {
+    .app-name {
+      font-size: 1.5rem;
+    }
+
+    .tagline {
+      font-size: 0.5rem;
+    }
+
+    .logo-container {
+      width: 100px;
+      height: 100px;
+    }
+
+    .loading-bar {
+      width: 150px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .app-name {
+      font-size: 1.2rem;
+    }
+
+    .logo-container {
+      width: 80px;
+      height: 80px;
     }
   }
 </style>

src/routes/+layout.svelte

@@ -18,6 +18,7 @@
 
   let { children } = $props();
   let showSplash = $state(true);
+  let closingSplash = $state(false);
   let currentError = $state<AppError | null>(null);
   let showInstallPrompt = $state(false);
   let deferredPrompt: Event | undefined = $state(undefined);
@@ -45,7 +46,10 @@
 
   onMount(() => {
     setTimeout(() => {
-      showSplash = false;
+      closingSplash = true;
+      setTimeout(() => {
+        showSplash = false;
+      }, 1000);
     }, 3000);
 
     window.addEventListener("error", (event: ErrorEvent) => {
@@ -89,34 +93,141 @@
   <title>Portal BTC</title>
 </svelte:head>
 
-{#if showInstallPrompt && deferredPrompt}
+<div class="retro-shader">
-  <InstallPrompt onInstall={handleInstallClick} />
+  {#if showInstallPrompt && deferredPrompt}
-{:else if showSplash}
+    <InstallPrompt onInstall={handleInstallClick} />
-  <SplashScreen />
+  {:else if showSplash}
-{:else}
+    <SplashScreen closing={closingSplash} />
-  <main class="app-wrapper">
+  {:else if !$walletState.open && !isOnSetup}
-    {#if showSettingsButton}
-      <div class="settings-button-container">
-        <button class="retro-btn settings-btn" onclick={goToSettings}>
-          <iconify-icon icon="mdi:cog" width="16" height="16"></iconify-icon>
-          Settings
-        </button>
-      </div>
-    {/if}
-
-    {#if isOnSetup || $walletState.open}
-      {@render children()}
-    {/if}
-  </main>
-
-  {#if !$walletState.open && !isOnSetup}
     <PasswordDialog onunlock={() => startNwc()} />
-  {/if}
+  {:else}
-{/if}
+    <main class="app-wrapper">
+      {#if showSettingsButton}
+        <div class="settings-button-container">
+          <button class="retro-btn settings-btn" onclick={goToSettings}>
+            <iconify-icon icon="mdi:cog" width="16" height="16"></iconify-icon>
+            Settings
+          </button>
+        </div>
+      {/if}
 
-<ErrorDialog error={currentError} onclose={() => (currentError = null)} />
+      {@render children()}
+    </main>
+  {/if}
+
+  <ErrorDialog error={currentError} onclose={() => (currentError = null)} />
+</div>
 
 <style>
+  @keyframes flicker {
+    0% {
+      opacity: 0.27861;
+    }
+    5% {
+      opacity: 0.34769;
+    }
+    10% {
+      opacity: 0.23604;
+    }
+    15% {
+      opacity: 0.90626;
+    }
+    20% {
+      opacity: 0.18128;
+    }
+    25% {
+      opacity: 0.83891;
+    }
+    30% {
+      opacity: 0.65583;
+    }
+    35% {
+      opacity: 0.67807;
+    }
+    40% {
+      opacity: 0.26559;
+    }
+    45% {
+      opacity: 0.84693;
+    }
+    50% {
+      opacity: 0.96019;
+    }
+    55% {
+      opacity: 0.08594;
+    }
+    60% {
+      opacity: 0.20313;
+    }
+    65% {
+      opacity: 0.71988;
+    }
+    70% {
+      opacity: 0.53455;
+    }
+    75% {
+      opacity: 0.37288;
+    }
+    80% {
+      opacity: 0.71428;
+    }
+    85% {
+      opacity: 0.70428;
+    }
+    90% {
+      opacity: 0.7003;
+    }
+    95% {
+      opacity: 0.36108;
+    }
+    100% {
+      opacity: 0.24387;
+    }
+  }
+
+  .retro-shader {
+    position: relative;
+    height: 100vh;
+  }
+
+  .retro-shader::before {
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background:
+      linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
+      linear-gradient(
+        90deg,
+        rgba(255, 0, 0, 0.06),
+        rgba(0, 255, 0, 0.02),
+        rgba(0, 0, 255, 0.06)
+      );
+    z-index: 2000;
+    background-size:
+      100% 2px,
+      3px 100%;
+    pointer-events: none;
+  }
+
+  .retro-shader::after {
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(18, 16, 16, 0.1);
+    opacity: 0;
+    z-index: 2001;
+    pointer-events: none;
+    animation: flicker 0.15s infinite;
+  }
+
   .settings-button-container {
     position: absolute;
     top: 1rem;