Replace desktop demo video with launcher and activity screenshot

README.md

@@ -19,9 +19,8 @@ Choose a layout per workspace and configure the desktop through Settings or a KD
 has packages for Fedora 44 and Arch Linux on x86_64. This README and the wiki
 describe `main`.
 
-https://github.com/user-attachments/assets/681f0748-8813-4e2d-b3cc-28a3dc5b3c64
+![Ferese desktop with the launcher, build progress, Appearance settings and terminal windows](docs/images/screenshots/ferese-desktop.png)
 
-[Full demo at 2× speed](https://ferese-wm.github.io/ferese/#desktop-preview) ·
 [Screenshots](https://github.com/ferese-wm/ferese/wiki/Screenshots)
 
 ## Using Ferese

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', 'home.js', 'styles.css'):
+    for name in ('index.html', 'home.css', '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)

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`, `site/home.css` and `site/home.js`: homepage and desktop video.
+- `site/index.html` and `site/home.css`: homepage and desktop screenshots.
 - `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.
@@ -59,10 +59,8 @@ when no custom wallpaper is set. Settings keeps both defaults available below
 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
+website. Full captures retain their original 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
+The main desktop image is `docs/images/screenshots/ferese-desktop.png`.
-beside it. Playback is encoded at twice the recorded speed. The player starts
+The README and homepage use the same screenshot.
-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

@@ -9,7 +9,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 video { display: block; width: 100%; height: auto; aspect-ratio: 8/5; }
+.desktop-capture img { display: block; width: 100%; height: auto; }
 .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

@@ -1,18 +0,0 @@
-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 configurable Wayland desktop">
   <meta property="og:description" content="Scrolling and tree tiling with an included desktop shell, Settings and lock screen. Beta packages for Fedora and Arch Linux.">
   <meta property="og:type" content="website">
-  <meta property="og:image" content="https://ferese-wm.github.io/ferese/assets/videos/ferese-demo-poster.webp">
+  <meta property="og:image" content="https://ferese-wm.github.io/ferese/assets/screenshots/ferese-desktop.png">
   <meta property="og:image:width" content="2880">
   <meta property="og:image:height" content="1800">
   <meta name="twitter:card" content="summary_large_image">
@@ -18,7 +18,6 @@
   <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>
@@ -41,10 +40,7 @@
       <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">
-          <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">
+          <a href="assets/screenshots/ferese-desktop.png" target="_blank" rel="noopener" aria-label="View the Ferese desktop screenshot at full resolution"><img src="assets/screenshots/ferese-desktop.png" width="2881" height="1801" alt="Ferese desktop with the launcher, build progress in the panel, Appearance settings and terminal windows." fetchpriority="high" decoding="async"></a>
-            <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>