diff --git a/website/index.html b/website/index.html
index c2055957c..61b84f9df 100644
--- a/website/index.html
+++ b/website/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-loading>
   <head>
     <meta charset="utf-8" />
     <title>bitview</title>
@@ -14,6 +14,33 @@
     />
     <link rel="manifest" href="/manifest.webmanifest" />
     <meta name="mobile-web-app-capable" content="yes" />
+    <style>
+      html,
+      body {
+        background: var(--black);
+      }
+
+      body::before {
+        content: "";
+        position: fixed;
+        inset: 0;
+        z-index: 100;
+        background: var(--black);
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 150ms ease;
+      }
+
+      html[data-loading] body::before {
+        opacity: 1;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        body::before {
+          transition: none;
+        }
+      }
+    </style>
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
     <link rel="shortcut icon" href="/favicon.ico" />
diff --git a/website/main.js b/website/main.js
index 19c0f7b72..373c265a4 100644
--- a/website/main.js
+++ b/website/main.js
@@ -103,3 +103,9 @@ document.addEventListener("click", (event) => {
 window.addEventListener("popstate", renderPage);
 
 renderPage();
+
+requestAnimationFrame(() => {
+  setTimeout(() => {
+    delete document.documentElement.dataset.loading;
+  }, 150);
+});
diff --git a/website/styles/main.css b/website/styles/main.css
index 49f05dee6..856b971f0 100644
--- a/website/styles/main.css
+++ b/website/styles/main.css
@@ -16,7 +16,7 @@ body {
     opacity: 0;
     pointer-events: none;
     scroll-behavior: smooth;
-    transition: opacity 180ms ease;
+    transition: opacity 150ms ease;
   }
 
   > main[data-active] {
