feat(website): bring the live demo into the homepage hero

.github/workflows/docs.yml

@@ -84,6 +84,9 @@ jobs:
       - name: Check demo loops
         working-directory: website
         run: npm run check:loops -- --live
+      - name: Check responsive backgrounds
+        working-directory: website
+        run: npm run check:backgrounds -- --live
       # The recreation's data is generated from the app's own source and a
       # vendored project document. It is committed, so it can go stale in either
       # direction — a locale key moves, a timeline constant changes — and the
@@ -145,4 +148,4 @@ jobs:
       id-token: write
     steps:
       - id: deployment
-        uses: actions/deploy-pages@cd2ce8fcbc39b97be8ca5fce6e763baed58fa128 # v5.0.0
+        uses: actions/deploy-pages@cd2ce8fcbc39b97be8ca5fce6e763baed58fa128 # v5.0.0

website/docusaurus.config.ts

@@ -675,7 +675,7 @@ export default async function createConfig(): Promise<Config> {
 						// link item only takes a string label, so the download glyph moves
 						// to a CSS mask on .navbar-download-cta.
 						to: "/download",
-						label: "Download",
+						label: "Downloads",
 						className: "navbar-download-cta",
 						position: "right",
 					},

website/i18n/code.source.json

@@ -38,14 +38,11 @@
   "download.preRelease.body": "Release candidates ship between stable versions, alongside older releases, checksums, and full release notes.",
   "download.preRelease.cta": "Browse all releases",
   "home.meta.title": "Free open-source screen recorder & video editor",
-  "home.meta.description": "OpenScreen is a free, open-source screen recorder and video editor for Windows, macOS, and Linux — native capture, on-device captions, no watermarks.",
-  "home.hero.badge.new": "NEW",
-  "home.hero.badge.text": "1.11 exports faster on macOS and Linux",
-  "home.hero.titleTagline": "A free, open-source screen recorder and video editor",
-  "home.hero.tagline": "Screen recording with native capture, local AI and no paywall.",
-  "home.hero.download": "Download",
-  "home.hero.readDocs": "Read the docs",
-  "home.hero.scrollHint": "Scroll down",
+  "home.meta.description": "Turn screen recordings into polished demos with automatic zooms, styled backgrounds and an editable cursor. Free and open source for Windows, macOS and Linux. No watermark.",
+  "home.hero.title": "Beautiful demos on the first take.",
+  "home.hero.tagline": "Automatic zooms, smooth cursor movement, and a frame that looks finished. Record, adjust, share.",
+  "home.hero.reassurance": "Free and open source. No watermark. No account.",
+  "home.features.platforms.title": "Windows, macOS, Linux",
   "home.features.kicker": "Also true",
   "home.features.title": "Free, local, cross-platform: three things a screenshot can't show.",
   "home.features.summary": "OpenScreen is a free, open-source screen recorder and video editor for Windows, macOS, and Linux: a raw capture goes in and a finished demo comes out, in the category {screenStudio} defined. It is MIT licensed, with no watermark and no account, and it continues the {originalProject}, which its creator archived after v1.5.0.",
@@ -55,7 +52,6 @@
   "home.features.free.body": "No paywalls, no premium tier, no usage caps. Every feature ships free for personal and commercial use.",
   "home.features.local.title": "Nothing is uploaded",
   "home.features.local.body": "Recording, transcription and rendering all happen on your machine, and your video never leaves it. Text leaves only when you ask: the chat panel and caption translation, each with a key you supply. Transcription downloads its 264 MB Whisper model once, on first run.",
-  "home.features.platforms.title": "Windows, macOS, Linux",
   "home.features.platforms.body": "One source tree, native capture on each. A Microsoft Store listing, a .dmg, an .exe, a .deb, a .rpm, a .pacman, an AppImage and a Nix flake.",
   "home.install.kicker": "Quick start",
   "home.install.title": "Download and install",
@@ -72,6 +68,46 @@
   "home.install.note.windows": "Windows",
   "home.install.note.mac": "Mac",
   "home.install.note.linux": "Linux",
+  "editor.skipLink": "Skip the editor — go to downloads",
+  "editor.title": "Five things you will actually do",
+  "demoLoop.pause": "Pause video",
+  "demoLoop.play": "Play video",
+  "demoLoop.classic-zoom": "A task board recorded in OpenScreen. The view zooms in on a checklist item and a Ship button as they are clicked, then pulls back to the whole board.",
+  "demoLoop.3d-camera": "The same recording seen through the 3D camera, which tilts the screen and orbits around it while it follows the cursor.",
+  "demoLoop.3d-cursors": "One recorded pointer, redrawn in five cursor styles one after another while the recording keeps playing.",
+  "demoLoop.automatic-subtitles": "A narrated recording with captions under it, switching from English to French, Spanish and Korean.",
+  "demoLoop.caption-styles": "One caption shown in five styles: a plain caption, a bold yellow one, a handwritten one, a monospaced one, and one showing a single word at a time.",
+  "demoLoop.edit-by-transcript": "In the editor's transcript, a sentence is selected and deleted, and the matching cut appears on the timeline.",
+  "demoLoop.tighten-pauses": "Two clicks on the silence markers in the transcript, and both pauses are cut from the timeline.",
+  "demoLoop.background-picker": "The editor's background picker going through wallpapers, a gradient and a solid color, then turning on the animated Aurora background.",
+  "demoLoop.every-format": "The same recording exported in 16:9, then square, then vertical, with the framing following the cursor.",
+  "demoLoop.sensitive-data-mask": "A sign-in form being filled in. The email and password fields stay blurred while they are typed.",
+  "demoLoop.camera-blur": "A square webcam vignette over a screen recording. The view moves in on it while the room behind the speaker blurs, then pulls back.",
+  "demoLoop.every-layout": "One recording with a webcam, cycling through the layouts: picture in picture, side by side, stacked, full camera, then screen only.",
+  "demoLoop.device-frames": "The same playing recording framed in turn as a browser window, a phone, a laptop and a desktop monitor.",
+  "demoLoop.animated-backgrounds": "A recording on a plain background, then on a blurred photo background that moves slowly behind it.",
+  "demoLoop.beautiful-by-default": "A raw screen capture, then the same take as OpenScreen opens it, already zoomed, framed and with a restyled cursor, then in several looks.",
+  "demoLoop.simpler-editor": "The OpenScreen editor. One click on a background thumbnail restyles the whole video, then the side panel switches to the transcript.",
+  "demoLoop.edit-like-a-doc": "Text selected in the transcript is deleted like text in a document, and the video is cut to match.",
+  "demoLoop.ask-the-agent": "A request typed into the editor's chat panel, and the edits the agent makes appearing on the timeline.",
+  "demoLoop.title.classic-zoom": "Automatic zoom on clicks",
+  "demoLoop.title.3d-camera": "A 3D camera orbiting the screen",
+  "demoLoop.title.3d-cursors": "Cursor packs, drawn in 3D",
+  "demoLoop.title.automatic-subtitles": "Captions translated into other languages",
+  "demoLoop.title.caption-styles": "Five caption styles",
+  "demoLoop.title.edit-by-transcript": "Cutting video by deleting text in the transcript",
+  "demoLoop.title.tighten-pauses": "Cutting silences from the transcript",
+  "demoLoop.title.background-picker": "Changing the background behind a recording",
+  "demoLoop.title.every-format": "One recording in 16:9, 1:1 and 9:16",
+  "demoLoop.title.sensitive-data-mask": "Blurring an email address and a password",
+  "demoLoop.title.camera-blur": "Webcam background blur",
+  "demoLoop.title.every-layout": "Webcam layouts",
+  "demoLoop.title.device-frames": "Device frames",
+  "demoLoop.title.animated-backgrounds": "Animated backgrounds",
+  "demoLoop.title.beautiful-by-default": "From a raw screen capture to a finished demo",
+  "demoLoop.title.simpler-editor": "The OpenScreen editor",
+  "demoLoop.title.edit-like-a-doc": "Editing a video like a document",
+  "demoLoop.title.ask-the-agent": "Asking the editor's agent for an edit",
   "films.default.kicker": "Out of the box",
   "films.default.title": "Good-looking from the first take.",
   "films.default.lead": "Every new recording opens {zoomed}, on a wallpaper, with padding, a shadow and rounded corners. Change any of it, or export it as it is.",
@@ -121,46 +157,8 @@
   "films.ship.blur": "{t} Smooth or mosaic, as a rectangle, an oval or a freehand shape, over an email, a key or a password.",
   "films.ship.blur.t": "Blur regions.",
   "films.label": "More of the app, in motion",
-  "editor.skipLink": "Skip the editor — go to downloads",
-  "editor.title": "Five things you will actually do",
-  "demoLoop.pause": "Pause video",
-  "demoLoop.play": "Play video",
-  "demoLoop.classic-zoom": "A task board recorded in OpenScreen. The view zooms in on a checklist item and a Ship button as they are clicked, then pulls back to the whole board.",
-  "demoLoop.3d-camera": "The same recording seen through the 3D camera, which tilts the screen and orbits around it while it follows the cursor.",
-  "demoLoop.3d-cursors": "One recorded pointer, redrawn in five cursor styles one after another while the recording keeps playing.",
-  "demoLoop.automatic-subtitles": "A narrated recording with captions under it, switching from English to French, Spanish and Korean.",
-  "demoLoop.caption-styles": "One caption shown in five styles: a plain caption, a bold yellow one, a handwritten one, a monospaced one, and one showing a single word at a time.",
-  "demoLoop.edit-by-transcript": "In the editor's transcript, a sentence is selected and deleted, and the matching cut appears on the timeline.",
-  "demoLoop.tighten-pauses": "Two clicks on the silence markers in the transcript, and both pauses are cut from the timeline.",
-  "demoLoop.background-picker": "The editor's background picker going through wallpapers, a gradient and a solid color, then turning on the animated Aurora background.",
-  "demoLoop.every-format": "The same recording exported in 16:9, then square, then vertical, with the framing following the cursor.",
-  "demoLoop.sensitive-data-mask": "A sign-in form being filled in. The email and password fields stay blurred while they are typed.",
-  "demoLoop.camera-blur": "A square webcam vignette over a screen recording. The view moves in on it while the room behind the speaker blurs, then pulls back.",
-  "demoLoop.every-layout": "One recording with a webcam, cycling through the layouts: picture in picture, side by side, stacked, full camera, then screen only.",
-  "demoLoop.device-frames": "The same playing recording framed in turn as a browser window, a phone, a laptop and a desktop monitor.",
-  "demoLoop.animated-backgrounds": "A recording on a plain background, then on a blurred photo background that moves slowly behind it.",
-  "demoLoop.beautiful-by-default": "A raw screen capture, then the same take as OpenScreen opens it, already zoomed, framed and with a restyled cursor, then in several looks.",
-  "demoLoop.simpler-editor": "The OpenScreen editor. One click on a background thumbnail restyles the whole video, then the side panel switches to the transcript.",
-  "demoLoop.edit-like-a-doc": "Text selected in the transcript is deleted like text in a document, and the video is cut to match.",
-  "demoLoop.ask-the-agent": "A request typed into the editor's chat panel, and the edits the agent makes appearing on the timeline.",
-  "demoLoop.title.classic-zoom": "Automatic zoom on clicks",
-  "demoLoop.title.3d-camera": "A 3D camera orbiting the screen",
-  "demoLoop.title.3d-cursors": "Cursor packs, drawn in 3D",
-  "demoLoop.title.automatic-subtitles": "Captions translated into other languages",
-  "demoLoop.title.caption-styles": "Five caption styles",
-  "demoLoop.title.edit-by-transcript": "Cutting video by deleting text in the transcript",
-  "demoLoop.title.tighten-pauses": "Cutting silences from the transcript",
-  "demoLoop.title.background-picker": "Changing the background behind a recording",
-  "demoLoop.title.every-format": "One recording in 16:9, 1:1 and 9:16",
-  "demoLoop.title.sensitive-data-mask": "Blurring an email address and a password",
-  "demoLoop.title.camera-blur": "Webcam background blur",
-  "demoLoop.title.every-layout": "Webcam layouts",
-  "demoLoop.title.device-frames": "Device frames",
-  "demoLoop.title.animated-backgrounds": "Animated backgrounds",
-  "demoLoop.title.beautiful-by-default": "From a raw screen capture to a finished demo",
-  "demoLoop.title.simpler-editor": "The OpenScreen editor",
-  "demoLoop.title.edit-like-a-doc": "Editing a video like a document",
-  "demoLoop.title.ask-the-agent": "Asking the editor's agent for an edit",
+  "announcement.v2.link": "See what's new",
+  "announcement.v2.title": "OpenScreen v2 is here",
   "recreation.style.kicker": "Style",
   "recreation.style.title": "Swap the background",
   "recreation.style.sub": "Image, color or gradient behind your recording — no re-shoot.",
@@ -176,6 +174,15 @@
   "recreation.transcript.kicker": "Transcript",
   "recreation.transcript.title": "Edit video like text",
   "recreation.transcript.sub": "Delete a word or a silence; the cut lands on the timeline. Nothing destructive.",
+  "recreation.pause": "Pause animation",
+  "recreation.play": "Play animation",
+  "home.hero.explore": "Scroll to explore the editor",
+  "download.cta.mac": "Download for Mac",
+  "download.cta.windows": "Download for Windows",
+  "download.cta.linux": "Download for Linux",
+  "home.hero.download": "Download",
+  "download.cta.chooseMac": "Choose your Mac",
+  "download.cta.otherVersions": "Other versions",
   "showcase.record.kicker": "record",
   "showcase.record.claim": "It records with the operating system, not around it.",
   "showcase.record.body": "Pick a window or a display. macOS goes through ScreenCaptureKit, Windows through Windows Graphics Capture, Linux through PipeWire and the ScreenCast portal — on each, the capture path the system itself provides. The pointer is recorded as data rather than burned into the pixels, which is the only reason you could restyle it further up this page.",

website/i18n/de/code.json

@@ -122,30 +122,14 @@
     "message": "Kostenloser Open-Source-Bildschirmrekorder und Videoeditor"
   },
   "home.meta.description": {
-    "message": "OpenScreen: kostenloser Open-Source-Bildschirmrekorder & Videoeditor für Windows, macOS und Linux. Native Aufnahme, lokale Untertitel, kein Wasserzeichen."
-  },
-  "home.hero.badge.new": {
-    "message": "NEU"
-  },
-  "home.hero.badge.text": {
-    "message": "1.11 exportiert schneller (Mac, Linux)",
-    "description": "Links to an English-only blog post. Must fit on one line on a 375px phone."
-  },
-  "home.hero.titleTagline": {
-    "message": "Ein kostenloser Open-Source-Bildschirmrekorder und Videoeditor"
+    "message": "Machen Sie aus Bildschirmaufnahmen ansprechende Demos mit automatischen Zooms, gestalteten Hintergründen und einem bearbeitbaren Cursor. Kostenlos und Open Source für Windows, macOS und Linux. Ohne Wasserzeichen."
   },
   "home.hero.tagline": {
-    "message": "Bildschirmaufnahme mit nativer Erfassung, lokaler KI und ohne Bezahlschranke."
+    "message": "Automatische Zooms, flüssige Cursorbewegungen und ein ansprechender Rahmen. Aufnehmen, anpassen, teilen."
   },
   "home.hero.download": {
     "message": "Download"
   },
-  "home.hero.readDocs": {
-    "message": "Doku lesen"
-  },
-  "home.hero.scrollHint": {
-    "message": "Nach unten scrollen"
-  },
   "home.features.kicker": {
     "message": "Auch das stimmt"
   },
@@ -1060,5 +1044,42 @@
   "demoLoop.title.ask-the-agent": {
     "message": "Den Agenten des Editors um eine Änderung bitten",
     "description": "The name of a short silent video of the app, given to search engines (schema.org VideoObject)."
+  },
+  "home.hero.title": {
+    "message": "Schöne Demos beim ersten Versuch."
+  },
+  "home.hero.reassurance": {
+    "message": "Kostenlos und Open Source. Ohne Wasserzeichen. Ohne Konto."
+  },
+  "home.hero.explore": {
+    "message": "Scrollen, um den Editor zu entdecken"
+  },
+  "recreation.pause": {
+    "message": "Animation pausieren"
+  },
+  "recreation.play": {
+    "message": "Animation abspielen"
+  },
+  "announcement.v2.title": {
+    "message": "OpenScreen v2 ist da"
+  },
+  "announcement.v2.link": {
+    "message": "Die Neuerungen (auf Englisch)",
+    "description": "Links to an English-only blog post. Mention English in translated labels."
+  },
+  "download.cta.mac": {
+    "message": "Für Mac herunterladen"
+  },
+  "download.cta.windows": {
+    "message": "Für Windows herunterladen"
+  },
+  "download.cta.linux": {
+    "message": "Für Linux herunterladen"
+  },
+  "download.cta.chooseMac": {
+    "message": "Mac auswählen"
+  },
+  "download.cta.otherVersions": {
+    "message": "Andere Versionen"
   }
 }

website/i18n/de/docusaurus-theme-classic/navbar.json

@@ -23,8 +23,8 @@
     "message": "Discord",
     "description": "Navbar item with label Discord"
   },
-  "item.label.Download": {
-    "message": "Download",
-    "description": "Navbar item with label Download"
+  "item.label.Downloads": {
+    "message": "Downloads",
+    "description": "Navbar item with label Downloads"
   }
 }

website/i18n/es/code.json

@@ -109,30 +109,14 @@
     "message": "Grabador de pantalla y editor de video gratis y de código abierto"
   },
   "home.meta.description": {
-    "message": "OpenScreen, grabador de pantalla y editor de video gratis y de código abierto (Windows, macOS, Linux): captura nativa, subtítulos locales, sin marca de agua."
-  },
-  "home.hero.badge.new": {
-    "message": "NUEVO"
-  },
-  "home.hero.badge.text": {
-    "message": "1.11 exporta más rápido en macOS y Linux",
-    "description": "Links to an English-only blog post. Must fit on one line on a 375px phone."
-  },
-  "home.hero.titleTagline": {
-    "message": "Un grabador de pantalla y editor de video gratis y de código abierto"
+    "message": "Convierte tus grabaciones de pantalla en demos cuidadas con zooms automáticos, fondos personalizados y un cursor editable. Gratis y de código abierto para Windows, macOS y Linux. Sin marca de agua."
   },
   "home.hero.tagline": {
-    "message": "Grabación de pantalla con captura nativa, IA local y sin muro de pago."
+    "message": "Zooms automáticos, un cursor fluido y un marco cuidado. Graba, ajusta y comparte."
   },
   "home.hero.download": {
     "message": "Descargar"
   },
-  "home.hero.readDocs": {
-    "message": "Leer la documentación"
-  },
-  "home.hero.scrollHint": {
-    "message": "Desplázate hacia abajo"
-  },
   "home.features.kicker": {
     "message": "Además"
   },
@@ -1060,5 +1044,42 @@
   "demoLoop.title.ask-the-agent": {
     "message": "Pedir una edición al agente del editor",
     "description": "The name of a short silent video of the app, given to search engines (schema.org VideoObject)."
+  },
+  "home.hero.title": {
+    "message": "Demos atractivas a la primera."
+  },
+  "home.hero.reassurance": {
+    "message": "Gratis y de código abierto. Sin marca de agua. Sin cuenta."
+  },
+  "home.hero.explore": {
+    "message": "Desplázate para explorar el editor"
+  },
+  "recreation.pause": {
+    "message": "Pausar la animación"
+  },
+  "recreation.play": {
+    "message": "Reproducir la animación"
+  },
+  "announcement.v2.title": {
+    "message": "OpenScreen v2 ya está aquí"
+  },
+  "announcement.v2.link": {
+    "message": "Ver las novedades (en inglés)",
+    "description": "Links to an English-only blog post. Mention English in translated labels."
+  },
+  "download.cta.mac": {
+    "message": "Descargar para Mac"
+  },
+  "download.cta.windows": {
+    "message": "Descargar para Windows"
+  },
+  "download.cta.linux": {
+    "message": "Descargar para Linux"
+  },
+  "download.cta.chooseMac": {
+    "message": "Elige tu Mac"
+  },
+  "download.cta.otherVersions": {
+    "message": "Otras versiones"
   }
 }

website/i18n/es/docusaurus-theme-classic/navbar.json

@@ -23,8 +23,8 @@
     "message": "Discord",
     "description": "Navbar item with label Discord"
   },
-  "item.label.Download": {
-    "message": "Descargar",
-    "description": "Navbar item with label Download"
+  "item.label.Downloads": {
+    "message": "Descargas",
+    "description": "Navbar item with label Downloads"
   }
 }