diff --git a/.github/assets/overview.gif b/.github/assets/overview.gif
new file mode 100644
index 0000000..e44aa25
Binary files /dev/null and b/.github/assets/overview.gif differ
diff --git a/README.md b/README.md
index ef9e7e7..bd8480d 100644
--- a/README.md
+++ b/README.md
@@ -13,9 +13,9 @@ ZYNLEX is a lightweight browser for local web development on Windows: the browse
 [![Release](https://img.shields.io/github/v/release/webtools-dotcom/Zynlex)](https://github.com/webtools-dotcom/Zynlex/releases/latest)
 [![Windows](https://img.shields.io/badge/Windows-10%20%7C%2011-blue)](https://github.com/webtools-dotcom/Zynlex/releases/latest)
 
-<img src=".github/assets/demo.gif" alt="Opening a detected dev server, watching the network log fill, and switching to a phone viewport" width="800" />
+<a href="https://webtools-dotcom.github.io/Zynlex/assets/zynlex-tour.mp4"><img src=".github/assets/overview.gif" alt="A tour of ZYNLEX: detected localhost servers, the network log, and mocking an API response as a 500 and as a slow endpoint" width="800" /></a>
 
-<sub>Text hard to read? There's a [1080p version](https://github.com/webtools-dotcom/Zynlex/releases/download/v0.9.0/high_quality.mp4) of the same clip.</sub>
+<sub>[Watch the full 55-second tour in 1080p](https://webtools-dotcom.github.io/Zynlex/assets/zynlex-tour.mp4) · [Website](https://webtools-dotcom.github.io/Zynlex/)</sub>
 
 ### [Download for Windows →](https://github.com/webtools-dotcom/Zynlex/releases/latest)
 
@@ -98,6 +98,10 @@ pnpm tauri dev
 
 ## A look around
 
+An unedited screen recording: opening a detected dev server, watching the network log fill, and switching to a phone viewport ([1080p](https://github.com/webtools-dotcom/Zynlex/releases/download/v0.9.0/high_quality.mp4)).
+
+<img src=".github/assets/demo.gif" alt="Opening a detected dev server, watching the network log fill, and switching to a phone viewport" width="820" />
+
 Your servers, on the new tab page:
 
 <img src=".github/assets/home.png" alt="New tab page listing three detected local dev servers" width="820" />
diff --git a/site/assets/tour-poster.jpg b/site/assets/tour-poster.jpg
new file mode 100644
index 0000000..56adc52
Binary files /dev/null and b/site/assets/tour-poster.jpg differ
diff --git a/site/assets/zynlex-tour.mp4 b/site/assets/zynlex-tour.mp4
new file mode 100644
index 0000000..df36444
Binary files /dev/null and b/site/assets/zynlex-tour.mp4 differ
diff --git a/site/index.html b/site/index.html
index be5eae6..932d68d 100644
--- a/site/index.html
+++ b/site/index.html
@@ -128,6 +128,8 @@
 section > .wrap > p.intro { color: var(--text-2); max-width: 62ch; margin: 0; }
 
 /* Text above, screenshot full width below — at half width the UI is unreadable. */
+.tour { padding: 56px 0 96px; }
+.tour video { display: block; width: 100%; height: auto; margin-top: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
 .feature { margin-top: 96px; }
 .feature .copy { display: grid; gap: 4px 56px; margin-bottom: 28px; }
 @media (min-width: 900px) {
@@ -235,6 +237,16 @@ <h1>The minimal browser for web developers.</h1>
     </div>
   </div>
 
+  <section class="tour" aria-label="Video tour">
+    <div class="wrap">
+      <div class="eyebrow">55-second tour</div>
+      <video controls preload="none" playsinline poster="assets/tour-poster.jpg" width="1920" height="1080">
+        <source src="assets/zynlex-tour.mp4" type="video/mp4">
+        <a href="assets/zynlex-tour.mp4">Watch the tour (MP4)</a>
+      </video>
+    </div>
+  </section>
+
   <section id="features">
     <div class="wrap">
       <div class="eyebrow">What it's for</div>