diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html
index 59cf39d02c..3f562511a3 100644
--- a/bskyweb/templates/base.html
+++ b/bskyweb/templates/base.html
@@ -70,10 +70,35 @@
     }
     #splash {
       position: fixed;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: white;
+      pointer-events: none;
+    }
+    #splash svg {
       width: 100px;
-      left: 50%;
-      top: 50%;
-      transform: translateX(-50%) translateY(-50%) translateY(-50px);
+    }
+    @media (prefers-color-scheme: dark) {
+      #splash {
+        background-color: black;
+      }
+    }
+    .animate-splash {
+      animation: splash-out 0.2s ease-in forwards;
+    }
+    @keyframes splash-out {
+      0% {
+        opacity: 1;
+      }
+      80% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 0;
+        transform: scale(1.5);
+      }
     }
     /* We need this style to prevent web dropdowns from shifting the display when opening */
     body {
@@ -96,11 +121,11 @@
 </head>
 <body>
 {%- block body_all %}
-  <div id="root">
-    <div id="splash">
-      <!-- Bluesky SVG -->
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 320"><path fill="#0085ff" d="M180 142c-16.3-31.7-60.7-90.8-102-120C38.5-5.9 23.4-1 13.5 3.4 2.1 8.6 0 26.2 0 36.5c0 10.4 5.7 84.8 9.4 97.2 12.2 41 55.7 55 95.7 50.5-58.7 8.6-110.8 30-42.4 106.1 75.1 77.9 103-16.7 117.3-64.6 14.3 48 30.8 139 116 64.6 64-64.6 17.6-97.5-41.1-106.1 40 4.4 83.5-9.5 95.7-50.5 3.7-12.4 9.4-86.8 9.4-97.2 0-10.3-2-27.9-13.5-33C336.5-1 321.5-6 282 22c-41.3 29.2-85.7 88.3-102 120Z"/></svg>
-    </div>
+  <div id="root"></div>
+
+  <div id="splash">
+    <!-- Bluesky SVG -->
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 320"><path fill="#0085ff" d="M180 142c-16.3-31.7-60.7-90.8-102-120C38.5-5.9 23.4-1 13.5 3.4 2.1 8.6 0 26.2 0 36.5c0 10.4 5.7 84.8 9.4 97.2 12.2 41 55.7 55 95.7 50.5-58.7 8.6-110.8 30-42.4 106.1 75.1 77.9 103-16.7 117.3-64.6 14.3 48 30.8 139 116 64.6 64-64.6 17.6-97.5-41.1-106.1 40 4.4 83.5-9.5 95.7-50.5 3.7-12.4 9.4-86.8 9.4-97.2 0-10.3-2-27.9-13.5-33C336.5-1 321.5-6 282 22c-41.3 29.2-85.7 88.3-102 120Z"/></svg>
   </div>
 
   <noscript>
diff --git a/index.web.js b/index.web.js
index be75bc772e..995ce3e513 100644
--- a/index.web.js
+++ b/index.web.js
@@ -5,4 +5,12 @@ import {registerRootComponent} from 'expo'
 
 import App from '#/App'
 
+const splash = document.querySelector('#splash')
+if (splash) {
+  splash.classList.add('animate-splash')
+  setTimeout(() => {
+    splash.remove()
+  }, 500)
+}
+
 registerRootComponent(App)
diff --git a/web/index.html b/web/index.html
index 7b29597bb7..ea710e5885 100644
--- a/web/index.html
+++ b/web/index.html
@@ -75,10 +75,35 @@
       }
       #splash {
         position: fixed;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: white;
+        pointer-events: none;
+      }
+      #splash svg {
         width: 100px;
-        left: 50%;
-        top: 50%;
-        transform: translateX(-50%) translateY(-50%) translateY(-50px);
+      }
+      @media (prefers-color-scheme: dark) {
+        #splash {
+          background-color: black;
+        }
+      }
+      .animate-splash {
+        animation: splash-out 0.2s ease-in forwards;
+      }
+      @keyframes splash-out {
+        0% {
+          opacity: 1;
+        }
+        80% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 0;
+          transform: scale(1.5);
+        }
       }
       /* We need this style to prevent web dropdowns from shifting the display when opening */
       body {
@@ -138,11 +163,11 @@
     </noscript>
 
     <!-- The root element for your Expo app. -->
-    <div id="root">
-      <div id="splash">
+    <div id="root"></div>
+
+    <div id="splash">
         <!-- Bluesky SVG -->
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 320"><path fill="#0085ff" d="M180 142c-16.3-31.7-60.7-90.8-102-120C38.5-5.9 23.4-1 13.5 3.4 2.1 8.6 0 26.2 0 36.5c0 10.4 5.7 84.8 9.4 97.2 12.2 41 55.7 55 95.7 50.5-58.7 8.6-110.8 30-42.4 106.1 75.1 77.9 103-16.7 117.3-64.6 14.3 48 30.8 139 116 64.6 64-64.6 17.6-97.5-41.1-106.1 40 4.4 83.5-9.5 95.7-50.5 3.7-12.4 9.4-86.8 9.4-97.2 0-10.3-2-27.9-13.5-33C336.5-1 321.5-6 282 22c-41.3 29.2-85.7 88.3-102 120Z"/></svg>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360"><path fill="#0085ff" d="M180 142c-16.3-31.7-60.7-90.8-102-120C38.5-5.9 23.4-1 13.5 3.4 2.1 8.6 0 26.2 0 36.5c0 10.4 5.7 84.8 9.4 97.2 12.2 41 55.7 55 95.7 50.5-58.7 8.6-110.8 30-42.4 106.1 75.1 77.9 103-16.7 117.3-64.6 14.3 48 30.8 139 116 64.6 64-64.6 17.6-97.5-41.1-106.1 40 4.4 83.5-9.5 95.7-50.5 3.7-12.4 9.4-86.8 9.4-97.2 0-10.3-2-27.9-13.5-33C336.5-1 321.5-6 282 22c-41.3 29.2-85.7 88.3-102 120Z"/></svg>
       </div>
-    </div>
   </body>
 </html>
