diff --git a/README.md b/README.md
index 263c770..747613e 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,9 @@
Ferese combines a window manager and desktop shell with one configuration.
-
+https://github.com/user-attachments/assets/681f0748-8813-4e2d-b3cc-28a3dc5b3c64
+
+[Watch the full demo at 2× speed](https://ferese-wm.github.io/ferese/#desktop-preview)
[View more screenshots](https://github.com/ferese-wm/ferese/wiki/Screenshots)
diff --git a/scripts/build-site.py b/scripts/build-site.py
index 66f4f7f..e495b22 100644
--- a/scripts/build-site.py
+++ b/scripts/build-site.py
@@ -33,7 +33,7 @@ def main():
if OUTPUT.exists():
shutil.rmtree(OUTPUT)
OUTPUT.mkdir(parents=True)
- for name in ('index.html', 'home.css', 'styles.css'):
+ for name in ('index.html', 'home.css', 'home.js', 'styles.css'):
shutil.copy2(ROOT / 'site' / name, OUTPUT / name)
(OUTPUT / 'assets').mkdir(exist_ok=True)
shutil.copytree(ROOT / 'site/assets', OUTPUT / 'assets', dirs_exist_ok=True)
diff --git a/site/README.md b/site/README.md
index 1f60abd..bb1fa65 100644
--- a/site/README.md
+++ b/site/README.md
@@ -15,7 +15,7 @@ python3 -m http.server 8080 --bind 127.0.0.1 --directory build/site
Open http://localhost:8080 for the homepage. Rebuild and refresh the browser
after changing the site sources.
-- `site/index.html` and `site/home.css`: homepage and desktop screenshots.
+- `site/index.html`, `site/home.css` and `site/home.js`: homepage and desktop video.
- `site/styles.css`: shared dark appearance, typography and navigation.
- `docs/*.md` and its configuration/development topic directories: guide sources published to the wiki.
- `scripts/build-site.py`: copies homepage assets and writes handbook redirects.
@@ -61,3 +61,8 @@ the current wallpaper preview.
Screenshots live in `docs/images/screenshots` and are shared by the README and
website. Full captures retain their original 2880×1800 resolution, while the
homepage uses smaller WebP versions for narrower screens.
+
+The hero recording is `site/assets/videos/ferese-demo-2x.mp4`, with its poster
+beside it. Playback is encoded at twice the recorded speed. The player starts
+muted, has standard playback controls, and waits for a click when reduced motion
+is enabled. The site build copies both files without re-encoding them.
diff --git a/site/assets/videos/ferese-demo-2x.mp4 b/site/assets/videos/ferese-demo-2x.mp4
new file mode 100644
index 0000000..635cb00
Binary files /dev/null and b/site/assets/videos/ferese-demo-2x.mp4 differ
diff --git a/site/assets/videos/ferese-demo-poster.webp b/site/assets/videos/ferese-demo-poster.webp
new file mode 100644
index 0000000..a8d3074
Binary files /dev/null and b/site/assets/videos/ferese-demo-poster.webp differ
diff --git a/site/home.css b/site/home.css
index 84ad471..f7e2985 100644
--- a/site/home.css
+++ b/site/home.css
@@ -7,7 +7,7 @@ h1 { font-size: clamp(45px, 6.1vw, 80px); font-weight: 590; letter-spacing: -.05
.down { transform: rotate(90deg); }
.desktop-stage { min-width: 0; max-width: 100%; margin-top: 47px; scroll-margin-top: 100px; }
.desktop-capture { min-width: 0; max-width: 100%; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--soft); box-shadow: 0 28px 60px -38px #000000a0; }
-.desktop-capture img { display: block; width: 100%; height: auto; aspect-ratio: 8/5; }
+.desktop-capture video { display: block; width: 100%; height: auto; aspect-ratio: 8/5; }
.layout-section { padding-block: 132px 115px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 55px; margin-bottom: 39px; }
h2 { font-size: 48px; line-height: 1.12; font-weight: 560; letter-spacing: -2px; margin: 0; text-wrap: balance; }
diff --git a/site/home.js b/site/home.js
new file mode 100644
index 0000000..dac9c2d
--- /dev/null
+++ b/site/home.js
@@ -0,0 +1,18 @@
+const demo = document.querySelector('#desktop-demo');
+const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+let started = false;
+
+// Start muted when the demo comes into view. Native controls remain available
+// without JavaScript and after a visitor pauses playback.
+const visibility = new IntersectionObserver(([entry]) => {
+ if (!entry.isIntersecting) {
+ demo.pause();
+ } else if (!started && !reducedMotion.matches) {
+ started = true;
+ demo.play().catch(() => {});
+ }
+}, { threshold: 0.25 });
+visibility.observe(demo);
+reducedMotion.addEventListener('change', () => {
+ if (reducedMotion.matches) demo.pause();
+});
diff --git a/site/index.html b/site/index.html
index 6e3ea88..f26138e 100644
--- a/site/index.html
+++ b/site/index.html
@@ -8,7 +8,7 @@
-
+
@@ -18,6 +18,7 @@
+