diff --git a/README.md b/README.md
index 8a6576b..1813676 100644
--- a/README.md
+++ b/README.md
@@ -27,9 +27,9 @@
 
 ## See it in 11 seconds
 
-[![File Island mixed-folder demo](docs/assets/demos/mixed-folder.jpg)](docs/assets/demos/mixed-folder.mp4)
+[![File Island mixed-folder demo](docs/assets/demos/mixed-folder.jpg)](https://treafree.github.io/FileIsland/#mixed-folder)
 
-> Click the poster to play. One folder containing images, video, and audio can be configured by media type and converted as a single batch.
+> Click the poster to play in your browser. One folder containing images, video, and audio can be configured by media type and converted as a single batch.
 
 ## Why File Island
 
@@ -80,13 +80,13 @@ For illustrated, step-by-step videos, read the [complete user guide](docs/USER_G
 
 | Image conversion | Video conversion and splitting |
 | --- | --- |
-| [![Image conversion](docs/assets/demos/image-conversion.jpg)](docs/assets/demos/image-conversion.mp4) | [![Video conversion and splitting](docs/assets/demos/video-conversion-and-splitting.jpg)](docs/assets/demos/video-conversion-and-splitting.mp4) |
-| [▶ Play image demo](docs/assets/demos/image-conversion.mp4) | [▶ Play video demo](docs/assets/demos/video-conversion-and-splitting.mp4) |
+| [![Image conversion](docs/assets/demos/image-conversion.jpg)](https://treafree.github.io/FileIsland/#image) | [![Video conversion and splitting](docs/assets/demos/video-conversion-and-splitting.jpg)](https://treafree.github.io/FileIsland/#video) |
+| [▶ Play image demo](https://treafree.github.io/FileIsland/#image) | [▶ Play video demo](https://treafree.github.io/FileIsland/#video) |
 
 | Audio conversion | Settings and language |
 | --- | --- |
-| [![Audio conversion](docs/assets/demos/audio-conversion.jpg)](docs/assets/demos/audio-conversion.mp4) | [![Settings](docs/assets/demos/settings.jpg)](docs/assets/demos/settings.mp4) |
-| [▶ Play audio demo](docs/assets/demos/audio-conversion.mp4) | [▶ Play settings demo](docs/assets/demos/settings.mp4) |
+| [![Audio conversion](docs/assets/demos/audio-conversion.jpg)](https://treafree.github.io/FileIsland/#audio) | [![Settings](docs/assets/demos/settings.jpg)](https://treafree.github.io/FileIsland/#settings) |
+| [▶ Play audio demo](https://treafree.github.io/FileIsland/#audio) | [▶ Play settings demo](https://treafree.github.io/FileIsland/#settings) |
 
 ## Current limitations
 
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 5c55cb5..c6a4779 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -27,9 +27,9 @@
 
 ## 先看 11 秒演示
 
-[![File Island 混合文件夹转换演示](docs/assets/demos/mixed-folder.jpg)](docs/assets/demos/mixed-folder.mp4)
+[![File Island 混合文件夹转换演示](docs/assets/demos/mixed-folder.jpg)](https://treafree.github.io/FileIsland/#mixed-folder)
 
-> 点击封面播放。一个同时包含图片、视频和音频的文件夹，可以在同一批任务中分别选择参数并一次完成转换。
+> 点击封面即可在浏览器中播放。一个同时包含图片、视频和音频的文件夹，可以在同一批任务中分别选择参数并一次完成转换。
 
 ## 为什么做 File Island
 
@@ -80,13 +80,13 @@ File Island 不试图替代专业剪辑软件，也不会声称支持尚未验
 
 | 图片转换 | 视频转换与切分 |
 | --- | --- |
-| [![图片转换](docs/assets/demos/image-conversion.jpg)](docs/assets/demos/image-conversion.mp4) | [![视频转换与切分](docs/assets/demos/video-conversion-and-splitting.jpg)](docs/assets/demos/video-conversion-and-splitting.mp4) |
-| [▶ 播放图片演示](docs/assets/demos/image-conversion.mp4) | [▶ 播放视频演示](docs/assets/demos/video-conversion-and-splitting.mp4) |
+| [![图片转换](docs/assets/demos/image-conversion.jpg)](https://treafree.github.io/FileIsland/#image) | [![视频转换与切分](docs/assets/demos/video-conversion-and-splitting.jpg)](https://treafree.github.io/FileIsland/#video) |
+| [▶ 播放图片演示](https://treafree.github.io/FileIsland/#image) | [▶ 播放视频演示](https://treafree.github.io/FileIsland/#video) |
 
 | 音频转换 | 设置与语言 |
 | --- | --- |
-| [![音频转换](docs/assets/demos/audio-conversion.jpg)](docs/assets/demos/audio-conversion.mp4) | [![设置](docs/assets/demos/settings.jpg)](docs/assets/demos/settings.mp4) |
-| [▶ 播放音频演示](docs/assets/demos/audio-conversion.mp4) | [▶ 播放设置演示](docs/assets/demos/settings.mp4) |
+| [![音频转换](docs/assets/demos/audio-conversion.jpg)](https://treafree.github.io/FileIsland/#audio) | [![设置](docs/assets/demos/settings.jpg)](https://treafree.github.io/FileIsland/#settings) |
+| [▶ 播放音频演示](https://treafree.github.io/FileIsland/#audio) | [▶ 播放设置演示](https://treafree.github.io/FileIsland/#settings) |
 
 ## 当前限制
 
diff --git a/docs/USER_GUIDE.md b/docs/USER_GUIDE.md
index df98b97..04b7fd0 100644
--- a/docs/USER_GUIDE.md
+++ b/docs/USER_GUIDE.md
@@ -31,7 +31,7 @@ Never disable Gatekeeper. Managed Macs may prohibit manual overrides.
 
 ## 3. Convert images
 
-[![Play the image conversion demo](assets/demos/image-conversion.jpg)](assets/demos/image-conversion.mp4)
+[![Play the image conversion demo](assets/demos/image-conversion.jpg)](https://treafree.github.io/FileIsland/#image)
 
 > Click the poster to play the image batch-conversion demo.
 
@@ -46,7 +46,7 @@ JPEG is a good default for photographs and smaller files. PNG suits transparency
 
 ## 4. Convert or split video for sharing
 
-[![Play the video conversion and splitting demo](assets/demos/video-conversion-and-splitting.jpg)](assets/demos/video-conversion-and-splitting.mp4)
+[![Play the video conversion and splitting demo](assets/demos/video-conversion-and-splitting.jpg)](https://treafree.github.io/FileIsland/#video)
 
 > Click the poster to play ordinary conversion and fast splitting.
 
@@ -74,7 +74,7 @@ The current fast mode copies existing encoded streams at safe keyframes and does
 
 ## 5. Convert audio
 
-[![Play the audio conversion demo](assets/demos/audio-conversion.jpg)](assets/demos/audio-conversion.mp4)
+[![Play the audio conversion demo](assets/demos/audio-conversion.jpg)](https://treafree.github.io/FileIsland/#audio)
 
 > Click the poster to play audio batch conversion.
 
@@ -87,7 +87,7 @@ MP3 is accepted as input but is not offered as output. M4A suits everyday playba
 
 ## 6. Convert a mixed folder
 
-[![Play the mixed-folder demo](assets/demos/mixed-folder.jpg)](assets/demos/mixed-folder.mp4)
+[![Play the mixed-folder demo](assets/demos/mixed-folder.jpg)](https://treafree.github.io/FileIsland/#mixed-folder)
 
 > Click the poster to play a folder containing images, video, and audio.
 
@@ -101,7 +101,7 @@ The batch uses safe staging and retains final results only after every executabl
 
 ## 7. Settings, language, and output folder
 
-[![Play the settings demo](assets/demos/settings.jpg)](assets/demos/settings.mp4)
+[![Play the settings demo](assets/demos/settings.jpg)](https://treafree.github.io/FileIsland/#settings)
 
 > Click the poster to play the menu-bar and Settings tour.
 
diff --git a/docs/USER_GUIDE.zh-CN.md b/docs/USER_GUIDE.zh-CN.md
index 16e072f..407b5df 100644
--- a/docs/USER_GUIDE.zh-CN.md
+++ b/docs/USER_GUIDE.zh-CN.md
@@ -31,7 +31,7 @@ File Island 会把转换工作留在你的 Mac 上。安装包已经包含应用
 
 ## 3. 图片转换
 
-[![播放图片转换演示](assets/demos/image-conversion.jpg)](assets/demos/image-conversion.mp4)
+[![播放图片转换演示](assets/demos/image-conversion.jpg)](https://treafree.github.io/FileIsland/#image)
 
 > 点击封面播放图片批量转换演示。
 
@@ -46,7 +46,7 @@ JPEG 适合照片和较小体积；PNG 适合需要透明背景或无损像素
 
 ## 4. 视频转换与为分享切分
 
-[![播放视频转换与切分演示](assets/demos/video-conversion-and-splitting.jpg)](assets/demos/video-conversion-and-splitting.mp4)
+[![播放视频转换与切分演示](assets/demos/video-conversion-and-splitting.jpg)](https://treafree.github.io/FileIsland/#video)
 
 > 点击封面播放普通视频转换和快速切分演示。
 
@@ -74,7 +74,7 @@ JPEG 适合照片和较小体积；PNG 适合需要透明背景或无损像素
 
 ## 5. 音频转换
 
-[![播放音频转换演示](assets/demos/audio-conversion.jpg)](assets/demos/audio-conversion.mp4)
+[![播放音频转换演示](assets/demos/audio-conversion.jpg)](https://treafree.github.io/FileIsland/#audio)
 
 > 点击封面播放音频批量转换演示。
 
@@ -87,7 +87,7 @@ MP3 当前可作为输入，但不提供 MP3 输出。M4A 适合日常播放和
 
 ## 6. 混合文件夹批处理
 
-[![播放混合文件夹演示](assets/demos/mixed-folder.jpg)](assets/demos/mixed-folder.mp4)
+[![播放混合文件夹演示](assets/demos/mixed-folder.jpg)](https://treafree.github.io/FileIsland/#mixed-folder)
 
 > 点击封面播放包含图片、视频和音频的文件夹转换演示。
 
@@ -101,7 +101,7 @@ MP3 当前可作为输入，但不提供 MP3 输出。M4A 适合日常播放和
 
 ## 7. 设置、语言和输出文件夹
 
-[![播放设置演示](assets/demos/settings.jpg)](assets/demos/settings.mp4)
+[![播放设置演示](assets/demos/settings.jpg)](https://treafree.github.io/FileIsland/#settings)
 
 > 点击封面播放菜单栏与设置窗口演示。
 
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..f4cb1bb
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,391 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="color-scheme" content="light dark">
+  <meta name="description" content="Watch File Island convert images, video, audio, and mixed folders directly in the browser.">
+  <link rel="icon" type="image/png" href="assets/FileIslandLogo.png">
+  <title>File Island — Video Guide</title>
+  <style>
+    :root {
+      --carbon: #090a0d;
+      --void: #090a0d;
+      --graphite: #17191f;
+      --mist: #eef2f6;
+      --paper: #ffffff;
+      --sun: #ffb437;
+      --ocean: #3979ef;
+      --muted: #68707e;
+      --hairline: rgba(14, 18, 26, 0.12);
+      --radius: 26px;
+      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
+      color: var(--carbon);
+      background: var(--mist);
+    }
+
+    * { box-sizing: border-box; }
+
+    html { scroll-behavior: smooth; }
+
+    body {
+      margin: 0;
+      min-width: 320px;
+      background:
+        radial-gradient(circle at 18% 0%, rgba(57, 121, 239, 0.12), transparent 28rem),
+        radial-gradient(circle at 85% 16%, rgba(255, 180, 55, 0.14), transparent 24rem),
+        var(--mist);
+    }
+
+    a { color: inherit; }
+
+    .shell {
+      width: min(1120px, calc(100% - 32px));
+      margin: 0 auto;
+      padding: 18px 0 72px;
+    }
+
+    .island {
+      position: sticky;
+      z-index: 10;
+      top: 12px;
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      align-items: center;
+      gap: 22px;
+      min-height: 58px;
+      padding: 10px 14px 10px 18px;
+      overflow: hidden;
+      color: #fff;
+      background: rgba(9, 10, 13, 0.94);
+      border: 1px solid rgba(255, 255, 255, 0.11);
+      border-radius: 22px;
+      box-shadow: 0 18px 44px rgba(15, 20, 31, 0.18);
+      backdrop-filter: blur(20px) saturate(1.3);
+    }
+
+    .island::after {
+      position: absolute;
+      right: -26%;
+      bottom: 0;
+      width: 34%;
+      height: 2px;
+      content: "";
+      background: linear-gradient(90deg, transparent, var(--ocean), #fff, var(--sun), transparent);
+      filter: drop-shadow(0 0 7px rgba(57, 121, 239, 0.9));
+      animation: scan 4.8s cubic-bezier(.4, 0, .2, 1) infinite;
+    }
+
+    @keyframes scan {
+      0%, 14% { transform: translateX(0); opacity: 0; }
+      26% { opacity: 1; }
+      78% { opacity: 1; }
+      92%, 100% { transform: translateX(-380%); opacity: 0; }
+    }
+
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-weight: 720;
+      letter-spacing: -0.02em;
+      text-decoration: none;
+      white-space: nowrap;
+    }
+
+    .brand-mark {
+      width: 30px;
+      height: 30px;
+      object-fit: contain;
+    }
+
+    .island nav {
+      display: flex;
+      justify-content: center;
+      gap: 18px;
+      color: rgba(255, 255, 255, 0.64);
+      font-size: 13px;
+    }
+
+    .island nav a {
+      text-decoration: none;
+      transition: color 150ms ease;
+    }
+
+    .island nav a:hover { color: #fff; }
+
+    .download {
+      padding: 9px 13px;
+      color: var(--carbon);
+      font-size: 13px;
+      font-weight: 720;
+      text-decoration: none;
+      background: #fff;
+      border-radius: 12px;
+    }
+
+    .hero {
+      display: grid;
+      grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
+      gap: 52px;
+      align-items: end;
+      padding: 104px 42px 86px;
+    }
+
+    .eyebrow,
+    .step {
+      margin: 0 0 14px;
+      color: var(--ocean);
+      font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
+      font-size: 12px;
+      font-weight: 760;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+    }
+
+    h1 {
+      max-width: 720px;
+      margin: 0;
+      font-size: clamp(46px, 8vw, 92px);
+      font-weight: 760;
+      letter-spacing: -0.065em;
+      line-height: 0.92;
+    }
+
+    .hero-copy {
+      margin: 0;
+      color: var(--muted);
+      font-size: 17px;
+      line-height: 1.55;
+    }
+
+    .hero-copy strong {
+      display: block;
+      margin-bottom: 12px;
+      color: var(--carbon);
+      font-size: 21px;
+      letter-spacing: -0.025em;
+    }
+
+    .guide {
+      display: grid;
+      gap: 24px;
+    }
+
+    .chapter {
+      display: grid;
+      grid-template-columns: minmax(190px, 0.34fr) minmax(0, 0.66fr);
+      gap: 30px;
+      align-items: start;
+      padding: 28px;
+      background: rgba(255, 255, 255, 0.84);
+      border: 1px solid var(--hairline);
+      border-radius: var(--radius);
+      box-shadow: 0 15px 35px rgba(31, 40, 58, 0.07);
+      scroll-margin-top: 92px;
+    }
+
+    .chapter-copy {
+      position: sticky;
+      top: 100px;
+      padding: 12px 4px;
+    }
+
+    h2 {
+      margin: 0 0 12px;
+      font-size: clamp(27px, 4vw, 42px);
+      letter-spacing: -0.045em;
+      line-height: 1.02;
+    }
+
+    .zh {
+      display: block;
+      margin-top: 7px;
+      color: var(--muted);
+      font-size: 0.58em;
+      font-weight: 610;
+      letter-spacing: -0.02em;
+    }
+
+    .chapter p:not(.step) {
+      margin: 0;
+      color: var(--muted);
+      font-size: 15px;
+      line-height: 1.55;
+    }
+
+    .player {
+      position: relative;
+      overflow: hidden;
+      background: var(--void);
+      border: 1px solid rgba(9, 10, 13, 0.18);
+      border-radius: 18px;
+      box-shadow: 0 16px 34px rgba(15, 18, 25, 0.18);
+    }
+
+    video {
+      display: block;
+      width: 100%;
+      aspect-ratio: 1600 / 1036;
+      background: var(--void);
+    }
+
+    footer {
+      display: flex;
+      justify-content: space-between;
+      gap: 20px;
+      padding: 42px 8px 0;
+      color: var(--muted);
+      font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
+      font-size: 12px;
+    }
+
+    footer a { text-underline-offset: 3px; }
+
+    :focus-visible {
+      outline: 3px solid var(--ocean);
+      outline-offset: 4px;
+    }
+
+    @media (max-width: 780px) {
+      .shell { width: min(100% - 20px, 680px); padding-top: 10px; }
+      .island { grid-template-columns: 1fr auto; top: 8px; }
+      .island nav { display: none; }
+      .hero { grid-template-columns: 1fr; gap: 28px; padding: 76px 16px 54px; }
+      .chapter { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
+      .chapter-copy { position: static; padding: 2px; }
+      footer { flex-direction: column; }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      html { scroll-behavior: auto; }
+      .island::after { animation: none; transform: translateX(-180%); opacity: 0.8; }
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --mist: #111318;
+        --paper: #191c22;
+        --carbon: #f4f6f8;
+        --graphite: #090a0d;
+        --muted: #a4aab5;
+        --hairline: rgba(255, 255, 255, 0.1);
+      }
+      body { background: #111318; }
+      .island { color: #fff; background: rgba(3, 4, 6, 0.94); }
+      .brand-mark, .download { color: #090a0d; }
+      .chapter { background: rgba(25, 28, 34, 0.92); }
+      .hero-copy strong { color: #f4f6f8; }
+      .player { border-color: rgba(255, 255, 255, 0.12); }
+    }
+  </style>
+</head>
+<body>
+  <div class="shell">
+    <header class="island">
+      <a class="brand" href="https://github.com/TREAFREE/FileIsland" aria-label="File Island on GitHub">
+        <img class="brand-mark" src="assets/FileIslandLogo.png" alt="">
+        <span>File Island</span>
+      </a>
+      <nav aria-label="Video chapters">
+        <a href="#mixed-folder">Mixed folder</a>
+        <a href="#video">Video</a>
+        <a href="#settings">Settings</a>
+      </nav>
+      <a class="download" href="https://github.com/TREAFREE/FileIsland/releases/latest">Download</a>
+    </header>
+
+    <main>
+      <section class="hero">
+        <div>
+          <p class="eyebrow">Browser video guide · 浏览器视频教程</p>
+          <h1>Watch the Island work.</h1>
+        </div>
+        <p class="hero-copy">
+          <strong>No download required.</strong>
+          Play every File Island walkthrough here. The videos are served from the public project and all media conversion still happens locally on your Mac.
+          <br><br>
+          无需下载演示视频，直接在浏览器中播放。File Island 的实际转换仍全部在你的 Mac 本地完成。
+        </p>
+      </section>
+
+      <div class="guide">
+        <section class="chapter" id="mixed-folder">
+          <div class="chapter-copy">
+            <p class="step">01 · Mixed media</p>
+            <h2>One folder, separate controls.<span class="zh">一个文件夹，分别设置</span></h2>
+            <p>Drop images, video, and audio together. File Island groups each media type and preserves its own conversion choices.</p>
+          </div>
+          <div class="player">
+            <video controls playsinline preload="metadata" poster="assets/demos/mixed-folder.jpg">
+              <source src="assets/demos/mixed-folder.mp4" type="video/mp4">
+              Your browser does not support H.264 MP4 playback.
+            </video>
+          </div>
+        </section>
+
+        <section class="chapter" id="image">
+          <div class="chapter-copy">
+            <p class="step">02 · Images</p>
+            <h2>Choose format, size, and quality.<span class="zh">选择格式、尺寸与质量</span></h2>
+            <p>Convert a single image or a batch to JPEG or PNG with explicit quality, dimensions, target size, and metadata controls.</p>
+          </div>
+          <div class="player">
+            <video controls playsinline preload="metadata" poster="assets/demos/image-conversion.jpg">
+              <source src="assets/demos/image-conversion.mp4" type="video/mp4">
+              Your browser does not support H.264 MP4 playback.
+            </video>
+          </div>
+        </section>
+
+        <section class="chapter" id="video">
+          <div class="chapter-copy">
+            <p class="step">03 · Video</p>
+            <h2>Convert or split for sharing.<span class="zh">转换，或快速切分后分享</span></h2>
+            <p>Use high-compatibility H.264 MP4 output, or split eligible H.264 MP4/MOV files at safe keyframes without re-encoding.</p>
+          </div>
+          <div class="player">
+            <video controls playsinline preload="metadata" poster="assets/demos/video-conversion-and-splitting.jpg">
+              <source src="assets/demos/video-conversion-and-splitting.mp4" type="video/mp4">
+              Your browser does not support H.264 MP4 playback.
+            </video>
+          </div>
+        </section>
+
+        <section class="chapter" id="audio">
+          <div class="chapter-copy">
+            <p class="step">04 · Audio</p>
+            <h2>Pick a useful audio output.<span class="zh">选择合适的音频格式</span></h2>
+            <p>Convert supported audio inputs to M4A, WAV, FLAC, or AIFF without installing a separate media runtime.</p>
+          </div>
+          <div class="player">
+            <video controls playsinline preload="metadata" poster="assets/demos/audio-conversion.jpg">
+              <source src="assets/demos/audio-conversion.mp4" type="video/mp4">
+              Your browser does not support H.264 MP4 playback.
+            </video>
+          </div>
+        </section>
+
+        <section class="chapter" id="settings">
+          <div class="chapter-copy">
+            <p class="step">05 · Settings</p>
+            <h2>Set it once, then keep moving.<span class="zh">设置一次，之后直接使用</span></h2>
+            <p>Choose a persistent output folder, language, appearance, login behavior, and optional single-file Clipboard copy.</p>
+          </div>
+          <div class="player">
+            <video controls playsinline preload="metadata" poster="assets/demos/settings.jpg">
+              <source src="assets/demos/settings.mp4" type="video/mp4">
+              Your browser does not support H.264 MP4 playback.
+            </video>
+          </div>
+        </section>
+      </div>
+    </main>
+
+    <footer>
+      <span>File Island · local-first media conversion</span>
+      <span><a href="https://github.com/TREAFREE/FileIsland">GitHub</a> · <a href="https://github.com/TREAFREE/FileIsland/releases/latest">Latest release</a></span>
+    </footer>
+  </div>
+</body>
+</html>