WatchItDev · geolffreym · Jul 30, 2025 · Jul 23, 2025 · Jul 24, 2025 · Jul 25, 2025
diff --git a/index.html b/index.html
@@ -74,10 +74,87 @@
     .w3a-parent-container #w3a-modal {
       background-color: rgba(0,0,0,0.4);
     }
+
+    :root {
+      --color-a: #4a34b8;
+      --color-b: #946ec8;
+      --color-c: #ed541d;
+      --color-d: #24879a;
+    }
+
+    #splash {
+      position: fixed;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background: #1e1f22;
+      overflow: hidden;
+    }
+
+    #splash img {
+      z-index: 10;
+      width: clamp(104px, calc(18vw * 0.8), 160px);
+      height: auto;
+      transform-origin: center;
+      will-change: transform, filter;
+      animation: pulseScale 1.8s ease-in-out infinite;
+    }
+
+    @keyframes pulseScale {
+      0%, 100% { transform: scale(1); }
+      50%      { transform: scale(1.1); }
+    }
+
+    #splash::before,
+    #splash::after {
+      content: "";
+      position: absolute;
+      width: 240px;
+      height: 240px;
+      border-radius: 50%;
+      filter: blur(100px);
+      opacity: 0.7;
+      mix-blend-mode: screen;
+      animation: orbit 14s linear infinite;
+    }
+
+    #splash::before {
+      background: var(--color-a);
+      animation-delay: -3s;
+    }
+
+    #splash::after {
+      background: var(--color-c);
+      animation-direction: reverse;
+    }
+
+    @keyframes orbit {
+      0%   { transform: translate(-150%, -80%)   scale(0.8); }
+      25%  { transform: translate(60%,  -120%)  scale(1.1); }
+      50%  { transform: translate(120%,  60%)   scale(0.9); }
+      75%  { transform: translate(-80%, 120%)   scale(1.2); }
+      100% { transform: translate(-150%, -80%)  scale(0.8); }
+    }
   </style>
 </head>
-<body>
-<div id="root"></div>
-<script type="module" src="./src/index.tsx"></script>
+<body style="margin: 0">
+<div id="splash">
+  <img src="/assets/white_logo.png" alt="Watchit logo">
+</div>
+
+<div id="root" style="opacity:0"></div>
+
+<script type="module" src="/src/index.tsx"></script>
+<script>
+  function showApp() {
+    const root = document.getElementById('root');
+    document.getElementById('splash')?.remove();
+    root.style.opacity = '1';
+    window.removeEventListener('app:ready', showApp);
+  }
+  window.addEventListener('app:ready', showApp);
+</script>
 </body>
 </html>