docs: add screenshot showcase to README + gallery

Replace the placeholder Screenshots section with a hero voice/video shot
and a curated 6-shot grid (chat, screen-share controls, spaces, federated
DMs, social discovery, federation admin), linking to a new
docs/screenshots.md gallery of all 14 shots grouped by feature.

Images are optimized to 1600px WebP (~1.2MB total vs ~45MB raw); raw
originals in demo-pictures/ are gitignored.

.gitignore

@@ -34,6 +34,9 @@ id_ed25519*
 # Generated deployment config (contains secrets)
 livekit.yaml
 
+# Raw screenshot originals — optimized WebP copies live in docs/screenshots/
+demo-pictures/
+
 # OS files
 .DS_Store
 Thumbs.db

README.md

@@ -32,18 +32,48 @@ inside a business — but not to resell as a hosted service. See
 
 ## Screenshots
 
-<!--
-  Drop screenshots into docs/screenshots/ and uncomment the block below.
-  Suggested shots: a space with channels, a voice channel with video tiles,
-  a DM conversation, and the Connections / federation settings panel.
-
 <div align="center">
-  <img src="docs/screenshots/space.png" alt="Space view" width="800" />
-  <img src="docs/screenshots/voice.png" alt="Voice & video" width="800" />
-</div>
--->
 
-_Screenshots coming soon._
+<img src="docs/screenshots/voice-video-grid.webp" alt="A voice channel with a grid of camera and screen-share tiles" width="900" />
+
+<sub><em>A voice channel in full swing — camera tiles alongside live screen-shares, each with its own resolution / frame-rate label.</em></sub>
+
+</div>
+
+<table>
+  <tr>
+    <td width="50%" valign="top">
+      <img src="docs/screenshots/chat.webp" alt="A text channel with messages and a typing indicator" /><br/>
+      <sub><b>Text channels</b> — Markdown, replies, reactions, read states, and live typing indicators.</sub>
+    </td>
+    <td width="50%" valign="top">
+      <img src="docs/screenshots/screen-share-settings.webp" alt="The screen-share settings popover" /><br/>
+      <sub><b>Screen-share controls</b> — resolution, frame rate, codec, and bitrate, within admin-set bounds.</sub>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <img src="docs/screenshots/space-discovery.webp" alt="The space discovery / Explore view" /><br/>
+      <sub><b>Spaces &amp; discovery</b> — browse public, request-to-join, and joined spaces.</sub>
+    </td>
+    <td width="50%" valign="top">
+      <img src="docs/screenshots/group-dm.webp" alt="A federated group direct message" /><br/>
+      <sub><b>Direct messages</b> — 1-on-1 and group DMs, including members on peer instances.</sub>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <img src="docs/screenshots/user-discovery.webp" alt="The find-people / user discovery view" /><br/>
+      <sub><b>Friends &amp; social</b> — find people across instances with mutual friends and spaces.</sub>
+    </td>
+    <td width="50%" valign="top">
+      <img src="docs/screenshots/admin-federation.webp" alt="The federation admin panel showing peered instances" /><br/>
+      <sub><b>Federation admin</b> — manage peered instances, relay, and secret rotation.</sub>
+    </td>
+  </tr>
+</table>
+
+<div align="center"><a href="docs/screenshots.md"><b>→ See all screenshots</b></a></div>
 
 ## Features
 

docs/screenshots.md

@@ -0,0 +1,107 @@
+# Screenshots
+
+A tour of Backspace in action, taken from a live test instance. For a quick
+overview, see the [Screenshots section of the README](../README.md#screenshots).
+
+> Images are captured from the Electron desktop app; the web app is identical.
+
+## Voice & video
+
+A voice channel scales from a couple of people to a full grid of camera tiles
+and live screen-shares, each labelled with its own resolution and frame rate.
+
+<div align="center">
+  <img src="screenshots/voice-video-grid.webp" alt="A voice channel with a grid of camera and screen-share tiles" width="900" /><br/>
+  <sub>Camera tiles and live screen-shares side by side, with per-stream quality labels.</sub>
+</div>
+
+<br/>
+
+<div align="center">
+  <img src="screenshots/voice-streams.webp" alt="A voice channel with several members streaming" width="900" /><br/>
+  <sub>Members can go live; others join with a <b>Watch Stream</b> button.</sub>
+</div>
+
+<br/>
+
+<div align="center">
+  <img src="screenshots/voice-call-pip.webp" alt="A voice channel with a picture-in-picture tile" width="900" /><br/>
+  <sub>Picture-in-Picture keeps the call visible while you browse other channels.</sub>
+</div>
+
+## Text chat
+
+<div align="center">
+  <img src="screenshots/chat.webp" alt="A text channel with an active conversation and a typing indicator" width="900" /><br/>
+  <sub>Real-time messages with read states and live typing indicators.</sub>
+</div>
+
+<br/>
+
+<div align="center">
+  <img src="screenshots/gif-picker.webp" alt="The GIF picker open in a text channel" width="900" /><br/>
+  <sub>Built-in GIF search (Klipy) and an emoji picker.</sub>
+</div>
+
+<br/>
+
+<div align="center">
+  <img src="screenshots/chat-moderation.webp" alt="The voice member context menu with moderation options" width="900" /><br/>
+  <sub>Voice moderation — space mute / deafen, move, disconnect, and per-user volume.</sub>
+</div>
+
+## Screen sharing
+
+<div align="center">
+  <img src="screenshots/screen-share-settings.webp" alt="The screen-share settings popover" width="900" /><br/>
+  <sub>Per-stream resolution, frame rate, content mode, codec (VP9 / H.264), and bitrate — within admin-set bounds.</sub>
+</div>
+
+## File sharing
+
+<div align="center">
+  <img src="screenshots/file-sharing.webp" alt="A channel with uploaded files" width="900" /><br/>
+  <sub>Upload and share files of any kind directly in a channel.</sub>
+</div>
+
+## Direct messages
+
+<div align="center">
+  <img src="screenshots/group-dm.webp" alt="A federated group direct message" width="900" /><br/>
+  <sub>1-on-1 and group DMs, including members on peer instances (note the <code>@instance</code> handles).</sub>
+</div>
+
+## Friends & social
+
+<div align="center">
+  <img src="screenshots/friends.webp" alt="The friends list with an Active Now sidebar" width="900" /><br/>
+  <sub>Friends list with presence and an <b>Active Now</b> sidebar.</sub>
+</div>
+
+<br/>
+
+<div align="center">
+  <img src="screenshots/user-discovery.webp" alt="The find-people / user discovery view" width="900" /><br/>
+  <sub>Discover people across instances, with mutual friends and mutual spaces surfaced.</sub>
+</div>
+
+## Spaces
+
+<div align="center">
+  <img src="screenshots/space-discovery.webp" alt="The space discovery / Explore view" width="900" /><br/>
+  <sub>Browse and join public, request-to-join, and already-joined spaces.</sub>
+</div>
+
+## Administration
+
+<div align="center">
+  <img src="screenshots/admin-federation.webp" alt="The federation admin panel showing peered instances" width="900" /><br/>
+  <sub>Federation — DM relay, auto-peering, secret rotation, and per-peer health and management.</sub>
+</div>
+
+<br/>
+
+<div align="center">
+  <img src="screenshots/admin-streaming.webp" alt="The streaming admin panel with a bitrate matrix" width="900" /><br/>
+  <sub>Streaming limits — allowed resolutions and frame rates, plus a per-resolution × per-frame-rate bitrate matrix.</sub>
+</div>