feat(site): show the desktop demo in the hero and README

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.

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; }

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();
+});

site/index.html

@@ -8,7 +8,7 @@
   <meta property="og:title" content="Ferese — A little more room.">
   <meta property="og:description" content="A configurable Wayland desktop for Linux that brings your windows and everyday controls together.">
   <meta property="og:type" content="website">
-  <meta property="og:image" content="https://ferese-wm.github.io/ferese/assets/screenshots/ferese-media.webp">
+  <meta property="og:image" content="https://ferese-wm.github.io/ferese/assets/videos/ferese-demo-poster.webp">
   <meta property="og:image:width" content="2880">
   <meta property="og:image:height" content="1800">
   <meta name="twitter:card" content="summary_large_image">
@@ -18,6 +18,7 @@
   <link rel="icon" href="assets/favicon-32.png" type="image/png" sizes="32x32">
   <link rel="stylesheet" href="styles.css">
   <link rel="stylesheet" href="home.css">
+  <script src="home.js" defer></script>
 </head>
 <body>
   <svg class="icon-definitions" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><defs>
@@ -39,7 +40,10 @@
       <div class="hero-actions"><a class="primary-button" href="https://github.com/ferese-wm/ferese/wiki/Installation">Get Ferese <svg class="icon"><use href="#i-arrow"/></svg></a><a class="inline-link" href="#desktop-preview">Take a look <svg class="icon down"><use href="#i-arrow"/></svg></a></div>
       <div class="desktop-stage" id="desktop-preview">
         <div class="desktop-capture" id="desktop-capture">
-          <img id="desktop-capture-image" src="assets/screenshots/ferese-media.webp" srcset="assets/screenshots/ferese-media-960.webp 960w, assets/screenshots/ferese-media-1440.webp 1440w, assets/screenshots/ferese-media.webp 2880w" sizes="(max-width: 700px) calc(100vw - 40px), (max-width: 1200px) calc(100vw - 80px), 1120px" width="2880" height="1800" alt="The Ferese desktop with a translucent Now Playing popup showing Spotify artwork and playback controls over the blue and violet city wallpaper." fetchpriority="high">
+          <video id="desktop-demo" width="2880" height="1800" controls muted loop playsinline preload="metadata" poster="assets/videos/ferese-demo-poster.webp" aria-label="Ferese desktop demonstration at twice the recorded speed">
+            <source src="assets/videos/ferese-demo-2x.mp4" type="video/mp4">
+            <a href="assets/videos/ferese-demo-2x.mp4">Watch the Ferese desktop demo at 2× speed</a>.
+          </video>
         </div>
       </div>
     </section>