From 0b0c3b288d6951a01633ab7e37dea4340cf6748b Mon Sep 17 00:00:00 2001
From: Etienne Lescot <etiennelescot@gmail.com>
Date: Fri, 2 Oct 2026 11:21:38 +0200
Subject: [PATCH 1/8] feat(website): show the feature pages' demo loops,
 lazily, from R2

Eighteen silent 1080p60 loops of the app, served from Cloudflare R2 rather
than website/static/, where every re-cut would stay in git for good.

<video> has no loading="lazy", so DemoLoop does it: an empty 16:9 box in the
HTML, sources and poster attached a screen ahead, the 720p or 1080p file
picked from the box's real width, HEVC first with H.264 behind it, playback
only while half the box is on screen, no autoplay under reduced motion or
Save-Data, and a pause button on every loop (WCAG 2.2.2).

Placed on the auto-zoom, captions and Screen Studio pages in all eight
locales; the loops carry no words, so only their screen-reader labels are
translated.
---
 website/i18n/code.source.json                 |  50 ++++--
 website/i18n/de/code.json                     |  78 ++++++++++
 .../alternatives/screen-studio.mdx            |  13 ++
 .../features/auto-zoom.mdx                    |   8 +
 .../features/captions.mdx                     |  12 ++
 website/i18n/es/code.json                     |  78 ++++++++++
 .../alternatives/screen-studio.mdx            |  13 ++
 .../features/auto-zoom.mdx                    |   8 +
 .../features/captions.mdx                     |  12 ++
 website/i18n/fr/code.json                     |  78 ++++++++++
 .../alternatives/screen-studio.mdx            |  13 ++
 .../features/auto-zoom.mdx                    |   8 +
 .../features/captions.mdx                     |  12 ++
 website/i18n/ja/code.json                     |  78 ++++++++++
 .../alternatives/screen-studio.mdx            |  13 ++
 .../features/auto-zoom.mdx                    |   8 +
 .../features/captions.mdx                     |  12 ++
 website/i18n/pt-BR/code.json                  |  78 ++++++++++
 .../alternatives/screen-studio.mdx            |  13 ++
 .../features/auto-zoom.mdx                    |   8 +
 .../features/captions.mdx                     |  12 ++
 website/i18n/zh-CN/code.json                  |  78 ++++++++++
 .../alternatives/screen-studio.mdx            |  13 ++
 .../features/auto-zoom.mdx                    |   8 +
 .../features/captions.mdx                     |  12 ++
 website/i18n/zh-TW/code.json                  |  78 ++++++++++
 .../alternatives/screen-studio.mdx            |  13 ++
 .../features/auto-zoom.mdx                    |   8 +
 .../features/captions.mdx                     |  12 ++
 website/src/components/DemoLoop/Pair.tsx      |   9 ++
 website/src/components/DemoLoop/index.tsx     | 146 ++++++++++++++++++
 website/src/components/DemoLoop/labels.ts     | 145 +++++++++++++++++
 .../src/components/DemoLoop/styles.module.css |  70 +++++++++
 website/src/lib/demo-loop.test.ts             |  35 +++++
 website/src/lib/demo-loop.ts                  |  72 +++++++++
 .../src/pages/alternatives/screen-studio.mdx  |  13 ++
 website/src/pages/features/auto-zoom.mdx      |   8 +
 website/src/pages/features/captions.mdx       |  12 ++
 38 files changed, 1322 insertions(+), 15 deletions(-)
 create mode 100644 website/src/components/DemoLoop/Pair.tsx
 create mode 100644 website/src/components/DemoLoop/index.tsx
 create mode 100644 website/src/components/DemoLoop/labels.ts
 create mode 100644 website/src/components/DemoLoop/styles.module.css
 create mode 100644 website/src/lib/demo-loop.test.ts
 create mode 100644 website/src/lib/demo-loop.ts

diff --git a/website/i18n/code.source.json b/website/i18n/code.source.json
index 2e47caee6..b09e84f44 100644
--- a/website/i18n/code.source.json
+++ b/website/i18n/code.source.json
@@ -72,8 +72,43 @@
   "home.install.note.windows": "Windows",
   "home.install.note.mac": "Mac",
   "home.install.note.linux": "Linux",
+  "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 highlighted word by word.",
+  "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-cutout": "A webcam bubble over a screen recording. Its background is then removed, leaving the speaker in front of the screen.",
+  "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.",
   "editor.skipLink": "Skip the editor — go to downloads",
   "editor.title": "Five things you will actually do",
+  "recreation.style.kicker": "Style",
+  "recreation.style.title": "Swap the background",
+  "recreation.style.sub": "Image, color or gradient behind your recording — no re-shoot.",
+  "recreation.effects.kicker": "Effects",
+  "recreation.effects.title": "Frame it your way",
+  "recreation.effects.sub": "Padding, motion blur, shadow, roundness — every effect composites live.",
+  "recreation.cursor.kicker": "Cursor",
+  "recreation.cursor.title": "A cursor worth watching",
+  "recreation.cursor.sub": "Size, smoothing, motion blur, click bounce — every move reads on screen.",
+  "recreation.timeline.kicker": "Timeline",
+  "recreation.timeline.title": "One click, every zoom placed",
+  "recreation.timeline.sub": "Zooms, speed ramps, trims, comments — each edit lands as a pill on the timeline.",
+  "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.",
   "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.",
@@ -101,21 +136,6 @@
   "showcase.agent.link.feature": "How automatic zooms work",
   "showcase.agent.label": "A drawing of the agent's reply. Asked to cut the dead air, it answers with timecodes: 0 to 2.19 seconds of lead-in before “Hi” and 35.12 to 40.03 seconds of tail after “think.”, taking the video from 40 seconds to 33 seconds of playable footage, with the existing zooms left on the same moments — then a green line reading “applied: added 2 trims”.",
   "showcase.title": "Recorder, captions, agent, encoder.",
-  "recreation.style.kicker": "Style",
-  "recreation.style.title": "Swap the background",
-  "recreation.style.sub": "Image, color or gradient behind your recording — no re-shoot.",
-  "recreation.effects.kicker": "Effects",
-  "recreation.effects.title": "Frame it your way",
-  "recreation.effects.sub": "Padding, motion blur, shadow, roundness — every effect composites live.",
-  "recreation.cursor.kicker": "Cursor",
-  "recreation.cursor.title": "A cursor worth watching",
-  "recreation.cursor.sub": "Size, smoothing, motion blur, click bounce — every move reads on screen.",
-  "recreation.timeline.kicker": "Timeline",
-  "recreation.timeline.title": "One click, every zoom placed",
-  "recreation.timeline.sub": "Zooms, speed ramps, trims, comments — each edit lands as a pill on the timeline.",
-  "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.",
   "footer.brand.description": "A free, open-source screen recorder and editor. Community-maintained continuation, MIT licensed.",
   "footer.product.title": "Product",
   "footer.product.download": "Download",
diff --git a/website/i18n/de/code.json b/website/i18n/de/code.json
index 49dd29fa4..8b180dbb9 100644
--- a/website/i18n/de/code.json
+++ b/website/i18n/de/code.json
@@ -770,5 +770,83 @@
   "theme.tags.tagsPageTitle": {
     "message": "Tags",
     "description": "The title of the tag list page"
+  },
+  "demoLoop.pause": {
+    "message": "Video pausieren"
+  },
+  "demoLoop.play": {
+    "message": "Video abspielen"
+  },
+  "demoLoop.classic-zoom": {
+    "message": "Ein Aufgabenboard, aufgenommen in OpenScreen. Die Ansicht zoomt auf einen Checklistenpunkt und einen Ship-Button, während sie angeklickt werden, und fährt dann auf das ganze Board zurück.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.3d-camera": {
+    "message": "Dieselbe Aufnahme durch die 3D-Kamera gesehen, die den Bildschirm neigt und um ihn kreist, während sie dem Cursor folgt.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.3d-cursors": {
+    "message": "Ein einziger aufgezeichneter Mauszeiger, nacheinander in fünf Cursor-Stilen neu gezeichnet, während die Aufnahme weiterläuft.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.automatic-subtitles": {
+    "message": "Eine kommentierte Aufnahme mit Untertiteln darunter, die von Englisch zu Französisch, Spanisch und Koreanisch wechseln.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.caption-styles": {
+    "message": "Ein Untertitel in fünf Stilen: schlicht, fett in Gelb, handschriftlich, in Festbreitenschrift und Wort für Wort hervorgehoben.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.edit-by-transcript": {
+    "message": "Im Transkript des Editors wird ein Satz markiert und gelöscht, und der passende Schnitt erscheint in der Zeitleiste.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.tighten-pauses": {
+    "message": "Zwei Klicks auf die Stille-Markierungen im Transkript, und beide Pausen sind aus der Zeitleiste geschnitten.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.background-picker": {
+    "message": "Die Hintergrundauswahl des Editors geht Hintergrundbilder, einen Farbverlauf und eine Volltonfarbe durch und schaltet dann den animierten Aurora-Hintergrund ein.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.every-format": {
+    "message": "Dieselbe Aufnahme exportiert in 16:9, dann quadratisch, dann hochkant, wobei der Bildausschnitt dem Cursor folgt.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.sensitive-data-mask": {
+    "message": "Ein Anmeldeformular wird ausgefüllt. Die Felder für E-Mail und Passwort bleiben beim Tippen unscharf.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.camera-cutout": {
+    "message": "Eine Webcam-Blase über einer Bildschirmaufnahme. Dann wird ihr Hintergrund entfernt, und die Person steht vor dem Bildschirm.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.every-layout": {
+    "message": "Eine Aufnahme mit Webcam, die die Layouts durchläuft: Bild-im-Bild, nebeneinander, übereinander, Vollbild-Kamera und zuletzt nur der Bildschirm.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.device-frames": {
+    "message": "Dieselbe laufende Aufnahme, nacheinander gerahmt als Browserfenster, Smartphone, Laptop und Desktop-Monitor.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.animated-backgrounds": {
+    "message": "Eine Aufnahme auf einem schlichten Hintergrund, dann auf einem unscharfen Foto, das sich langsam dahinter bewegt.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.beautiful-by-default": {
+    "message": "Eine unbearbeitete Bildschirmaufnahme, dann dieselbe Aufnahme so, wie OpenScreen sie öffnet, schon gezoomt, gerahmt und mit neu gestaltetem Cursor, dann in mehreren Looks.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.simpler-editor": {
+    "message": "Der OpenScreen-Editor. Ein Klick auf ein Hintergrund-Vorschaubild ändert den Look des ganzen Videos, dann wechselt das Seitenpanel zum Transkript.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.edit-like-a-doc": {
+    "message": "Im Transkript markierter Text wird wie in einem Dokument gelöscht, und das Video wird entsprechend geschnitten.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.ask-the-agent": {
+    "message": "Eine im Chat-Panel des Editors eingegebene Anfrage, und die Änderungen des Agenten, die in der Zeitleiste erscheinen.",
+    "description": "Describes a short silent video loop of the app for screen readers."
   }
 }
diff --git a/website/i18n/de/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx b/website/i18n/de/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
index 813b2c942..4e76407b4 100644
--- a/website/i18n/de/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
+++ b/website/i18n/de/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
@@ -9,6 +9,9 @@ keywords:
   - open source screen studio alternative
 ---
 
+import DemoLoop from "@site/src/components/DemoLoop";
+import DemoLoopPair from "@site/src/components/DemoLoop/Pair";
+
 # Eine freie, quelloffene Alternative zu Screen Studio
 
 OpenScreen ist eine kostenlose, unter der MIT-Lizenz stehende Alternative zu Screen Studio für Windows, macOS und Linux. Wie Screen Studio zoomt es dahin, wo du klickst, gestaltet den Cursor nach der Aufnahme neu, fügt Hintergründe und lokale Untertitel hinzu und exportiert MP4 oder GIF. Anders als Screen Studio, das nur unter macOS läuft und einen kostenpflichtigen Plan für den Export braucht, kostet es nichts und braucht kein Konto. Screen Studio ist weiterhin die bessere Wahl, wenn du Aufnahmen als gehostete Links mit Kommentaren teilst oder ein iPhone oder iPad aufnimmst.
@@ -49,6 +52,11 @@ Beide Apps decken Folgendes ab. Nichts davon ist für eine der beiden einzigarti
 - **Notizen während der Aufnahme.** Beide haben Sprechernotizen. Unter Windows und macOS hat OpenScreens Notizfenster zusätzlich einen Teleprompter-Modus.
 - **Lokale Verarbeitung.** Screen Studio gibt an, niemals Daten über deine Aufnahmen an seine Server zu senden. OpenScreen hat kein Konto, keinen eigenen Server und keine Analytics. Die [FAQ](/docs/faq/#does-openscreen-work-offline) listet die wenigen Verbindungen, die es dennoch aufbaut.
 
+<DemoLoopPair>
+  <DemoLoop name="background-picker" />
+  <DemoLoop name="sensitive-data-mask" />
+</DemoLoopPair>
+
 ## Wo OpenScreen sich unterscheidet {#where-openscreen-differs}
 
 ### Preis, Lizenz und Plattformen {#price-license-and-platforms}
@@ -63,6 +71,11 @@ Beide Apps decken Folgendes ab. Nichts davon ist für eine der beiden einzigarti
 - **Annotationen.** Text mit sechs Animationen, Pfeile in acht Richtungen, Bilder und Unschärfebereiche. Auf der Roadmap von Screen Studio steht „Annotations“, beschrieben als visuelle oder textliche Beschreibungen von Klicks, als pausiert. Siehe [Bearbeitung & Zeitleiste](/docs/editing-timeline/).
 - **Webcam-Hintergrund.** Kamerahintergrund entfernen, weichzeichnen oder ersetzen, ohne Greenscreen, in der stabilen Version. Screen Studio listet die Entfernung des Kamerahintergrunds als Beta-Funktion.
 
+<DemoLoopPair>
+  <DemoLoop name="every-layout" />
+  <DemoLoop name="camera-cutout" />
+</DemoLoopPair>
+
 ### Export und Automatisierung {#export-and-automation}
 
 - **Eine Kommandozeile.** Skripte, CI und Coding-Agenten können OpenScreen über die [Kommandozeile](/docs/cli/) steuern. Der Guide von Screen Studio hat keinen Eintrag zur Kommandozeile.
diff --git a/website/i18n/de/docusaurus-plugin-content-pages/features/auto-zoom.mdx b/website/i18n/de/docusaurus-plugin-content-pages/features/auto-zoom.mdx
index 38b478d5a..442f51732 100644
--- a/website/i18n/de/docusaurus-plugin-content-pages/features/auto-zoom.mdx
+++ b/website/i18n/de/docusaurus-plugin-content-pages/features/auto-zoom.mdx
@@ -8,12 +8,16 @@ keywords:
   - auto-zoom bildschirmaufnahme windows
 ---
 
+import DemoLoop from "@site/src/components/DemoLoop";
+
 # Ein kostenloser Bildschirmrekorder mit Auto-Zoom
 
 OpenScreen ist ein kostenloser, unter der MIT-Lizenz stehender Bildschirmrekorder mit Auto-Zoom für Windows, macOS und Linux. Nach jeder Aufnahme liest OpenScreen die aufgezeichneten Klicks und zoomt auf sie, ohne Netzwerkaufruf und ohne KI-Modell. Screen Studio, Cap und Camtasia zoomen ebenfalls automatisch; OpenScreen macht das kostenlos, auf allen drei Systemen.
 
 Diese Seite wird vom OpenScreen-Projekt veröffentlicht. Die Angaben zu Screen Studio, Cap und Camtasia stammen von screen.studio, cap.so und techsmith.com und wurden im September 2026 geprüft. Die Quellen stehen am Ende.
 
+<DemoLoop name="classic-zoom" />
+
 ## Auf einen Blick {#at-a-glance}
 
 | | |
@@ -68,12 +72,16 @@ Automatische Zooms sind ein Ausgangspunkt. Dieselben Zoombereiche lassen sich au
 
 Ein manueller Zoom mit manuellem Fokus braucht keine Cursordaten, funktioniert also auch bei einem Video, das aus einem anderen Tool importiert wurde. Siehe [Zoombereiche](/docs/editing-timeline/#zoom-regions) für den Zoom-Inspektor.
 
+<DemoLoop name="3d-camera" />
+
 ## Der Cursor nach der Aufnahme {#the-cursor-after-the-take}
 
 Dieselbe aufgezeichnete Bewegung steuert den Cursor im Export. Der Bereich **Cursor** zeigt oder verbirgt ihn und legt Größe, Glättung, Bewegungsunschärfe, Klick-Bounce und Klick-Impact fest. Der Cursorpfad wird für Vorschau und Export gleich geglättet, sodass die Vorschau der Datei entspricht.
 
 Klick-Bounce braucht aufgezeichnete Klicks. Unter macOS braucht das die Berechtigung „Bedienungshilfen“, unter Linux muss dein Nutzer in der Gruppe `input` sein. [Aufnahme](/docs/recording/) listet, was jede Plattform erfasst.
 
+<DemoLoop name="3d-cursors" />
+
 ## Über die Kommandozeile {#from-the-command-line}
 
 Der Befehl `export` der [CLI](/docs/cli/) akzeptiert `--auto-zoom`. Vor dem Rendern plant er Zooms anhand der Klicks der Aufnahme, auf dieselbe Weise wie der Editor, und hält sie von den eigenen des Projekts fern. Bei einem Video ohne OpenScreen-Cursordaten hat er nichts, womit er arbeiten kann.
diff --git a/website/i18n/de/docusaurus-plugin-content-pages/features/captions.mdx b/website/i18n/de/docusaurus-plugin-content-pages/features/captions.mdx
index 1d774a2fc..14458c664 100644
--- a/website/i18n/de/docusaurus-plugin-content-pages/features/captions.mdx
+++ b/website/i18n/de/docusaurus-plugin-content-pages/features/captions.mdx
@@ -9,12 +9,17 @@ keywords:
   - automatische untertitel bildschirmaufnahme
 ---
 
+import DemoLoop from "@site/src/components/DemoLoop";
+import DemoLoopPair from "@site/src/components/DemoLoop/Pair";
+
 # Ein Bildschirmrekorder mit Untertiteln vom eigenen Rechner
 
 OpenScreen ist ein kostenloser, unter der MIT-Lizenz stehender Bildschirmrekorder mit Untertiteln für Windows, macOS und Linux. Er transkribiert deine Aufnahme auf deinem eigenen Computer mit Whisper, nach einem einmaligen Modell-Download von etwa 264 MB, und brennt gestaltete Untertitel in das exportierte Video ein. Brauchst du separate SRT- oder VTT-Untertiteldateien für eine Kursplattform oder eine Barrierefreiheitsvorgabe, ist Cap oder Camtasia die bessere Wahl.
 
 Diese Seite wird vom OpenScreen-Projekt veröffentlicht. Die Angaben zu Cap, Camtasia und Screen Studio stammen von cap.so, techsmith.com und screen.studio und wurden im September 2026 geprüft. Die Quellen stehen am Ende.
 
+<DemoLoop name="automatic-subtitles" />
+
 ## Auf einen Blick {#at-a-glance}
 
 | | |
@@ -52,12 +57,19 @@ Untertitel sind eine Live-Ansicht des Transkripts, keine Kopie davon. Schneidest
 
 Vorschau und Export nutzen dasselbe Layout, sodass die Untertitel, die du siehst, dieselben sind, die in das Video eingebrannt werden. **Show captions** schaltet sie für einen Export ohne Untertitel ab. Vollständige Referenz in [Untertitel & Transkript](/docs/captions/).
 
+<DemoLoop name="caption-styles" />
+
 ### Schneiden durch Löschen von Wörtern {#cutting-by-deleting-words}
 
 Das Panel **Transcript** zeigt die Wörter jedes Clips auf der Zeitleiste. Wähle ein Wort oder eine Passage aus und drücke Entf: Diese Stelle wird aus Wiedergabe und Export geschnitten, wie eine Kürzung auf der Zeitleiste. Geschnittene Wörter erscheinen durchgestrichen, und du kannst sie wiederherstellen. Stille wird im Text markiert und kann auf dieselbe Weise geschnitten oder wiederhergestellt werden.
 
 Whisper meldet Wortzeiten etwas zu spät. OpenScreen zieht jede Wortgrenze zurück auf das Audio, sodass ein Schnitt dort beginnt, wo das gesprochene Wort beginnt, statt eine Silbe später. Siehe [Transkriptbearbeitung](/docs/captions/#transcript-editing).
 
+<DemoLoopPair>
+  <DemoLoop name="edit-by-transcript" />
+  <DemoLoop name="tighten-pauses" />
+</DemoLoopPair>
+
 ### Übersetzung mit eigenem Schlüssel {#translation-with-your-own-key}
 
 Die Übersetzung deckt 15 Sprachen ab: Englisch, Französisch, Spanisch, Deutsch, Italienisch, Portugiesisch, Niederländisch, Polnisch, Türkisch, Russisch, Arabisch, Hindi, Japanisch, Koreanisch und Chinesisch. Sie läuft über den KI-Anbieter, den du für die Chat-Bearbeitung mit eigenem Schlüssel verbindest. Bis du einen Anbieter verbindest, wird nichts gesendet. Die Übersetzung wird neben dem Transkript gespeichert, sodass die ursprünglichen Wörter und Zeiten unverändert bleiben und du jederzeit zurückwechseln kannst. Siehe [Übersetzung](/docs/captions/#translation) und [KI-Bearbeitung](/docs/ai-editing/).
diff --git a/website/i18n/es/code.json b/website/i18n/es/code.json
index dc96f1f2d..d844a827e 100644
--- a/website/i18n/es/code.json
+++ b/website/i18n/es/code.json
@@ -770,5 +770,83 @@
   },
   "download.started.cta": {
     "message": "Dar una estrella en GitHub"
+  },
+  "demoLoop.pause": {
+    "message": "Pausar el vídeo"
+  },
+  "demoLoop.play": {
+    "message": "Reproducir el vídeo"
+  },
+  "demoLoop.classic-zoom": {
+    "message": "Un tablero de tareas grabado en OpenScreen. La vista hace zoom sobre un elemento de una lista y un botón Ship cuando se hace clic en ellos, y luego se aleja hasta mostrar todo el tablero.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.3d-camera": {
+    "message": "La misma grabación vista con la cámara 3D, que inclina la pantalla y gira a su alrededor mientras sigue el cursor.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.3d-cursors": {
+    "message": "Un mismo puntero grabado, redibujado en cinco estilos de cursor uno tras otro mientras la grabación sigue reproduciéndose.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.automatic-subtitles": {
+    "message": "Una grabación narrada con subtítulos debajo, que pasan del inglés al francés, al español y al coreano.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.caption-styles": {
+    "message": "Un mismo subtítulo en cinco estilos: uno sencillo, uno amarillo en negrita, uno manuscrito, uno monoespaciado y uno resaltado palabra por palabra.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.edit-by-transcript": {
+    "message": "En la transcripción del editor se selecciona y elimina una frase, y el corte correspondiente aparece en la línea de tiempo.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.tighten-pauses": {
+    "message": "Dos clics en los marcadores de silencio de la transcripción, y ambas pausas se cortan de la línea de tiempo.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.background-picker": {
+    "message": "El selector de fondo del editor recorre fondos de pantalla, un degradado y un color sólido, y después activa el fondo animado Aurora.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.every-format": {
+    "message": "La misma grabación exportada en 16:9, luego cuadrada y luego vertical, con el encuadre siguiendo el cursor.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.sensitive-data-mask": {
+    "message": "Un formulario de inicio de sesión mientras se rellena. Los campos de correo y contraseña siguen difuminados mientras se escriben.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.camera-cutout": {
+    "message": "Una burbuja de webcam sobre una grabación de pantalla. Después se elimina su fondo y la persona queda delante de la pantalla.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.every-layout": {
+    "message": "Una grabación con webcam que recorre los diseños: imagen en imagen, lado a lado, apilado, cámara completa y, por último, solo pantalla.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.device-frames": {
+    "message": "La misma grabación, en reproducción, enmarcada sucesivamente como ventana de navegador, teléfono, portátil y monitor de escritorio.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.animated-backgrounds": {
+    "message": "Una grabación sobre un fondo liso y después sobre una foto difuminada que se mueve lentamente detrás de ella.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.beautiful-by-default": {
+    "message": "Una captura de pantalla sin editar, luego la misma toma tal como la abre OpenScreen, ya con zoom, encuadrada y con el cursor rediseñado, y después con varios estilos.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.simpler-editor": {
+    "message": "El editor de OpenScreen. Un clic en la miniatura de un fondo cambia el estilo de todo el vídeo y luego el panel lateral pasa a la transcripción.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.edit-like-a-doc": {
+    "message": "El texto seleccionado en la transcripción se elimina como en un documento, y el vídeo se corta en consecuencia.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.ask-the-agent": {
+    "message": "Una petición escrita en el panel de chat del editor, y los cambios del agente apareciendo en la línea de tiempo.",
+    "description": "Describes a short silent video loop of the app for screen readers."
   }
 }
diff --git a/website/i18n/es/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx b/website/i18n/es/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
index 9b9f76ca9..8cfc57296 100644
--- a/website/i18n/es/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
+++ b/website/i18n/es/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
@@ -9,6 +9,9 @@ keywords:
   - alternativa de código abierto a screen studio
 ---
 
+import DemoLoop from "@site/src/components/DemoLoop";
+import DemoLoopPair from "@site/src/components/DemoLoop/Pair";
+
 # Una alternativa gratis y de código abierto a Screen Studio
 
 OpenScreen es una alternativa a Screen Studio gratis, con licencia MIT, para Windows, macOS y Linux. Igual que Screen Studio, hace zoom donde haces clic, permite cambiar el estilo del cursor después de la toma, agrega fondos y subtítulos generados en tu equipo, y exporta MP4 o GIF. A diferencia de Screen Studio, que solo funciona en macOS y necesita un plan de pago para exportar, no cuesta nada y no necesita cuenta. Screen Studio sigue siendo la mejor opción si compartes tus grabaciones como enlaces alojados con comentarios, o si grabas un iPhone o un iPad.
@@ -49,6 +52,11 @@ Ambas apps cubren lo siguiente. Nada de esto es exclusivo de una sola.
 - **Notas mientras grabas.** Las dos tienen notas para el presentador. En Windows y macOS, la ventana de notas de OpenScreen también tiene modo teleprompter.
 - **Procesamiento local.** Screen Studio dice que nunca envía datos de tus grabaciones a sus servidores. OpenScreen no tiene cuenta, ni servidor propio, ni analíticas. Las [preguntas frecuentes](/docs/faq/#does-openscreen-work-offline) enumeran las pocas conexiones que sigue haciendo.
 
+<DemoLoopPair>
+  <DemoLoop name="background-picker" />
+  <DemoLoop name="sensitive-data-mask" />
+</DemoLoopPair>
+
 ## En qué se diferencia OpenScreen {#where-openscreen-differs}
 
 ### Precio, licencia y plataformas {#price-license-and-platforms}
@@ -63,6 +71,11 @@ Ambas apps cubren lo siguiente. Nada de esto es exclusivo de una sola.
 - **Anotaciones.** Texto con seis animaciones, flechas en ocho direcciones, imágenes y regiones de desenfoque. La hoja de ruta de Screen Studio enumera "Anotaciones", descritas como descripciones visuales o textuales de los clics, como en pausa. Consulta [Edición y línea de tiempo](/docs/editing-timeline/).
 - **Fondo de la cámara web.** Quita, desenfoca o reemplaza el fondo de la cámara sin pantalla verde, en la versión estable. Screen Studio enumera la eliminación del fondo de cámara como función beta.
 
+<DemoLoopPair>
+  <DemoLoop name="every-layout" />
+  <DemoLoop name="camera-cutout" />
+</DemoLoopPair>
+
 ### Exportación y automatización {#export-and-automation}
 
 - **Una interfaz de línea de comandos.** Scripts, CI y agentes de código pueden manejar OpenScreen desde su [línea de comandos](/docs/cli/). La guía de Screen Studio no tiene entrada de línea de comandos.
diff --git a/website/i18n/es/docusaurus-plugin-content-pages/features/auto-zoom.mdx b/website/i18n/es/docusaurus-plugin-content-pages/features/auto-zoom.mdx
index 399ba6f1f..e1136f095 100644
--- a/website/i18n/es/docusaurus-plugin-content-pages/features/auto-zoom.mdx
+++ b/website/i18n/es/docusaurus-plugin-content-pages/features/auto-zoom.mdx
@@ -8,12 +8,16 @@ keywords:
   - zoom automático al grabar pantalla en windows
 ---
 
+import DemoLoop from "@site/src/components/DemoLoop";
+
 # Un grabador de pantalla gratis con zoom automático
 
 OpenScreen es un grabador de pantalla con zoom automático para Windows, macOS y Linux, gratis y con licencia MIT. Después de cada toma, lee los clics que grabó y hace zoom en ellos, sin llamadas de red ni modelo de IA. Screen Studio, Cap y Camtasia también hacen zoom automáticamente; OpenScreen lo hace gratis, en los tres sistemas.
 
 Esta página la publica el proyecto OpenScreen. Los datos sobre Screen Studio, Cap y Camtasia vienen de screen.studio, cap.so y techsmith.com, y se verificaron en septiembre de 2026. Las fuentes están al final.
 
+<DemoLoop name="classic-zoom" />
+
 ## De un vistazo {#at-a-glance}
 
 | | |
@@ -68,12 +72,16 @@ Los zooms automáticos son un punto de partida. Las mismas regiones de zoom se p
 
 Un zoom manual con enfoque manual no necesita datos de cursor, así que también funciona en un video importado de otra herramienta. Consulta [Regiones de zoom](/docs/editing-timeline/#zoom-regions) para el inspector de zoom.
 
+<DemoLoop name="3d-camera" />
+
 ## El cursor después de la toma {#the-cursor-after-the-take}
 
 El mismo movimiento grabado maneja el cursor en la exportación. El panel Cursor lo muestra u oculta y define su tamaño, suavizado, desenfoque de movimiento, rebote al clic e impacto del clic. La trayectoria del cursor se suaviza de la misma forma para la vista previa y la exportación, así que la vista previa coincide con el archivo.
 
 El rebote al clic necesita clics grabados. En macOS eso requiere el permiso de Accesibilidad, y en Linux tu usuario debe estar en el grupo `input`. [Grabación](/docs/recording/) enumera lo que captura cada plataforma.
 
+<DemoLoop name="3d-cursors" />
+
 ## Desde la línea de comandos {#from-the-command-line}
 
 El comando `export` de la [CLI](/docs/cli/) acepta `--auto-zoom`. Antes de renderizar, planifica zooms a partir de los clics de la grabación, igual que el editor, y los mantiene apartados de los propios del proyecto. Un video sin datos de cursor de OpenScreen no le da nada con qué trabajar.
diff --git a/website/i18n/es/docusaurus-plugin-content-pages/features/captions.mdx b/website/i18n/es/docusaurus-plugin-content-pages/features/captions.mdx
index a42a4bd0a..d28ae1b58 100644
--- a/website/i18n/es/docusaurus-plugin-content-pages/features/captions.mdx
+++ b/website/i18n/es/docusaurus-plugin-content-pages/features/captions.mdx
@@ -9,12 +9,17 @@ keywords:
   - subtítulos automáticos al grabar pantalla
 ---
 
+import DemoLoop from "@site/src/components/DemoLoop";
+import DemoLoopPair from "@site/src/components/DemoLoop/Pair";
+
 # Un grabador de pantalla con subtítulos hechos en tu equipo
 
 OpenScreen es un grabador de pantalla con subtítulos para Windows, macOS y Linux, gratis y con licencia MIT. Transcribe tu grabación en tu propio equipo con Whisper, después de una descarga única del modelo de unos 264 MB, e incrusta subtítulos con estilo en el video exportado. Si necesitas archivos de subtítulos SRT o VTT separados para una plataforma de cursos o un requisito de accesibilidad, Cap o Camtasia son mejor opción.
 
 Esta página la publica el proyecto OpenScreen. Los datos sobre Cap, Camtasia y Screen Studio vienen de cap.so, techsmith.com y screen.studio, y se verificaron en septiembre de 2026. Las fuentes están al final.
 
+<DemoLoop name="automatic-subtitles" />
+
 ## De un vistazo {#at-a-glance}
 
 | | |
@@ -52,12 +57,19 @@ Los subtítulos son una vista en vivo de la transcripción, no una copia de ella
 
 La vista previa y la exportación usan el mismo diseño, así que los subtítulos que ves son los que se incrustan en el video. **Mostrar subtítulos** los desactiva para una exportación sin ellos. Referencia completa en [Subtítulos y transcripción](/docs/captions/).
 
+<DemoLoop name="caption-styles" />
+
 ### Corte eliminando palabras {#cutting-by-deleting-words}
 
 El panel **Transcripción** muestra las palabras de cada clip de la línea de tiempo. Selecciona una palabra o un pasaje y presiona Suprimir: ese tramo se corta de la reproducción y de la exportación, como un recorte en la línea de tiempo. Las palabras cortadas aparecen tachadas, y puedes restaurarlas. Los silencios se marcan en el texto y se pueden cortar o restaurar de la misma forma.
 
 Whisper reporta los tiempos de las palabras un poco tarde. OpenScreen desplaza hacia atrás cada límite de palabra y lo ancla en el propio audio, así que un corte empieza donde realmente empieza la palabra hablada y no una sílaba después. Consulta [Edición de la transcripción](/docs/captions/#transcript-editing).
 
+<DemoLoopPair>
+  <DemoLoop name="edit-by-transcript" />
+  <DemoLoop name="tighten-pauses" />
+</DemoLoopPair>
+
 ### Traducción con tu propia clave {#translation-with-your-own-key}
 
 La traducción cubre 15 idiomas: inglés, francés, español, alemán, italiano, portugués, neerlandés, polaco, turco, ruso, árabe, hindi, japonés, coreano y chino. Pasa por el proveedor de IA que conectas para la edición por chat, con tu propia clave. Hasta que conectas un proveedor, no envía nada. La traducción se guarda junto a la transcripción, así que las palabras y tiempos originales quedan como estaban, y puedes volver atrás en cualquier momento. Consulta [Traducción](/docs/captions/#translation) y [Edición con IA](/docs/ai-editing/).
diff --git a/website/i18n/fr/code.json b/website/i18n/fr/code.json
index 8926ac0a0..52488e36c 100644
--- a/website/i18n/fr/code.json
+++ b/website/i18n/fr/code.json
@@ -770,5 +770,83 @@
   },
   "download.started.cta": {
     "message": "Mettre une étoile sur GitHub"
+  },
+  "demoLoop.pause": {
+    "message": "Mettre la vidéo en pause"
+  },
+  "demoLoop.play": {
+    "message": "Lire la vidéo"
+  },
+  "demoLoop.classic-zoom": {
+    "message": "Un tableau de tâches enregistré dans OpenScreen. La vue zoome sur un élément de checklist et sur un bouton Ship au moment où on clique dessus, puis recule sur tout le tableau.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.3d-camera": {
+    "message": "Le même enregistrement vu par la caméra 3D, qui incline l'écran et tourne autour de lui en suivant le curseur.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.3d-cursors": {
+    "message": "Un seul pointeur enregistré, redessiné dans cinq styles de curseur l'un après l'autre pendant que l'enregistrement continue.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.automatic-subtitles": {
+    "message": "Un enregistrement commenté avec des sous-titres en dessous, qui passent de l'anglais au français, à l'espagnol et au coréen.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.caption-styles": {
+    "message": "Un même sous-titre dans cinq styles : un sous-titre simple, un jaune en gras, un manuscrit, un à chasse fixe, et un surligné mot à mot.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.edit-by-transcript": {
+    "message": "Dans la transcription de l'éditeur, une phrase est sélectionnée puis supprimée, et la coupe correspondante apparaît sur la timeline.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.tighten-pauses": {
+    "message": "Deux clics sur les marqueurs de silence de la transcription, et les deux pauses sont coupées de la timeline.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.background-picker": {
+    "message": "Le sélecteur d'arrière-plan de l'éditeur passe par des fonds d'écran, un dégradé et une couleur unie, puis active l'arrière-plan animé Aurora.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.every-format": {
+    "message": "Le même enregistrement exporté en 16:9, puis en carré, puis en vertical, le cadrage suivant le curseur.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.sensitive-data-mask": {
+    "message": "Un formulaire de connexion en cours de saisie. Les champs e-mail et mot de passe restent floutés pendant la frappe.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.camera-cutout": {
+    "message": "Une bulle de webcam sur un enregistrement d'écran. Son arrière-plan est ensuite retiré, et la personne apparaît devant l'écran.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.every-layout": {
+    "message": "Un enregistrement avec webcam qui passe par les dispositions : incrustation, côte à côte, empilée, caméra plein écran, puis écran seul.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.device-frames": {
+    "message": "Le même enregistrement, en lecture, encadré tour à tour comme une fenêtre de navigateur, un téléphone, un ordinateur portable et un écran de bureau.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.animated-backgrounds": {
+    "message": "Un enregistrement sur un arrière-plan uni, puis sur une photo floutée qui bouge lentement derrière lui.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.beautiful-by-default": {
+    "message": "Une capture d'écran brute, puis la même prise telle qu'OpenScreen l'ouvre, déjà zoomée, cadrée et avec un curseur restylé, puis dans plusieurs styles.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.simpler-editor": {
+    "message": "L'éditeur OpenScreen. Un clic sur une vignette d'arrière-plan change le style de toute la vidéo, puis le panneau latéral passe à la transcription.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.edit-like-a-doc": {
+    "message": "Un texte sélectionné dans la transcription est supprimé comme dans un document, et la vidéo est coupée en conséquence.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.ask-the-agent": {
+    "message": "Une demande saisie dans le panneau de chat de l'éditeur, et les modifications de l'agent qui apparaissent sur la timeline.",
+    "description": "Describes a short silent video loop of the app for screen readers."
   }
 }
diff --git a/website/i18n/fr/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx b/website/i18n/fr/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
index c3324b661..ce0eb8400 100644
--- a/website/i18n/fr/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
+++ b/website/i18n/fr/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
@@ -9,6 +9,9 @@ keywords:
   - alternative open source à screen studio
 ---
 
+import DemoLoop from "@site/src/components/DemoLoop";
+import DemoLoopPair from "@site/src/components/DemoLoop/Pair";
+
 # Une alternative gratuite et open source à Screen Studio
 
 OpenScreen est une alternative gratuite à Screen Studio, sous licence MIT, pour Windows, macOS et Linux. Comme Screen Studio, il zoome là où vous cliquez, change le style du curseur après la prise, ajoute des arrière-plans et des sous-titres locaux, et exporte en MP4 ou en GIF. Contrairement à Screen Studio, qui ne tourne que sous macOS et nécessite un abonnement payant pour exporter, il ne coûte rien et ne demande aucun compte. Screen Studio reste le meilleur choix si vous partagez vos enregistrements sous forme de liens hébergés avec commentaires, ou si vous enregistrez un iPhone ou un iPad.
@@ -49,6 +52,11 @@ Les deux applications couvrent les points suivants. Rien ici n'est propre à l'u
 - **Des notes pendant l'enregistrement.** Les deux ont des notes pour l'intervenant. Sous Windows et macOS, la fenêtre de notes d'OpenScreen a aussi un mode téléprompteur.
 - **Traitement local.** Screen Studio affirme ne jamais envoyer de données sur vos enregistrements à ses serveurs. OpenScreen n'a aucun compte, aucun serveur propre et aucune statistique d'usage. La [FAQ](/docs/faq/#does-openscreen-work-offline) liste les rares connexions qu'il établit encore.
 
+<DemoLoopPair>
+  <DemoLoop name="background-picker" />
+  <DemoLoop name="sensitive-data-mask" />
+</DemoLoopPair>
+
 ## Où OpenScreen se distingue {#where-openscreen-differs}
 
 ### Prix, licence et plateformes {#price-license-and-platforms}
@@ -63,6 +71,11 @@ Les deux applications couvrent les points suivants. Rien ici n'est propre à l'u
 - **Annotations.** Du texte avec six animations, des flèches dans huit directions, des images, et des régions de flou. La feuille de route de Screen Studio classe en pause « Annotations », décrites comme des descriptions visuelles ou textuelles des clics. Voir [Montage et timeline](/docs/editing-timeline/).
 - **Arrière-plan de la webcam.** Retirez, floutez ou remplacez l'arrière-plan de la caméra sans écran vert, dans la version stable. Screen Studio liste la suppression de l'arrière-plan de la caméra comme une fonction bêta.
 
+<DemoLoopPair>
+  <DemoLoop name="every-layout" />
+  <DemoLoop name="camera-cutout" />
+</DemoLoopPair>
+
 ### Export et automatisation {#export-and-automation}
 
 - **Une interface en ligne de commande.** Scripts, CI et agents de codage peuvent piloter OpenScreen depuis sa [ligne de commande](/docs/cli/). Le guide de Screen Studio ne contient aucune rubrique sur la ligne de commande.
diff --git a/website/i18n/fr/docusaurus-plugin-content-pages/features/auto-zoom.mdx b/website/i18n/fr/docusaurus-plugin-content-pages/features/auto-zoom.mdx
index 6e037b695..c8c9cf550 100644
--- a/website/i18n/fr/docusaurus-plugin-content-pages/features/auto-zoom.mdx
+++ b/website/i18n/fr/docusaurus-plugin-content-pages/features/auto-zoom.mdx
@@ -8,12 +8,16 @@ keywords:
   - zoom auto enregistrement d'écran windows
 ---
 
+import DemoLoop from "@site/src/components/DemoLoop";
+
 # Un enregistreur d'écran gratuit avec zoom auto
 
 OpenScreen est un enregistreur d'écran gratuit, sous licence MIT, avec zoom auto pour Windows, macOS et Linux. Après chaque prise, il lit les clics qu'il a enregistrés et zoome dessus, sans appel réseau ni modèle d'IA. Screen Studio, Cap et Camtasia zooment aussi automatiquement ; OpenScreen le fait gratuitement, sur les trois systèmes.
 
 Cette page est publiée par le projet OpenScreen. Les informations sur Screen Studio, Cap et Camtasia proviennent de screen.studio, cap.so et techsmith.com et ont été vérifiées en septembre 2026. Les sources sont listées à la fin.
 
+<DemoLoop name="classic-zoom" />
+
 ## En un coup d'œil {#at-a-glance}
 
 | | |
@@ -68,12 +72,16 @@ Les zooms automatiques sont un point de départ. Les mêmes régions de zoom peu
 
 Un zoom manuel avec un focus manuel n'a besoin d'aucune donnée de curseur, donc il fonctionne aussi sur une vidéo importée d'un autre outil. Voir [Régions de zoom](/docs/editing-timeline/#zoom-regions) pour l'inspecteur de zoom.
 
+<DemoLoop name="3d-camera" />
+
 ## Le curseur après la prise {#the-cursor-after-the-take}
 
 Le même mouvement enregistré pilote le curseur dans l'export. L'onglet Curseur l'affiche ou le masque et règle sa taille, son lissage, son flou de mouvement, son rebond au clic et son impact du clic. Le tracé du curseur est lissé de la même façon pour l'aperçu et pour l'export, donc l'aperçu correspond au fichier.
 
 Le rebond au clic a besoin de clics enregistrés. Sous macOS, cela nécessite l'autorisation Accessibilité, et sous Linux, votre utilisateur doit être dans le groupe `input`. [Enregistrement](/docs/recording/) liste ce que chaque plateforme capture.
 
+<DemoLoop name="3d-cursors" />
+
 ## Depuis la ligne de commande {#from-the-command-line}
 
 La commande `export` de la [CLI](/docs/cli/) accepte `--auto-zoom`. Avant le rendu, elle planifie des zooms à partir des clics de l'enregistrement, de la même façon que l'éditeur, et les tient à l'écart de ceux du projet. Une vidéo sans données de curseur OpenScreen ne lui donne rien à exploiter.
diff --git a/website/i18n/fr/docusaurus-plugin-content-pages/features/captions.mdx b/website/i18n/fr/docusaurus-plugin-content-pages/features/captions.mdx
index 347707cab..39207d661 100644
--- a/website/i18n/fr/docusaurus-plugin-content-pages/features/captions.mdx
+++ b/website/i18n/fr/docusaurus-plugin-content-pages/features/captions.mdx
@@ -9,12 +9,17 @@ keywords:
   - sous-titres automatiques enregistrement d'écran
 ---
 
+import DemoLoop from "@site/src/components/DemoLoop";
+import DemoLoopPair from "@site/src/components/DemoLoop/Pair";
+
 # Un enregistreur d'écran avec sous-titres faits sur votre machine
 
 OpenScreen est un enregistreur d'écran gratuit, sous licence MIT, avec sous-titres pour Windows, macOS et Linux. Il transcrit votre enregistrement sur votre propre ordinateur avec Whisper, après un téléchargement unique du modèle d'environ 264 Mo, et incruste des sous-titres stylisés dans la vidéo exportée. Si vous avez besoin de fichiers de sous-titres SRT ou VTT séparés pour une plateforme de cours ou une exigence d'accessibilité, Cap ou Camtasia est le meilleur choix.
 
 Cette page est publiée par le projet OpenScreen. Les informations sur Cap, Camtasia et Screen Studio proviennent de cap.so, techsmith.com et screen.studio et ont été vérifiées en septembre 2026. Les sources sont listées à la fin.
 
+<DemoLoop name="automatic-subtitles" />
+
 ## En un coup d'œil {#at-a-glance}
 
 | | |
@@ -52,12 +57,19 @@ Les sous-titres sont une vue en direct de la transcription, pas une copie de cel
 
 L'aperçu et l'export utilisent la même mise en page, donc les sous-titres que vous voyez sont ceux incrustés dans la vidéo. **Afficher les sous-titres** les désactive pour un export sans eux. Référence complète dans [Sous-titres et transcription](/docs/captions/).
 
+<DemoLoop name="caption-styles" />
+
 ### Couper en supprimant des mots {#cutting-by-deleting-words}
 
 Le panneau **Transcription** affiche les mots de chaque clip de la timeline. Sélectionnez un mot ou un passage et appuyez sur Suppr : ce passage est coupé de la lecture et de l'export, comme une coupe sur la timeline. Les mots coupés s'affichent barrés, et vous pouvez les rétablir. Les silences sont signalés dans le texte et peuvent être coupés ou rétablis de la même façon.
 
 Whisper place le début des mots un peu trop tard. OpenScreen ramène chaque limite de mot sur l'audio, donc une coupe commence là où le mot parlé commence réellement, plutôt qu'une syllabe plus tard. Voir [Montage par la transcription](/docs/captions/#transcript-editing).
 
+<DemoLoopPair>
+  <DemoLoop name="edit-by-transcript" />
+  <DemoLoop name="tighten-pauses" />
+</DemoLoopPair>
+
 ### Traduction avec votre propre clé {#translation-with-your-own-key}
 
 La traduction couvre 15 langues : anglais, français, espagnol, allemand, italien, portugais, néerlandais, polonais, turc, russe, arabe, hindi, japonais, coréen et chinois. Elle passe par le fournisseur d'IA que vous connectez pour le montage par chat, avec votre propre clé. Tant que vous n'avez pas connecté de fournisseur, rien n'est envoyé. La traduction est stockée à côté de la transcription, donc les mots et le minutage d'origine restent intacts, et vous pouvez revenir en arrière à tout moment. Voir [Traduction](/docs/captions/#translation) et [Montage par IA](/docs/ai-editing/).
diff --git a/website/i18n/ja/code.json b/website/i18n/ja/code.json
index f06649a7a..9f07e4d3c 100644
--- a/website/i18n/ja/code.json
+++ b/website/i18n/ja/code.json
@@ -770,5 +770,83 @@
   },
   "download.started.cta": {
     "message": "GitHub でスターを付ける"
+  },
+  "demoLoop.pause": {
+    "message": "動画を一時停止"
+  },
+  "demoLoop.play": {
+    "message": "動画を再生"
+  },
+  "demoLoop.classic-zoom": {
+    "message": "OpenScreen で録画したタスクボード。チェックリストの項目と Ship ボタンがクリックされると画面がズームインし、その後ボード全体までズームアウトします。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.3d-camera": {
+    "message": "同じ録画を 3D カメラで見たもの。カーソルを追いながら画面を傾け、その周りを回ります。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.3d-cursors": {
+    "message": "録画した 1 つのポインターを、録画を再生したまま 5 つのカーソルスタイルで順に描き直します。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.automatic-subtitles": {
+    "message": "ナレーション付きの録画の下に字幕が表示され、英語からフランス語、スペイン語、韓国語へと切り替わります。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.caption-styles": {
+    "message": "同じ字幕を 5 つのスタイルで表示します。シンプルな字幕、太字の黄色、手書き風、等幅、そして単語ごとのハイライトです。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.edit-by-transcript": {
+    "message": "エディターの文字起こしで文を選択して削除すると、対応するカットがタイムラインに現れます。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.tighten-pauses": {
+    "message": "文字起こしの無音マーカーを 2 回クリックすると、2 つの間がタイムラインからカットされます。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.background-picker": {
+    "message": "エディターの背景ピッカーで壁紙、グラデーション、単色を順に選び、最後にアニメーション背景 Aurora をオンにします。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.every-format": {
+    "message": "同じ録画を 16:9、正方形、縦長の順に書き出し、構図はカーソルを追います。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.sensitive-data-mask": {
+    "message": "ログインフォームへの入力中。メールアドレスとパスワードの欄は、入力している間ぼかされたままです。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.camera-cutout": {
+    "message": "画面録画の上に重なったウェブカメラのバブル。その後背景が取り除かれ、話し手が画面の前に立って見えます。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.every-layout": {
+    "message": "ウェブカメラ付きの 1 つの録画で、レイアウトを順に切り替えます。ピクチャーインピクチャー、横並び、縦並び、カメラ全画面、最後に画面のみ。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.device-frames": {
+    "message": "再生中の同じ録画を、ブラウザーウィンドウ、スマートフォン、ノートパソコン、デスクトップモニターの順にフレームで囲みます。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.animated-backgrounds": {
+    "message": "無地の背景の上の録画が、背後でゆっくり動くぼかした写真の背景に変わります。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.beautiful-by-default": {
+    "message": "加工前の画面キャプチャー、次に OpenScreen が開いたときの同じテイク。すでにズーム、フレーミング、カーソルのスタイル変更が済んでおり、その後いくつかの見た目に切り替わります。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.simpler-editor": {
+    "message": "OpenScreen のエディター。背景のサムネイルを 1 回クリックすると動画全体の見た目が変わり、その後サイドパネルが文字起こしに切り替わります。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.edit-like-a-doc": {
+    "message": "文字起こしで選択したテキストをドキュメントのように削除すると、動画もそれに合わせてカットされます。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.ask-the-agent": {
+    "message": "エディターのチャットパネルに入力した依頼と、エージェントによる編集がタイムラインに現れる様子。",
+    "description": "Describes a short silent video loop of the app for screen readers."
   }
 }
diff --git a/website/i18n/ja/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx b/website/i18n/ja/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
index 28cb500dd..c31f3c717 100644
--- a/website/i18n/ja/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
+++ b/website/i18n/ja/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
@@ -9,6 +9,9 @@ keywords:
   - Screen Studio 代替 オープンソース
 ---
 
+import DemoLoop from "@site/src/components/DemoLoop";
+import DemoLoopPair from "@site/src/components/DemoLoop/Pair";
+
 # 無料・オープンソースの Screen Studio 代替
 
 OpenScreen は、Windows・macOS・Linux 向けの無料の MIT ライセンスの Screen Studio 代替です。Screen Studio と同じように、クリックした場所にズームし、テイク後にカーソルのスタイルを変更し、背景と端末上の字幕を追加し、MP4 または GIF を出力します。macOS でしか動かず、エクスポートに有料プランが必要な Screen Studio と違い、OpenScreen は無料で、アカウントも不要です。コメント付きのホスティングされたリンクで録画を共有する場合や、iPhone や iPad を録画する場合は、Screen Studio のほうが今も適しています。
@@ -49,6 +52,11 @@ OpenScreen は、Windows・macOS・Linux 向けの無料の MIT ライセンス
 - **録画中のメモ。** どちらもスピーカーノートを備えています。Windows と macOS では、OpenScreen のノートウィンドウにテレプロンプターモードもあります。
 - **ローカル処理。** Screen Studio は、録画に関するデータを自社サーバーに送信することはないとしています。OpenScreen にはアカウントも、独自サーバーも、分析機能もありません。それでも行われるわずかな通信は[よくある質問](/docs/faq/#does-openscreen-work-offline)に一覧しています。
 
+<DemoLoopPair>
+  <DemoLoop name="background-picker" />
+  <DemoLoop name="sensitive-data-mask" />
+</DemoLoopPair>
+
 ## OpenScreen が異なる点 {#where-openscreen-differs}
 
 ### 価格、ライセンス、対応プラットフォーム {#price-license-and-platforms}
@@ -63,6 +71,11 @@ OpenScreen は、Windows・macOS・Linux 向けの無料の MIT ライセンス
 - **注釈。** 6 種類のアニメーション付きテキスト、8 方向の矢印、画像、ぼかし領域。Screen Studio のロードマップには、クリックの視覚的・文章的な説明とされる「注釈」が保留中として掲載されています。[編集とタイムライン](/docs/editing-timeline/)を参照してください。
 - **ウェブカメラの背景。** 安定版で、グリーンスクリーンなしにカメラの背景を削除・ぼかし・置き換えできます。Screen Studio はカメラ背景の削除をベータ機能として挙げています。
 
+<DemoLoopPair>
+  <DemoLoop name="every-layout" />
+  <DemoLoop name="camera-cutout" />
+</DemoLoopPair>
+
 ### エクスポートと自動化 {#export-and-automation}
 
 - **コマンドラインインターフェース。** スクリプト、CI、コーディングエージェントが[コマンドライン](/docs/cli/)から OpenScreen を操作できます。Screen Studio のガイドにコマンドラインの項目はありません。
diff --git a/website/i18n/ja/docusaurus-plugin-content-pages/features/auto-zoom.mdx b/website/i18n/ja/docusaurus-plugin-content-pages/features/auto-zoom.mdx
index d33ac2df0..5ed1586c8 100644
--- a/website/i18n/ja/docusaurus-plugin-content-pages/features/auto-zoom.mdx
+++ b/website/i18n/ja/docusaurus-plugin-content-pages/features/auto-zoom.mdx
@@ -8,12 +8,16 @@ keywords:
   - 自動ズーム 画面録画 Windows
 ---
 
+import DemoLoop from "@site/src/components/DemoLoop";
+
 # 自動ズーム対応の無料画面録画ソフト
 
 OpenScreen は、Windows・macOS・Linux 向けの無料の MIT ライセンスの自動ズーム対応画面録画ソフトです。各テイクのあと、OpenScreen は記録したクリックを読み取り、そこにズームインします。通信も AI モデルも使いません。Screen Studio、Cap、Camtasia も自動ズームに対応していますが、OpenScreen は 3 つのシステムすべてで、無料でそれを行います。
 
 このページは OpenScreen プロジェクトが公開しています。Screen Studio、Cap、Camtasia に関する情報は screen.studio、cap.so、techsmith.com によるもので、2026 年 9 月に確認しました。情報源は末尾に一覧しています。
 
+<DemoLoop name="classic-zoom" />
+
 ## 概要 {#at-a-glance}
 
 | | |
@@ -68,12 +72,16 @@ OpenScreen は、Windows・macOS・Linux 向けの無料の MIT ライセンス
 
 手動フォーカスの手動ズームはカーソルのデータを必要としないため、ほかのツールからインポートした動画でも使えます。ズームのインスペクターについては、[ズーム範囲](/docs/editing-timeline/#zoom-regions)を参照してください。
 
+<DemoLoop name="3d-camera" />
+
 ## テイク後のカーソル {#the-cursor-after-the-take}
 
 同じ記録された動きが、エクスポート時のカーソルの動きも決めます。**カーソル**パネルでは、表示・非表示の切り替え、サイズ・スムージング・モーションブラー・クリックバウンス・クリックの押し込みの設定ができます。カーソルのパスはプレビューとエクスポートで同じようにスムージングされるため、プレビューは出力ファイルと一致します。
 
 クリックバウンスには記録されたクリックが必要です。macOS ではアクセシビリティの権限が必要で、Linux ではユーザーが `input` グループに入っている必要があります。各プラットフォームが取得する内容は[録画](/docs/recording/)に一覧しています。
 
+<DemoLoop name="3d-cursors" />
+
 ## コマンドラインから {#from-the-command-line}
 
 [CLI](/docs/cli/) の `export` コマンドは `--auto-zoom` を受け付けます。レンダリング前に、エディターと同じ方法で録画のクリックからズームを計画し、プロジェクト自体のズームを避けて配置します。OpenScreen のカーソルデータがない動画には、この処理の元になるデータがありません。
diff --git a/website/i18n/ja/docusaurus-plugin-content-pages/features/captions.mdx b/website/i18n/ja/docusaurus-plugin-content-pages/features/captions.mdx
index bbd583698..0d1a260de 100644
--- a/website/i18n/ja/docusaurus-plugin-content-pages/features/captions.mdx
+++ b/website/i18n/ja/docusaurus-plugin-content-pages/features/captions.mdx
@@ -9,12 +9,17 @@ keywords:
   - 字幕 自動生成 画面録画
 ---
 
+import DemoLoop from "@site/src/components/DemoLoop";
+import DemoLoopPair from "@site/src/components/DemoLoop/Pair";
+
 # 自分のマシンで字幕を作る画面録画ソフト
 
 OpenScreen は、Windows・macOS・Linux 向けの無料の MIT ライセンスの字幕付き画面録画ソフトです。約 264 MB のモデルを一度だけダウンロードしたあと、Whisper で自分のパソコン上で録画を文字起こしし、スタイルを設定した字幕をエクスポートする動画に焼き込みます。コース用プラットフォームやアクセシビリティ要件のために別ファイルの SRT や VTT の字幕が必要な場合は、Cap または Camtasia のほうが適しています。
 
 このページは OpenScreen プロジェクトが公開しています。Cap、Camtasia、Screen Studio に関する情報は cap.so、techsmith.com、screen.studio によるもので、2026 年 9 月に確認しました。情報源は末尾に一覧しています。
 
+<DemoLoop name="automatic-subtitles" />
+
 ## 概要 {#at-a-glance}
 
 | | |
@@ -52,12 +57,19 @@ Whisper は話されている言語を自動で検出します。判定が誤っ
 
 プレビューとエクスポートは同じレイアウトを使うため、見えている字幕がそのまま動画に焼き込まれます。**字幕を表示**をオフにすると、それらを含まないエクスポートになります。詳しい仕様は[字幕と文字起こし](/docs/captions/)を参照してください。
 
+<DemoLoop name="caption-styles" />
+
 ### 単語を削除してカットする {#cutting-by-deleting-words}
 
 **文字起こし**パネルには、タイムライン上のすべてのクリップの単語が表示されます。単語や範囲を選んで Delete を押すと、その区間が再生とエクスポートからカットされます。タイムライン上のトリムと同じ扱いです。カットした単語は取り消し線で表示され、元に戻すこともできます。無音部分もテキスト内でマークされ、同じ方法でカットまたは復元できます。
 
 Whisper が報告する単語のタイミングはやや遅めです。OpenScreen は各単語の境界を音声そのものに合わせて引き戻すため、カットは 1 音節遅れることなく、実際に話された単語が始まる位置から始まります。詳しくは[文字起こしの編集](/docs/captions/#transcript-editing)を参照してください。
 
+<DemoLoopPair>
+  <DemoLoop name="edit-by-transcript" />
+  <DemoLoop name="tighten-pauses" />
+</DemoLoopPair>
+
 ### 自分の API キーによる翻訳 {#translation-with-your-own-key}
 
 翻訳は 15 言語に対応しています。英語、フランス語、スペイン語、ドイツ語、イタリア語、ポルトガル語、オランダ語、ポーランド語、トルコ語、ロシア語、アラビア語、ヒンディー語、日本語、韓国語、中国語です。チャット編集のために接続した AI プロバイダーを、自分の API キーで経由します。プロバイダーを接続するまでは何も送信されません。翻訳は文字起こしとは別に、その横に保存されるため、元の単語とタイミングはそのまま残り、いつでも切り替えて戻せます。詳しくは[翻訳](/docs/captions/#translation)と [AI 編集](/docs/ai-editing/)を参照してください。
diff --git a/website/i18n/pt-BR/code.json b/website/i18n/pt-BR/code.json
index 198a4b605..69eb5dcf3 100644
--- a/website/i18n/pt-BR/code.json
+++ b/website/i18n/pt-BR/code.json
@@ -770,5 +770,83 @@
   },
   "download.started.cta": {
     "message": "Dar uma estrela no GitHub"
+  },
+  "demoLoop.pause": {
+    "message": "Pausar o vídeo"
+  },
+  "demoLoop.play": {
+    "message": "Reproduzir o vídeo"
+  },
+  "demoLoop.classic-zoom": {
+    "message": "Um quadro de tarefas gravado no OpenScreen. A visualização dá zoom em um item de checklist e em um botão Ship quando são clicados, e depois se afasta para mostrar o quadro inteiro.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.3d-camera": {
+    "message": "A mesma gravação vista pela câmera 3D, que inclina a tela e gira ao redor dela enquanto segue o cursor.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.3d-cursors": {
+    "message": "Um único ponteiro gravado, redesenhado em cinco estilos de cursor, um após o outro, enquanto a gravação continua.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.automatic-subtitles": {
+    "message": "Uma gravação narrada com legendas embaixo, que passam do inglês para o francês, o espanhol e o coreano.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.caption-styles": {
+    "message": "Uma mesma legenda em cinco estilos: uma simples, uma amarela em negrito, uma manuscrita, uma monoespaçada e uma destacada palavra por palavra.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.edit-by-transcript": {
+    "message": "Na transcrição do editor, uma frase é selecionada e apagada, e o corte correspondente aparece na linha do tempo.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.tighten-pauses": {
+    "message": "Dois cliques nos marcadores de silêncio da transcrição, e as duas pausas são cortadas da linha do tempo.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.background-picker": {
+    "message": "O seletor de fundo do editor passa por papéis de parede, um degradê e uma cor sólida, e depois ativa o fundo animado Aurora.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.every-format": {
+    "message": "A mesma gravação exportada em 16:9, depois quadrada, depois vertical, com o enquadramento seguindo o cursor.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.sensitive-data-mask": {
+    "message": "Um formulário de login sendo preenchido. Os campos de e-mail e senha continuam desfocados enquanto são digitados.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.camera-cutout": {
+    "message": "Uma bolha de webcam sobre uma gravação de tela. Em seguida o fundo dela é removido, deixando a pessoa na frente da tela.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.every-layout": {
+    "message": "Uma gravação com webcam passando pelos layouts: picture-in-picture, lado a lado, empilhado, câmera em tela cheia e, por fim, só a tela.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.device-frames": {
+    "message": "A mesma gravação, em reprodução, emoldurada por vez como janela de navegador, celular, notebook e monitor de mesa.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.animated-backgrounds": {
+    "message": "Uma gravação sobre um fundo liso e depois sobre uma foto desfocada que se move devagar atrás dela.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.beautiful-by-default": {
+    "message": "Uma captura de tela bruta, depois a mesma tomada como o OpenScreen a abre, já com zoom, enquadrada e com o cursor reestilizado, e depois em vários visuais.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.simpler-editor": {
+    "message": "O editor do OpenScreen. Um clique na miniatura de um fundo muda o visual do vídeo inteiro, e depois o painel lateral passa para a transcrição.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.edit-like-a-doc": {
+    "message": "O texto selecionado na transcrição é apagado como em um documento, e o vídeo é cortado de acordo.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.ask-the-agent": {
+    "message": "Um pedido digitado no painel de chat do editor, e as edições do agente aparecendo na linha do tempo.",
+    "description": "Describes a short silent video loop of the app for screen readers."
   }
 }
diff --git a/website/i18n/pt-BR/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx b/website/i18n/pt-BR/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
index 0a691ac60..653b63e38 100644
--- a/website/i18n/pt-BR/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
+++ b/website/i18n/pt-BR/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
@@ -9,6 +9,9 @@ keywords:
   - alternativa open source ao screen studio
 ---
 
+import DemoLoop from "@site/src/components/DemoLoop";
+import DemoLoopPair from "@site/src/components/DemoLoop/Pair";
+
 # Uma alternativa grátis e de código aberto ao Screen Studio
 
 O OpenScreen é uma alternativa gratuita ao Screen Studio, com licença MIT, para Windows, macOS e Linux. Assim como o Screen Studio, ele dá zoom onde você clica, restiliza o cursor depois da gravação, adiciona fundos e legendas no dispositivo, e exporta em MP4 ou GIF. Diferente do Screen Studio, que roda só no macOS e precisa de um plano pago para exportar, ele não custa nada e não exige conta. O Screen Studio ainda é a melhor escolha se você compartilha gravações como links hospedados com comentários, ou grava um iPhone ou iPad.
@@ -49,6 +52,11 @@ Os dois apps cobrem o seguinte. Nada disso é exclusivo de um ou outro.
 - **Notas enquanto grava.** Os dois têm notas do apresentador. No Windows e no macOS, a janela de notas do OpenScreen também tem um modo teleprompter.
 - **Processamento local.** O Screen Studio diz que nunca envia dados sobre suas gravações para os servidores dele. O OpenScreen não tem conta, não tem servidor próprio e não tem análise de uso. As [Perguntas frequentes](/docs/faq/#does-openscreen-work-offline) listam as poucas conexões que ele ainda faz.
 
+<DemoLoopPair>
+  <DemoLoop name="background-picker" />
+  <DemoLoop name="sensitive-data-mask" />
+</DemoLoopPair>
+
 ## Onde o OpenScreen se diferencia {#where-openscreen-differs}
 
 ### Preço, licença e plataformas {#price-license-and-platforms}
@@ -63,6 +71,11 @@ Os dois apps cobrem o seguinte. Nada disso é exclusivo de um ou outro.
 - **Anotações.** Texto com seis animações, setas em oito direções, imagens e regiões de desfoque. O roadmap do Screen Studio lista "Anotações", descritas como descrições visuais ou textuais de cliques, como pausadas. Veja [Edição e linha do tempo](/docs/editing-timeline/).
 - **Fundo da webcam.** Remova, borre ou substitua o fundo da câmera sem tela verde, na versão estável. O Screen Studio lista a remoção de fundo da câmera como recurso beta.
 
+<DemoLoopPair>
+  <DemoLoop name="every-layout" />
+  <DemoLoop name="camera-cutout" />
+</DemoLoopPair>
+
 ### Exportação e automação {#export-and-automation}
 
 - **Uma interface de linha de comando.** Scripts, CI e agentes de código podem controlar o OpenScreen pela [linha de comando](/docs/cli/). O guia do Screen Studio não tem uma entrada de linha de comando.
diff --git a/website/i18n/pt-BR/docusaurus-plugin-content-pages/features/auto-zoom.mdx b/website/i18n/pt-BR/docusaurus-plugin-content-pages/features/auto-zoom.mdx
index f8c9065e9..9cc5d63f0 100644
--- a/website/i18n/pt-BR/docusaurus-plugin-content-pages/features/auto-zoom.mdx
+++ b/website/i18n/pt-BR/docusaurus-plugin-content-pages/features/auto-zoom.mdx
@@ -8,12 +8,16 @@ keywords:
   - zoom automático gravação de tela windows
 ---
 
+import DemoLoop from "@site/src/components/DemoLoop";
+
 # Um gravador de tela grátis com zoom automático
 
 O OpenScreen é um gravador de tela gratuito, com licença MIT, com zoom automático para Windows, macOS e Linux. Depois de cada gravação, ele lê os cliques que gravou e dá zoom neles, sem chamada de rede e sem modelo de IA. Screen Studio, Cap e Camtasia também dão zoom automaticamente; o OpenScreen faz isso de graça, nos três sistemas.
 
 Esta página é publicada pelo projeto OpenScreen. Os dados sobre Screen Studio, Cap e Camtasia vêm de screen.studio, cap.so e techsmith.com e foram verificados em setembro de 2026. As fontes estão listadas no final.
 
+<DemoLoop name="classic-zoom" />
+
 ## Resumo rápido {#at-a-glance}
 
 | | |
@@ -68,12 +72,16 @@ Os zooms automáticos são um ponto de partida. As mesmas regiões de zoom podem
 
 Um zoom manual com foco manual não precisa de dados de cursor, então também funciona em um vídeo importado de outra ferramenta. Veja [Regiões de zoom](/docs/editing-timeline/#zoom-regions) para o inspetor de zoom.
 
+<DemoLoop name="3d-camera" />
+
 ## O cursor depois da gravação {#the-cursor-after-the-take}
 
 O mesmo movimento gravado conduz o cursor na exportação. A aba Cursor mostra ou oculta o cursor e define tamanho, suavização, desfoque de movimento, rebote de clique e impacto do clique. O caminho do cursor é suavizado da mesma forma na pré-visualização e na exportação, então a pré-visualização corresponde ao arquivo.
 
 O rebote de clique precisa de cliques gravados. No macOS isso exige a permissão de Acessibilidade, e no Linux seu usuário precisa estar no grupo `input`. [Gravação](/docs/recording/) lista o que cada plataforma captura.
 
+<DemoLoop name="3d-cursors" />
+
 ## Pela linha de comando {#from-the-command-line}
 
 O comando `export` da [CLI](/docs/cli/) aceita `--auto-zoom`. Antes de renderizar, ele planeja zooms a partir dos cliques da gravação, da mesma forma que o editor, e os mantém afastados dos zooms do próprio projeto. Um vídeo sem dados de cursor do OpenScreen não lhe dá nada com que trabalhar.
diff --git a/website/i18n/pt-BR/docusaurus-plugin-content-pages/features/captions.mdx b/website/i18n/pt-BR/docusaurus-plugin-content-pages/features/captions.mdx
index 622032f77..687343caf 100644
--- a/website/i18n/pt-BR/docusaurus-plugin-content-pages/features/captions.mdx
+++ b/website/i18n/pt-BR/docusaurus-plugin-content-pages/features/captions.mdx
@@ -9,12 +9,17 @@ keywords:
   - legendas automáticas gravação de tela
 ---
 
+import DemoLoop from "@site/src/components/DemoLoop";
+import DemoLoopPair from "@site/src/components/DemoLoop/Pair";
+
 # Um gravador de tela com legendas feitas na sua máquina
 
 O OpenScreen é um gravador de tela gratuito, com licença MIT, com legendas para Windows, macOS e Linux. Ele transcreve sua gravação no seu próprio computador com o Whisper, depois de um download único de modelo de cerca de 264 MB, e embute legendas estilizadas no vídeo exportado. Se você precisa de arquivos de legenda SRT ou VTT separados para uma plataforma de curso ou um requisito de acessibilidade, o Cap ou o Camtasia é a melhor escolha.
 
 Esta página é publicada pelo projeto OpenScreen. Os dados sobre Cap, Camtasia e Screen Studio vêm de cap.so, techsmith.com e screen.studio e foram verificados em setembro de 2026. As fontes estão listadas no final.
 
+<DemoLoop name="automatic-subtitles" />
+
 ## Resumo rápido {#at-a-glance}
 
 | | |
@@ -52,12 +57,19 @@ As legendas são uma visualização ao vivo da transcrição, não uma cópia de
 
 A pré-visualização e a exportação usam o mesmo layout, então as legendas que você vê são as que ficam embutidas no vídeo. **Mostrar legendas** as desativa para uma exportação sem elas. Referência completa em [Legendas e transcrição](/docs/captions/).
 
+<DemoLoop name="caption-styles" />
+
 ### Corte ao apagar palavras {#cutting-by-deleting-words}
 
 O painel **Transcrição** mostra as palavras de cada clipe na linha do tempo. Selecione uma palavra ou um trecho e pressione Delete: esse intervalo é cortado da reprodução e da exportação, como um recorte na linha do tempo. As palavras cortadas aparecem riscadas, e você pode restaurá-las. Os silêncios são marcados no texto e podem ser cortados ou restaurados da mesma forma.
 
 O Whisper informa os tempos das palavras com um pequeno atraso. O OpenScreen puxa cada limite de palavra de volta para o áudio, então um corte começa onde a palavra falada começa, e não uma sílaba depois. Veja [Edição da transcrição](/docs/captions/#transcript-editing).
 
+<DemoLoopPair>
+  <DemoLoop name="edit-by-transcript" />
+  <DemoLoop name="tighten-pauses" />
+</DemoLoopPair>
+
 ### Tradução com sua própria chave {#translation-with-your-own-key}
 
 A tradução cobre 15 idiomas: inglês, francês, espanhol, alemão, italiano, português, holandês, polonês, turco, russo, árabe, hindi, japonês, coreano e chinês. Ela passa pelo provedor de IA que você conecta para edição por chat, com sua própria chave. Até você conectar um provedor, nada é enviado. A tradução é armazenada ao lado da transcrição, então as palavras e os tempos originais continuam como estavam, e você pode voltar a qualquer momento. Veja [Tradução](/docs/captions/#translation) e [Edição com IA](/docs/ai-editing/).
diff --git a/website/i18n/zh-CN/code.json b/website/i18n/zh-CN/code.json
index 8adefbe1d..f9d41e61c 100644
--- a/website/i18n/zh-CN/code.json
+++ b/website/i18n/zh-CN/code.json
@@ -770,5 +770,83 @@
   "theme.tags.tagsPageTitle": {
     "message": "标签",
     "description": "The title of the tag list page"
+  },
+  "demoLoop.pause": {
+    "message": "暂停视频"
+  },
+  "demoLoop.play": {
+    "message": "播放视频"
+  },
+  "demoLoop.classic-zoom": {
+    "message": "在 OpenScreen 中录制的任务看板。点击清单项和 Ship 按钮时画面随之放大，然后拉远到整个看板。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.3d-camera": {
+    "message": "通过 3D 摄像机观看的同一段录制，它倾斜屏幕并绕屏幕环绕，同时跟随光标。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.3d-cursors": {
+    "message": "同一个录制的指针，在录制继续播放的同时，依次以五种光标样式重新绘制。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.automatic-subtitles": {
+    "message": "一段带旁白的录制，下方显示字幕，从英语依次切换到法语、西班牙语和韩语。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.caption-styles": {
+    "message": "同一条字幕的五种样式：普通字幕、黄色粗体、手写体、等宽字体，以及逐词高亮。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.edit-by-transcript": {
+    "message": "在编辑器的转录文本中选中并删除一句话，时间线上随即出现对应的剪切。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.tighten-pauses": {
+    "message": "在转录文本中点击两次静音标记，两处停顿就从时间线上剪掉了。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.background-picker": {
+    "message": "编辑器的背景选择器依次切换壁纸、渐变和纯色，然后开启动态背景 Aurora。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.every-format": {
+    "message": "同一段录制依次导出为 16:9、方形和竖屏，构图跟随光标。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.sensitive-data-mask": {
+    "message": "正在填写的登录表单。输入时，邮箱和密码字段始终保持模糊。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.camera-cutout": {
+    "message": "屏幕录制上方的摄像头气泡。随后其背景被移除，人物出现在屏幕前方。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.every-layout": {
+    "message": "一段带摄像头的录制依次切换布局：画中画、左右并排、上下堆叠、摄像头全屏，最后仅显示屏幕。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.device-frames": {
+    "message": "同一段正在播放的录制，依次套上浏览器窗口、手机、笔记本电脑和台式显示器的边框。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.animated-backgrounds": {
+    "message": "一段录制先在纯色背景上，然后换到在其后方缓慢移动的模糊照片背景上。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.beautiful-by-default": {
+    "message": "一段原始屏幕录制，然后是 OpenScreen 打开时的同一段素材，已自动缩放、加好构图并换了光标样式，之后再切换几种外观。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.simpler-editor": {
+    "message": "OpenScreen 编辑器。点击一次背景缩略图即可改变整个视频的外观，随后侧边栏切换到转录文本。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.edit-like-a-doc": {
+    "message": "在转录文本中选中的文字像文档里一样被删除，视频也随之剪切。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.ask-the-agent": {
+    "message": "在编辑器聊天面板中输入的请求，以及代理所做的编辑出现在时间线上。",
+    "description": "Describes a short silent video loop of the app for screen readers."
   }
 }
diff --git a/website/i18n/zh-CN/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx b/website/i18n/zh-CN/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
index f14b178f0..802e36057 100644
--- a/website/i18n/zh-CN/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
+++ b/website/i18n/zh-CN/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
@@ -9,6 +9,9 @@ keywords:
   - 开源 Screen Studio 替代品
 ---
 
+import DemoLoop from "@site/src/components/DemoLoop";
+import DemoLoopPair from "@site/src/components/DemoLoop/Pair";
+
 # 一款免费开源的 Screen Studio 替代品
 
 OpenScreen 是一款面向 Windows、macOS 和 Linux 的免费 Screen Studio 替代软件，采用 MIT 许可证。和 Screen Studio 一样，它会在你点击的地方自动缩放，在录制结束后重新设置光标样式，添加背景和本机字幕，并导出 MP4 或 GIF。与 Screen Studio 不同的是，后者仅支持 macOS，且需要付费方案才能导出，而 OpenScreen 不收费、无需账号。如果你需要以带评论的托管链接分享录制内容，或录制 iPhone、iPad，Screen Studio 仍是更好的选择。
@@ -49,6 +52,11 @@ OpenScreen 是一款面向 Windows、macOS 和 Linux 的免费 Screen Studio 替
 - **录制时的笔记。** 两者都有演讲者笔记功能。在 Windows 和 macOS 上，OpenScreen 的笔记窗口还带有提词器模式。
 - **本地处理。** Screen Studio 表示绝不会将录制内容的数据发送到其服务器。OpenScreen 没有账号体系，没有自己的服务器，也没有分析统计。[常见问题](/docs/faq/#does-openscreen-work-offline)列出了它仍会联网的少数情形。
 
+<DemoLoopPair>
+  <DemoLoop name="background-picker" />
+  <DemoLoop name="sensitive-data-mask" />
+</DemoLoopPair>
+
 ## OpenScreen 的不同之处 {#where-openscreen-differs}
 
 ### 价格、许可证与平台 {#price-license-and-platforms}
@@ -63,6 +71,11 @@ OpenScreen 是一款面向 Windows、macOS 和 Linux 的免费 Screen Studio 替
 - **标注。** 六种动画效果的文字、八个方向的箭头、图片，以及模糊区域。Screen Studio 的路线图将“标注”（描述为点击的视觉或文字说明）列为暂停状态。参见[编辑与时间轴](/docs/editing-timeline/)。
 - **摄像头背景。** 在正式版中即可去除、模糊或替换摄像头背景，无需绿幕。Screen Studio 将摄像头背景移除列为测试版功能。
 
+<DemoLoopPair>
+  <DemoLoop name="every-layout" />
+  <DemoLoop name="camera-cutout" />
+</DemoLoopPair>
+
 ### 导出与自动化 {#export-and-automation}
 
 - **命令行界面。** 脚本、CI 和编程代理都可以通过[命令行](/docs/cli/)驱动 OpenScreen。Screen Studio 的指南中没有命令行相关条目。
diff --git a/website/i18n/zh-CN/docusaurus-plugin-content-pages/features/auto-zoom.mdx b/website/i18n/zh-CN/docusaurus-plugin-content-pages/features/auto-zoom.mdx
index 454cb1f26..94114d82d 100644
--- a/website/i18n/zh-CN/docusaurus-plugin-content-pages/features/auto-zoom.mdx
+++ b/website/i18n/zh-CN/docusaurus-plugin-content-pages/features/auto-zoom.mdx
@@ -8,12 +8,16 @@ keywords:
   - Windows 自动缩放屏幕录制
 ---
 
+import DemoLoop from "@site/src/components/DemoLoop";
+
 # 一款带自动缩放的免费录屏软件
 
 OpenScreen 是一款面向 Windows、macOS 和 Linux 的免费录屏软件，采用 MIT 许可证，具备自动缩放功能。每次录制结束后，OpenScreen 会读取它录制下来的点击，并在这些点击处放大画面，无需联网、无需 AI 模型。Screen Studio、Cap 和 Camtasia 也都具备自动缩放功能；OpenScreen 在这三个系统上都免费提供这项功能。
 
 本页由 OpenScreen 项目发布。关于 Screen Studio、Cap 和 Camtasia 的信息来自 screen.studio、cap.so 和 techsmith.com，核实于 2026 年 9 月。信息来源列于文末。
 
+<DemoLoop name="classic-zoom" />
+
 ## 一览 {#at-a-glance}
 
 | | |
@@ -68,12 +72,16 @@ OpenScreen 是一款面向 Windows、macOS 和 Linux 的免费录屏软件，采
 
 带有手动焦点的手动缩放不需要光标数据，因此也适用于从其他工具导入的视频。缩放检查器详见[缩放区间](/docs/editing-timeline/#zoom-regions)。
 
+<DemoLoop name="3d-camera" />
+
 ## 录制结束后的光标 {#the-cursor-after-the-take}
 
 导出中的光标同样由这份录制的移动数据驱动。光标面板可以显示或隐藏光标，并设置其大小、平滑度、运动模糊、点击回弹和点击按压效果。光标路径在预览和导出时采用相同的平滑处理方式，因此预览效果与最终文件一致。
 
 点击回弹需要录制到的点击数据。在 macOS 上，这需要辅助功能权限；在 Linux 上，你的用户必须加入 `input` 组。[屏幕录制](/docs/recording/)列出了各平台能采集到的内容。
 
+<DemoLoop name="3d-cursors" />
+
 ## 通过命令行 {#from-the-command-line}
 
 [CLI](/docs/cli/) 的 `export` 命令接受 `--auto-zoom` 参数。渲染之前，它会以与编辑器相同的方式，根据录制内容中的点击规划缩放，并让它们与项目中已有的缩放保持间隔。没有 OpenScreen 光标数据的视频将无法生成任何自动缩放。
diff --git a/website/i18n/zh-CN/docusaurus-plugin-content-pages/features/captions.mdx b/website/i18n/zh-CN/docusaurus-plugin-content-pages/features/captions.mdx
index 419674343..45f6f016b 100644
--- a/website/i18n/zh-CN/docusaurus-plugin-content-pages/features/captions.mdx
+++ b/website/i18n/zh-CN/docusaurus-plugin-content-pages/features/captions.mdx
@@ -9,12 +9,17 @@ keywords:
   - 屏幕录制自动字幕
 ---
 
+import DemoLoop from "@site/src/components/DemoLoop";
+import DemoLoopPair from "@site/src/components/DemoLoop/Pair";
+
 # 一款字幕在本机生成的录屏软件
 
 OpenScreen 是一款面向 Windows、macOS 和 Linux 的免费录屏软件，采用 MIT 许可证，具备字幕功能。它会在你自己的电脑上用 Whisper 转录录制内容，只需一次性下载约 264 MB 的模型，并将带样式的字幕烧录进导出的视频。如果你需要为课程平台或无障碍要求提供独立的 SRT 或 VTT 字幕文件，Cap 或 Camtasia 是更好的选择。
 
 本页由 OpenScreen 项目发布。关于 Cap、Camtasia 和 Screen Studio 的信息来自 cap.so、techsmith.com 和 screen.studio，核实于 2026 年 9 月。信息来源列于文末。
 
+<DemoLoop name="automatic-subtitles" />
+
 ## 一览 {#at-a-glance}
 
 | | |
@@ -52,12 +57,19 @@ Whisper 会自行检测所说的语言。如果检测错误，可以在媒体工
 
 预览和导出使用同一套排版，因此你看到的字幕就是烧录进视频的字幕。**显示字幕**开关可用于导出不带字幕的版本。完整参考请见[字幕与转录](/docs/captions/)。
 
+<DemoLoop name="caption-styles" />
+
 ### 通过删除词语来剪切 {#cutting-by-deleting-words}
 
 **转录文本**面板显示时间轴上每个片段的词语。选中一个词或一段文字并按删除键：对应的片段会从播放和导出中剪掉，效果与时间轴上的修剪相同。被剪掉的词语会显示删除线，你也可以将其恢复。静音同样会在文本中标出，可以用同样的方式剪切或恢复。
 
 Whisper 报告的词语时间点会略微偏晚。OpenScreen 会把每个词语的边界拉回到音频本身，因此剪切会从词语实际开始的位置起效，而不是晚一个音节。参见[转录文本编辑](/docs/captions/#transcript-editing)。
 
+<DemoLoopPair>
+  <DemoLoop name="edit-by-transcript" />
+  <DemoLoop name="tighten-pauses" />
+</DemoLoopPair>
+
 ### 使用你自己密钥的翻译 {#translation-with-your-own-key}
 
 翻译支持 15 种语言：英语、法语、西班牙语、德语、意大利语、葡萄牙语、荷兰语、波兰语、土耳其语、俄语、阿拉伯语、印地语、日语、韩语和中文。它通过你为聊天式编辑连接的 AI 提供方完成，使用你自己的密钥。在你连接提供方之前，不会发送任何内容。译文与转录文本分开保存，因此原文及其时间点保持不变，你可以随时切换回原文。参见[翻译](/docs/captions/#translation)和 [AI 编辑](/docs/ai-editing/)。
diff --git a/website/i18n/zh-TW/code.json b/website/i18n/zh-TW/code.json
index e8fa00c80..a314c2bf7 100644
--- a/website/i18n/zh-TW/code.json
+++ b/website/i18n/zh-TW/code.json
@@ -770,5 +770,83 @@
   "theme.tags.tagsPageTitle": {
     "message": "標籤",
     "description": "The title of the tag list page"
+  },
+  "demoLoop.pause": {
+    "message": "暫停影片"
+  },
+  "demoLoop.play": {
+    "message": "播放影片"
+  },
+  "demoLoop.classic-zoom": {
+    "message": "在 OpenScreen 中錄製的任務看板。點擊清單項目和 Ship 按鈕時畫面隨之放大，接著拉遠到整個看板。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.3d-camera": {
+    "message": "透過 3D 攝影機觀看的同一段錄製，它傾斜螢幕並繞著螢幕環繞，同時跟隨游標。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.3d-cursors": {
+    "message": "同一個錄製的指標，在錄製持續播放的同時，依序以五種游標樣式重新繪製。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.automatic-subtitles": {
+    "message": "一段有旁白的錄製，下方顯示字幕，從英文依序切換到法文、西班牙文和韓文。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.caption-styles": {
+    "message": "同一則字幕的五種樣式：一般字幕、黃色粗體、手寫體、等寬字型，以及逐字醒目標示。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.edit-by-transcript": {
+    "message": "在編輯器的逐字稿中選取並刪除一句話，時間軸上隨即出現對應的剪輯。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.tighten-pauses": {
+    "message": "在逐字稿中點擊兩次靜音標記，兩處停頓就從時間軸上剪掉了。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.background-picker": {
+    "message": "編輯器的背景選擇器依序切換桌布、漸層和純色，接著開啟動態背景 Aurora。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.every-format": {
+    "message": "同一段錄製依序匯出為 16:9、方形和直式，構圖跟隨游標。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.sensitive-data-mask": {
+    "message": "正在填寫的登入表單。輸入時，電子郵件和密碼欄位始終保持模糊。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.camera-cutout": {
+    "message": "螢幕錄製上方的網路攝影機泡泡。接著其背景被移除，人物出現在螢幕前方。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.every-layout": {
+    "message": "一段含網路攝影機的錄製依序切換版面配置：子母畫面、左右並排、上下堆疊、攝影機全螢幕，最後僅顯示螢幕。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.device-frames": {
+    "message": "同一段正在播放的錄製，依序套上瀏覽器視窗、手機、筆記型電腦和桌上型螢幕的外框。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.animated-backgrounds": {
+    "message": "一段錄製先在純色背景上，接著換到在其後方緩慢移動的模糊相片背景上。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.beautiful-by-default": {
+    "message": "一段原始螢幕錄製，接著是 OpenScreen 開啟時的同一段素材，已自動縮放、完成構圖並換了游標樣式，之後再切換幾種外觀。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.simpler-editor": {
+    "message": "OpenScreen 編輯器。點擊一次背景縮圖即可改變整部影片的外觀，接著側邊面板切換到逐字稿。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.edit-like-a-doc": {
+    "message": "在逐字稿中選取的文字像文件裡一樣被刪除，影片也隨之剪輯。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "demoLoop.ask-the-agent": {
+    "message": "在編輯器聊天面板中輸入的請求，以及代理所做的編輯出現在時間軸上。",
+    "description": "Describes a short silent video loop of the app for screen readers."
   }
 }
diff --git a/website/i18n/zh-TW/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx b/website/i18n/zh-TW/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
index a29a4a1e2..c4b3ac4ee 100644
--- a/website/i18n/zh-TW/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
+++ b/website/i18n/zh-TW/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
@@ -9,6 +9,9 @@ keywords:
   - 開源 Screen Studio 替代方案
 ---
 
+import DemoLoop from "@site/src/components/DemoLoop";
+import DemoLoopPair from "@site/src/components/DemoLoop/Pair";
+
 # 免費、開源的 Screen Studio 替代方案
 
 OpenScreen 是免費、MIT 授權，支援 Windows、macOS 與 Linux 的 Screen Studio 替代方案。和 Screen Studio 一樣，它會在你點擊的地方放大畫面、在錄完後重新設計游標樣式、加上背景與裝置端字幕，並匯出 MP4 或 GIF。與只能在 macOS 上執行、需要付費方案才能匯出的 Screen Studio 不同，OpenScreen 完全免費，也不需要帳號。如果你需要以帶留言功能的託管連結分享錄影，或需要錄製 iPhone 或 iPad，Screen Studio 仍然是較好的選擇。
@@ -49,6 +52,11 @@ OpenScreen 是免費、MIT 授權，支援 Windows、macOS 與 Linux 的 Screen
 - **錄影時顯示筆記。** 兩者都有講者筆記功能。在 Windows 與 macOS 上，OpenScreen 的筆記視窗還有提詞機模式。
 - **本機處理。** Screen Studio 表示它絕不會把你的錄影資料送到其伺服器。OpenScreen 沒有帳號、沒有自己的伺服器，也不會做任何分析追蹤。[常見問題](/docs/faq/#does-openscreen-work-offline)列出了它仍會連線的少數幾種情況。
 
+<DemoLoopPair>
+  <DemoLoop name="background-picker" />
+  <DemoLoop name="sensitive-data-mask" />
+</DemoLoopPair>
+
 ## OpenScreen 的不同之處 {#where-openscreen-differs}
 
 ### 價格、授權與平台 {#price-license-and-platforms}
@@ -63,6 +71,11 @@ OpenScreen 是免費、MIT 授權，支援 Windows、macOS 與 Linux 的 Screen
 - **標註。** 六種動畫效果的文字、八個方向的箭頭、圖片，以及模糊區域。Screen Studio 的路線圖將「標註」（描述為點擊動作的視覺或文字說明）列為暫停中。詳見[剪輯與時間軸](/docs/editing-timeline/)。
 - **攝影機背景。** 在正式版中，可以在不使用綠幕的情況下移除、模糊或替換攝影機背景。Screen Studio 將攝影機背景移除列為 beta 功能。
 
+<DemoLoopPair>
+  <DemoLoop name="every-layout" />
+  <DemoLoop name="camera-cutout" />
+</DemoLoopPair>
+
 ### 匯出與自動化 {#export-and-automation}
 
 - **命令列介面。** 指令碼、CI 與程式碼代理都能透過[命令列](/docs/cli/)操作 OpenScreen。Screen Studio 的指南沒有命令列相關內容。
diff --git a/website/i18n/zh-TW/docusaurus-plugin-content-pages/features/auto-zoom.mdx b/website/i18n/zh-TW/docusaurus-plugin-content-pages/features/auto-zoom.mdx
index b75959ba3..ce5959a5d 100644
--- a/website/i18n/zh-TW/docusaurus-plugin-content-pages/features/auto-zoom.mdx
+++ b/website/i18n/zh-TW/docusaurus-plugin-content-pages/features/auto-zoom.mdx
@@ -8,12 +8,16 @@ keywords:
   - Windows 自動縮放螢幕錄影
 ---
 
+import DemoLoop from "@site/src/components/DemoLoop";
+
 # 免費、內建自動縮放的螢幕錄影軟體
 
 OpenScreen 是一款免費、MIT 授權、支援 Windows、macOS 與 Linux 的螢幕錄影軟體，內建自動縮放。每次錄完之後，OpenScreen 會讀取它錄下的點擊，並在這些點擊處放大，不需要連線，也不需要 AI 模型。Screen Studio、Cap 與 Camtasia 也都有自動縮放；OpenScreen 在三個平台上都免費提供這項功能。
 
 本頁由 OpenScreen 專案發布。Screen Studio、Cap 與 Camtasia 的資訊來自 screen.studio、cap.so 與 techsmith.com，於 2026 年 9 月確認。資料來源列於文末。
 
+<DemoLoop name="classic-zoom" />
+
 ## 概覽 {#at-a-glance}
 
 | | |
@@ -68,12 +72,16 @@ OpenScreen 是一款免費、MIT 授權、支援 Windows、macOS 與 Linux 的
 
 手動對焦的手動縮放不需要游標資料，所以也能用在從其他工具匯入的影片上。縮放檢查器詳見[縮放區域](/docs/editing-timeline/#zoom-regions)。
 
+<DemoLoop name="3d-camera" />
+
 ## 錄影結束後的游標 {#the-cursor-after-the-take}
 
 同樣錄下的移動資料也會驅動匯出檔案中的游標。「游標」面板可以顯示或隱藏游標，並設定大小、平滑度、動態模糊、點擊彈跳與點擊按壓效果。游標路徑在預覽與匯出時使用相同的平滑方式，所以預覽畫面就是最終匯出的結果。
 
 點擊彈跳需要錄下點擊資料。在 macOS 上這需要「輔助使用」權限，在 Linux 上則需要你的使用者屬於 `input` 群組。各平台會擷取哪些內容，列於[錄影](/docs/recording/)頁面。
 
+<DemoLoop name="3d-cursors" />
+
 ## 從命令列使用 {#from-the-command-line}
 
 [CLI](/docs/cli/) 的 `export` 指令接受 `--auto-zoom` 參數。在算繪之前，它會以與編輯器相同的方式，根據錄影的點擊規劃縮放，並讓它們與專案既有的縮放保持距離。沒有 OpenScreen 游標資料的影片，則沒有任何資料可供它運作。
diff --git a/website/i18n/zh-TW/docusaurus-plugin-content-pages/features/captions.mdx b/website/i18n/zh-TW/docusaurus-plugin-content-pages/features/captions.mdx
index f8e7af7bd..ededd2cef 100644
--- a/website/i18n/zh-TW/docusaurus-plugin-content-pages/features/captions.mdx
+++ b/website/i18n/zh-TW/docusaurus-plugin-content-pages/features/captions.mdx
@@ -9,12 +9,17 @@ keywords:
   - 螢幕錄影自動字幕
 ---
 
+import DemoLoop from "@site/src/components/DemoLoop";
+import DemoLoopPair from "@site/src/components/DemoLoop/Pair";
+
 # 在你自己電腦上產生字幕的螢幕錄影軟體
 
 OpenScreen 是一款免費、MIT 授權、支援 Windows、macOS 與 Linux 的螢幕錄影軟體，內建字幕功能。它會用 Whisper 在你自己的電腦上轉錄錄影內容，下載一次約 264 MB 的模型後即可使用，並將設計好樣式的字幕燒錄進匯出的影片。如果你需要給課程平台或無障礙需求使用的獨立 SRT 或 VTT 字幕檔，Cap 或 Camtasia 會是更好的選擇。
 
 本頁由 OpenScreen 專案發布。Cap、Camtasia 與 Screen Studio 的資訊來自 cap.so、techsmith.com 與 screen.studio，於 2026 年 9 月確認。資料來源列於文末。
 
+<DemoLoop name="automatic-subtitles" />
+
 ## 概覽 {#at-a-glance}
 
 | | |
@@ -52,12 +57,19 @@ Whisper 會自行偵測語音使用的語言。如果偵測錯誤，可以在「
 
 預覽與匯出使用相同的版面配置，所以你看到的字幕就是燒錄進影片的字幕。**顯示字幕**開關可以關閉字幕以匯出不含字幕的版本。完整說明請見[字幕與逐字稿](/docs/captions/)。
 
+<DemoLoop name="caption-styles" />
+
 ### 用刪除字詞來剪輯 {#cutting-by-deleting-words}
 
 **逐字稿**面板會顯示時間軸上每個片段的文字。選取一個字或一段文字並按下刪除鍵，那段內容就會從播放與匯出中被剪掉，就像在時間軸上剪片一樣。被剪掉的字詞會顯示刪除線，並可以還原。靜音區段也會在文字中被標記，可以用同樣的方式剪掉或還原。
 
 Whisper 回報的字詞時間點會稍微偏晚。OpenScreen 會把每個字詞的邊界往前拉回到音訊本身，所以剪輯會從字詞真正開始的地方切開，而不是晚了一個音節。詳見[逐字稿編輯](/docs/captions/#transcript-editing)。
 
+<DemoLoopPair>
+  <DemoLoop name="edit-by-transcript" />
+  <DemoLoop name="tighten-pauses" />
+</DemoLoopPair>
+
 ### 用你自己的金鑰翻譯 {#translation-with-your-own-key}
 
 翻譯支援 15 種語言：英文、法文、西班牙文、德文、義大利文、葡萄牙文、荷蘭文、波蘭文、土耳其文、俄文、阿拉伯文、印地文、日文、韓文與中文。這項功能透過你為聊天剪輯連接的 AI 提供者運作，使用你自己的金鑰。在你連接提供者之前，不會送出任何資料。翻譯結果會存放在逐字稿旁邊，原本的文字與時間點維持不變，你隨時可以切換回去。詳見[翻譯](/docs/captions/#translation)與 [AI 剪輯](/docs/ai-editing/)。
diff --git a/website/src/components/DemoLoop/Pair.tsx b/website/src/components/DemoLoop/Pair.tsx
new file mode 100644
index 000000000..03bfee362
--- /dev/null
+++ b/website/src/components/DemoLoop/Pair.tsx
@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+
+import styles from "./styles.module.css";
+
+/** Two loops side by side on a wide column. Each picks its own file from its
+ *  own width, so a half-column loop gets the 720p encode. */
+export default function DemoLoopPair({ children }: { children: ReactNode }) {
+	return <div className={styles.pair}>{children}</div>;
+}
diff --git a/website/src/components/DemoLoop/index.tsx b/website/src/components/DemoLoop/index.tsx
new file mode 100644
index 000000000..1e4e6db41
--- /dev/null
+++ b/website/src/components/DemoLoop/index.tsx
@@ -0,0 +1,146 @@
+/**
+ * A short silent loop of the app, in the style the category's own sites use:
+ * no words in the picture, the page around it carries them.
+ *
+ * `<video>` has no `loading="lazy"`, so every part of the laziness is done here:
+ *
+ *   - Nothing but an empty 16:9 box is in the server HTML. The sources and the
+ *     poster are attached when the box comes within a screen of the viewport,
+ *     so a reader who never scrolls to a loop downloads none of it, poster
+ *     included (a `poster` attribute in the markup is fetched eagerly).
+ *   - Which file is decided at that moment, from the box's real width: 720p for
+ *     a phone column or a 1× display, 1080p when the pixels are there to show
+ *     it. HEVC first, H.264 for engines that cannot decode it.
+ *   - It plays only while at least half of it is on screen, and pauses when it
+ *     leaves, so a page with ten loops decodes one or two at a time.
+ *   - No autoplay for a reader who asked for reduced motion or for Save-Data:
+ *     they get the poster and a play button, and the file only on that click.
+ *   - A visible pause button on every loop. A loop runs past five seconds and
+ *     never stops, which WCAG 2.2.2 does not allow without one.
+ *
+ * The files carry no audio track: WebKit only autoplays without a gesture when
+ * there is none, `muted` alone is not enough on iOS.
+ */
+
+import { translate } from "@docusaurus/Translate";
+import { Pause, Play } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+import {
+	type LoopHeight,
+	type LoopName,
+	loopPoster,
+	loopSources,
+	pickHeight,
+} from "../../lib/demo-loop";
+import { loopLabel } from "./labels";
+import styles from "./styles.module.css";
+
+type Props = { name: LoopName };
+
+/** Far enough ahead that the poster is there before the box is. */
+const NEAR = "100% 0px";
+
+function motionAllowed(): boolean {
+	try {
+		const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		const saveData = (navigator as Navigator & { connection?: { saveData?: boolean } }).connection
+			?.saveData;
+		return !reduced && !saveData;
+	} catch {
+		return true;
+	}
+}
+
+export default function DemoLoop({ name }: Props) {
+	const box = useRef<HTMLDivElement>(null);
+	const video = useRef<HTMLVideoElement>(null);
+	const [height, setHeight] = useState<LoopHeight | null>(null);
+	const [playing, setPlaying] = useState(false);
+	// null until the reader decides; then their choice beats visibility.
+	const [wanted, setWanted] = useState<boolean | null>(null);
+	const visible = useRef(false);
+	const auto = useRef(true);
+
+	// Attach the sources once the box is near.
+	useEffect(() => {
+		const el = box.current;
+		if (!el) return;
+		auto.current = motionAllowed();
+		const io = new IntersectionObserver(
+			(entries) => {
+				if (!entries.some((e) => e.isIntersecting)) return;
+				io.disconnect();
+				setHeight(pickHeight(el.clientWidth, window.devicePixelRatio));
+			},
+			{ rootMargin: NEAR },
+		);
+		io.observe(el);
+		return () => io.disconnect();
+	}, []);
+
+	// Play while on screen, unless the reader said otherwise.
+	useEffect(() => {
+		const el = box.current;
+		const v = video.current;
+		if (!el || !v || height === null) return;
+		const sync = () => {
+			const go = wanted ?? (auto.current && visible.current);
+			if (go && visible.current) {
+				v.play().catch(() => setPlaying(false));
+			} else {
+				v.pause();
+			}
+		};
+		const io = new IntersectionObserver(
+			(entries) => {
+				visible.current = entries[entries.length - 1].intersectionRatio >= 0.5;
+				sync();
+			},
+			{ threshold: [0, 0.5] },
+		);
+		io.observe(el);
+		sync();
+		return () => io.disconnect();
+	}, [height, wanted]);
+
+	const label = loopLabel(name);
+	const toggle = playing
+		? translate({ id: "demoLoop.pause", message: "Pause video" })
+		: translate({ id: "demoLoop.play", message: "Play video" });
+
+	return (
+		<figure className={styles.figure}>
+			<div ref={box} className={styles.box}>
+				<video
+					ref={video}
+					className={styles.video}
+					aria-label={label}
+					poster={height ? loopPoster(name) : undefined}
+					muted
+					loop
+					playsInline
+					preload={height && auto.current ? "auto" : "none"}
+					disablePictureInPicture
+					disableRemotePlayback
+					onPlay={() => setPlaying(true)}
+					onPause={() => setPlaying(false)}
+				>
+					{height &&
+						loopSources(name, height).map((s) => <source key={s.src} src={s.src} type={s.type} />)}
+				</video>
+				{height && (
+					<button
+						type="button"
+						className={`${styles.toggle} ${playing ? "" : styles.toggleIdle}`}
+						aria-label={toggle}
+						title={toggle}
+						onClick={() => setWanted(!playing)}
+					>
+						{playing ? <Pause size={16} /> : <Play size={16} />}
+					</button>
+				)}
+			</div>
+		</figure>
+	);
+}
diff --git a/website/src/components/DemoLoop/labels.ts b/website/src/components/DemoLoop/labels.ts
new file mode 100644
index 000000000..d4fb299c9
--- /dev/null
+++ b/website/src/components/DemoLoop/labels.ts
@@ -0,0 +1,145 @@
+/**
+ * What each loop shows, for anyone who cannot see it. The loops carry no words
+ * of their own, so the same files serve all eight locales and only these
+ * labels are translated.
+ *
+ * Built at render, like the Showcase copy: translate() answers in the locale
+ * being rendered, so this cannot be a module-level constant.
+ */
+
+import { translate } from "@docusaurus/Translate";
+
+import type { LoopName } from "../../lib/demo-loop";
+
+const LOOP = "Describes a short silent video loop of the app for screen readers.";
+
+export function loopLabel(name: LoopName): string {
+	switch (name) {
+		case "classic-zoom":
+			return translate({
+				id: "demoLoop.classic-zoom",
+				description: LOOP,
+				message:
+					"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.",
+			});
+		case "3d-camera":
+			return translate({
+				id: "demoLoop.3d-camera",
+				description: LOOP,
+				message:
+					"The same recording seen through the 3D camera, which tilts the screen and orbits around it while it follows the cursor.",
+			});
+		case "3d-cursors":
+			return translate({
+				id: "demoLoop.3d-cursors",
+				description: LOOP,
+				message:
+					"One recorded pointer, redrawn in five cursor styles one after another while the recording keeps playing.",
+			});
+		case "automatic-subtitles":
+			return translate({
+				id: "demoLoop.automatic-subtitles",
+				description: LOOP,
+				message:
+					"A narrated recording with captions under it, switching from English to French, Spanish and Korean.",
+			});
+		case "caption-styles":
+			return translate({
+				id: "demoLoop.caption-styles",
+				description: LOOP,
+				message:
+					"One caption shown in five styles: a plain caption, a bold yellow one, a handwritten one, a monospaced one, and one highlighted word by word.",
+			});
+		case "edit-by-transcript":
+			return translate({
+				id: "demoLoop.edit-by-transcript",
+				description: LOOP,
+				message:
+					"In the editor's transcript, a sentence is selected and deleted, and the matching cut appears on the timeline.",
+			});
+		case "tighten-pauses":
+			return translate({
+				id: "demoLoop.tighten-pauses",
+				description: LOOP,
+				message:
+					"Two clicks on the silence markers in the transcript, and both pauses are cut from the timeline.",
+			});
+		case "background-picker":
+			return translate({
+				id: "demoLoop.background-picker",
+				description: LOOP,
+				message:
+					"The editor's background picker going through wallpapers, a gradient and a solid color, then turning on the animated Aurora background.",
+			});
+		case "every-format":
+			return translate({
+				id: "demoLoop.every-format",
+				description: LOOP,
+				message:
+					"The same recording exported in 16:9, then square, then vertical, with the framing following the cursor.",
+			});
+		case "sensitive-data-mask":
+			return translate({
+				id: "demoLoop.sensitive-data-mask",
+				description: LOOP,
+				message:
+					"A sign-in form being filled in. The email and password fields stay blurred while they are typed.",
+			});
+		case "camera-cutout":
+			return translate({
+				id: "demoLoop.camera-cutout",
+				description: LOOP,
+				message:
+					"A webcam bubble over a screen recording. Its background is then removed, leaving the speaker in front of the screen.",
+			});
+		case "every-layout":
+			return translate({
+				id: "demoLoop.every-layout",
+				description: LOOP,
+				message:
+					"One recording with a webcam, cycling through the layouts: picture in picture, side by side, stacked, full camera, then screen only.",
+			});
+		case "device-frames":
+			return translate({
+				id: "demoLoop.device-frames",
+				description: LOOP,
+				message:
+					"The same playing recording framed in turn as a browser window, a phone, a laptop and a desktop monitor.",
+			});
+		case "animated-backgrounds":
+			return translate({
+				id: "demoLoop.animated-backgrounds",
+				description: LOOP,
+				message:
+					"A recording on a plain background, then on a blurred photo background that moves slowly behind it.",
+			});
+		case "beautiful-by-default":
+			return translate({
+				id: "demoLoop.beautiful-by-default",
+				description: LOOP,
+				message:
+					"A raw screen capture, then the same take as OpenScreen opens it, already zoomed, framed and with a restyled cursor, then in several looks.",
+			});
+		case "simpler-editor":
+			return translate({
+				id: "demoLoop.simpler-editor",
+				description: LOOP,
+				message:
+					"The OpenScreen editor. One click on a background thumbnail restyles the whole video, then the side panel switches to the transcript.",
+			});
+		case "edit-like-a-doc":
+			return translate({
+				id: "demoLoop.edit-like-a-doc",
+				description: LOOP,
+				message:
+					"Text selected in the transcript is deleted like text in a document, and the video is cut to match.",
+			});
+		case "ask-the-agent":
+			return translate({
+				id: "demoLoop.ask-the-agent",
+				description: LOOP,
+				message:
+					"A request typed into the editor's chat panel, and the edits the agent makes appearing on the timeline.",
+			});
+	}
+}
diff --git a/website/src/components/DemoLoop/styles.module.css b/website/src/components/DemoLoop/styles.module.css
new file mode 100644
index 000000000..c1b8f8838
--- /dev/null
+++ b/website/src/components/DemoLoop/styles.module.css
@@ -0,0 +1,70 @@
+/* The box is sized before anything loads (aspect-ratio), so attaching the
+   sources never shifts the page: no layout shift, whatever the network. */
+
+.figure {
+	margin: 28px 0;
+}
+
+.box {
+	position: relative;
+	aspect-ratio: 16 / 9;
+	overflow: hidden;
+	border-radius: 12px;
+	border: 1px solid var(--os-border);
+	background: var(--os-surface-1);
+}
+
+.video {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.toggle {
+	position: absolute;
+	right: 10px;
+	bottom: 10px;
+	display: grid;
+	place-items: center;
+	width: 34px;
+	height: 34px;
+	padding: 0;
+	border: 0;
+	border-radius: 999px;
+	background: rgba(8, 10, 13, 0.62);
+	color: #fff;
+	cursor: pointer;
+	opacity: 0.55;
+	transition: opacity 0.15s;
+}
+
+/* Fully visible whenever it is the way in: paused, hovered or focused. */
+.toggleIdle,
+.box:hover .toggle,
+.toggle:focus-visible {
+	opacity: 1;
+}
+
+@media (hover: none) {
+	.toggle {
+		opacity: 0.85;
+	}
+}
+
+/* Two loops side by side from tablet width, one above the other below it. */
+.pair {
+	display: grid;
+	gap: 16px;
+	margin: 28px 0;
+}
+
+.pair .figure {
+	margin: 0;
+}
+
+@media (min-width: 760px) {
+	.pair {
+		grid-template-columns: 1fr 1fr;
+	}
+}
diff --git a/website/src/lib/demo-loop.test.ts b/website/src/lib/demo-loop.test.ts
new file mode 100644
index 000000000..26f83e105
--- /dev/null
+++ b/website/src/lib/demo-loop.test.ts
@@ -0,0 +1,35 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+
+import { LOOP_BASE, loopPoster, loopSources, pickHeight } from "./demo-loop.ts";
+
+test("a phone column gets the 720p file, even on a 3x screen", () => {
+	assert.equal(pickHeight(343, 3), 720);
+	assert.equal(pickHeight(390, 2), 720);
+});
+
+test("a docs column on a 2x laptop gets the 1080p file", () => {
+	assert.equal(pickHeight(760, 2), 1080);
+});
+
+test("the same column on a 1x display stays on 720p", () => {
+	assert.equal(pickHeight(760, 1), 720);
+});
+
+test("a missing or odd device pixel ratio is read as 1", () => {
+	assert.equal(pickHeight(1200, 0), 720);
+	assert.equal(pickHeight(1400, Number.NaN), 1080);
+});
+
+test("HEVC comes first, H.264 second, with the size in both names", () => {
+	const [hevc, h264] = loopSources("classic-zoom", 720);
+	assert.equal(hevc.src, `${LOOP_BASE}/classic-zoom-720-hevc.mp4`);
+	assert.match(hevc.type, /hvc1\.1\.6\.L120/);
+	assert.equal(h264.src, `${LOOP_BASE}/classic-zoom-720-h264.mp4`);
+	assert.match(h264.type, /avc1\.64002a/);
+	assert.match(loopSources("classic-zoom", 1080)[0].type, /L123/);
+});
+
+test("the poster sits beside the clips", () => {
+	assert.equal(loopPoster("every-format"), `${LOOP_BASE}/every-format-poster.webp`);
+});
diff --git a/website/src/lib/demo-loop.ts b/website/src/lib/demo-loop.ts
new file mode 100644
index 000000000..d2bfc435e
--- /dev/null
+++ b/website/src/lib/demo-loop.ts
@@ -0,0 +1,72 @@
+/**
+ * Where the demo loops live and which file a reader gets.
+ *
+ * The loops are served from Cloudflare R2, not from website/static/. Everything
+ * under static/ is committed to git for good (scripts/check-media-budget.mjs
+ * says why), and eighteen 1080p60 clips in two codecs and two sizes are about
+ * 50 MB per cut. The bucket holds them outside the repository; the folder name
+ * is the cut, so a re-encode goes to a new folder and the old files can keep
+ * their `immutable` cache header.
+ */
+
+export const LOOP_BASE = "https://media.getopenscreen.com/loops/2026-10";
+
+export const LOOP_NAMES = [
+	"classic-zoom",
+	"3d-camera",
+	"3d-cursors",
+	"automatic-subtitles",
+	"caption-styles",
+	"edit-by-transcript",
+	"tighten-pauses",
+	"background-picker",
+	"every-format",
+	"sensitive-data-mask",
+	"camera-cutout",
+	"every-layout",
+	"device-frames",
+	"animated-backgrounds",
+	"beautiful-by-default",
+	"simpler-editor",
+	"edit-like-a-doc",
+	"ask-the-agent",
+] as const;
+
+export type LoopName = (typeof LOOP_NAMES)[number];
+
+export type LoopHeight = 720 | 1080;
+
+/**
+ * The smaller file whenever it is sharp enough. Every loop is 16:9, so the
+ * height a box needs is its width × 9/16 in device pixels. The ratio is capped
+ * at 2: a 3× phone shows a column a few hundred CSS pixels wide, where 720 rows
+ * are already more than it can resolve.
+ */
+export function pickHeight(cssWidth: number, devicePixelRatio: number): LoopHeight {
+	const dpr = Math.min(Math.max(devicePixelRatio || 1, 1), 2);
+	const rows = (cssWidth * dpr * 9) / 16;
+	return rows > 760 ? 1080 : 720;
+}
+
+/**
+ * The codec strings are the encoder's real profile and level (ffprobe on the
+ * files), not the bare "hvc1": an engine that can decode HEVC Main only up to a
+ * lower level should say no here and take the H.264 file, rather than say yes
+ * and stall. HEVC is listed first: about 40% smaller at the same VMAF.
+ */
+export function loopSources(name: LoopName, height: LoopHeight) {
+	return [
+		{
+			src: `${LOOP_BASE}/${name}-${height}-hevc.mp4`,
+			type: `video/mp4; codecs="hvc1.1.6.L${height === 1080 ? 123 : 120}.B0"`,
+		},
+		{
+			src: `${LOOP_BASE}/${name}-${height}-h264.mp4`,
+			type: `video/mp4; codecs="avc1.64002a"`,
+		},
+	];
+}
+
+export function loopPoster(name: LoopName): string {
+	return `${LOOP_BASE}/${name}-poster.webp`;
+}
diff --git a/website/src/pages/alternatives/screen-studio.mdx b/website/src/pages/alternatives/screen-studio.mdx
index 7ed82c691..005585e05 100644
--- a/website/src/pages/alternatives/screen-studio.mdx
+++ b/website/src/pages/alternatives/screen-studio.mdx
@@ -9,6 +9,9 @@ keywords:
   - open source screen studio alternative
 ---
 
+import DemoLoop from "@site/src/components/DemoLoop";
+import DemoLoopPair from "@site/src/components/DemoLoop/Pair";
+
 # A free, open-source Screen Studio alternative
 
 OpenScreen is a free, MIT-licensed Screen Studio alternative for Windows, macOS and Linux. Like Screen Studio, it zooms in where you click, restyles the cursor after the take, adds backgrounds and on-device captions, and exports MP4 or GIF. Unlike Screen Studio, which runs only on macOS and needs a paid plan to export, it costs nothing and needs no account. Screen Studio is still the better choice if you share recordings as hosted links with comments, or record an iPhone or iPad.
@@ -49,6 +52,11 @@ Both apps cover the following. None of it is unique to either one.
 - **Notes while you record.** Both have speaker notes. On Windows and macOS, OpenScreen's notes window also has a teleprompter mode.
 - **Local processing.** Screen Studio says it never sends data about your recordings to its servers. OpenScreen has no account, no server of its own and no analytics. The [FAQ](/docs/faq/#does-openscreen-work-offline) lists the few connections it still makes.
 
+<DemoLoopPair>
+  <DemoLoop name="background-picker" />
+  <DemoLoop name="sensitive-data-mask" />
+</DemoLoopPair>
+
 ## Where OpenScreen differs
 
 ### Price, license and platforms
@@ -63,6 +71,11 @@ Both apps cover the following. None of it is unique to either one.
 - **Annotations.** Text with six animations, arrows in eight directions, images, and blur regions. Screen Studio's roadmap lists "Annotations", described as visual or textual descriptions of clicks, as paused. See [Editing & timeline](/docs/editing-timeline/).
 - **Webcam background.** Remove, blur or replace the camera background without a green screen, in the stable release. Screen Studio lists camera background removal as a beta feature.
 
+<DemoLoopPair>
+  <DemoLoop name="every-layout" />
+  <DemoLoop name="camera-cutout" />
+</DemoLoopPair>
+
 ### Export and automation
 
 - **A command-line interface.** Scripts, CI and coding agents can drive OpenScreen from its [command line](/docs/cli/). Screen Studio's guide has no command-line entry.
diff --git a/website/src/pages/features/auto-zoom.mdx b/website/src/pages/features/auto-zoom.mdx
index ac589c847..c1375e9ab 100644
--- a/website/src/pages/features/auto-zoom.mdx
+++ b/website/src/pages/features/auto-zoom.mdx
@@ -8,12 +8,16 @@ keywords:
   - auto zoom screen recording windows
 ---
 
+import DemoLoop from "@site/src/components/DemoLoop";
+
 # A free screen recorder with auto zoom
 
 OpenScreen is a free, MIT-licensed screen recorder with auto zoom for Windows, macOS and Linux. After each take, it reads the clicks it recorded and zooms in on them, with no network call and no AI model. Screen Studio, Cap and Camtasia also zoom automatically; OpenScreen does it for free, on all three systems.
 
 This page is published by the OpenScreen project. The Screen Studio, Cap and Camtasia details come from screen.studio, cap.so and techsmith.com and were checked in September 2026. The sources are listed at the end.
 
+<DemoLoop name="classic-zoom" />
+
 ## At a glance
 
 | | |
@@ -68,12 +72,16 @@ Automatic zooms are a starting point. The same zoom regions can be placed and tu
 
 A manual zoom with a manual focus needs no cursor data, so it also works on a video imported from another tool. See [Zoom regions](/docs/editing-timeline/#zoom-regions) for the zoom inspector.
 
+<DemoLoop name="3d-camera" />
+
 ## The cursor after the take
 
 The same recorded movement drives the cursor in the export. The Cursor facet shows or hides it and sets its size, smoothing, motion blur, click bounce and click impact. The cursor path is smoothed the same way for the preview and the export, so the preview matches the file.
 
 Click bounce needs recorded clicks. On macOS that takes the Accessibility permission, and on Linux your user must be in the `input` group. [Recording](/docs/recording/) lists what each platform captures.
 
+<DemoLoop name="3d-cursors" />
+
 ## From the command line
 
 The `export` command of the [CLI](/docs/cli/) accepts `--auto-zoom`. Before rendering, it plans zooms from the recording's clicks, the same way the editor does, and keeps them clear of the project's own. A video with no OpenScreen cursor data gives it nothing to work from.
diff --git a/website/src/pages/features/captions.mdx b/website/src/pages/features/captions.mdx
index 0caf740ae..ef0f6ba65 100644
--- a/website/src/pages/features/captions.mdx
+++ b/website/src/pages/features/captions.mdx
@@ -9,12 +9,17 @@ keywords:
   - auto subtitles screen recording
 ---
 
+import DemoLoop from "@site/src/components/DemoLoop";
+import DemoLoopPair from "@site/src/components/DemoLoop/Pair";
+
 # A screen recorder with captions made on your machine
 
 OpenScreen is a free, MIT-licensed screen recorder with captions for Windows, macOS and Linux. It transcribes your recording on your own computer with Whisper, after a one-time model download of about 264 MB, and burns styled captions into the exported video. If you need separate SRT or VTT subtitle files for a course platform or an accessibility requirement, Cap or Camtasia is the better choice.
 
 This page is published by the OpenScreen project. The Cap, Camtasia and Screen Studio details come from cap.so, techsmith.com and screen.studio and were checked in September 2026. The sources are listed at the end.
 
+<DemoLoop name="automatic-subtitles" />
+
 ## At a glance
 
 | | |
@@ -52,12 +57,19 @@ Captions are a live view of the transcript, not a copy of it. Cut words from the
 
 The preview and the export use the same layout, so the captions you see are the ones burned into the video. **Show captions** turns them off for an export without them. Full reference in [Captions & transcript](/docs/captions/).
 
+<DemoLoop name="caption-styles" />
+
 ### Cutting by deleting words
 
 The **Transcript** panel shows the words of every clip on the timeline. Select a word or a passage and press Delete: that span is cut from playback and export, like a trim on the timeline. Cut words show struck through, and you can restore them. Silences are marked in the text and can be cut or restored the same way.
 
 Whisper reports word times a little late. OpenScreen pulls each word boundary back onto the audio, so a cut starts where the spoken word starts rather than a syllable later. See [Transcript editing](/docs/captions/#transcript-editing).
 
+<DemoLoopPair>
+  <DemoLoop name="edit-by-transcript" />
+  <DemoLoop name="tighten-pauses" />
+</DemoLoopPair>
+
 ### Translation with your own key
 
 Translation covers 15 languages: English, French, Spanish, German, Italian, Portuguese, Dutch, Polish, Turkish, Russian, Arabic, Hindi, Japanese, Korean and Chinese. It goes through the AI provider you connect for chat editing, with your own key. Until you connect a provider, it sends nothing. The translation is stored beside the transcript, so the original words and timings stay as they were, and you can switch back at any time. See [Translation](/docs/captions/#translation) and [AI editing](/docs/ai-editing/).

From fc4ba90d123359d178c12997c40d898d418980c6 Mon Sep 17 00:00:00 2001
From: Etienne Lescot <etiennelescot@gmail.com>
Date: Fri, 2 Oct 2026 11:37:26 +0200
Subject: [PATCH 2/8] fix(website): start a loop that is already on screen when
 its sources attach

Its play() landed while the browser was still selecting a source and was
aborted, and no visibility threshold was crossed afterwards to ask again,
so the first loop on a page sat paused. Ask again on loadeddata.
---
 website/src/components/DemoLoop/index.tsx | 9 ++++++++-
 website/src/lib/demo-loop.ts              | 6 ++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/website/src/components/DemoLoop/index.tsx b/website/src/components/DemoLoop/index.tsx
index 1e4e6db41..dea1cc7f6 100644
--- a/website/src/components/DemoLoop/index.tsx
+++ b/website/src/components/DemoLoop/index.tsx
@@ -101,7 +101,14 @@ export default function DemoLoop({ name }: Props) {
 		);
 		io.observe(el);
 		sync();
-		return () => io.disconnect();
+		// A loop already on screen when its sources attach gets its play() while
+		// the browser is still choosing a source, which aborts it, and no
+		// threshold is crossed afterwards to ask again. Ask once there is a frame.
+		v.addEventListener("loadeddata", sync);
+		return () => {
+			io.disconnect();
+			v.removeEventListener("loadeddata", sync);
+		};
 	}, [height, wanted]);
 
 	const label = loopLabel(name);
diff --git a/website/src/lib/demo-loop.ts b/website/src/lib/demo-loop.ts
index d2bfc435e..da9a64e20 100644
--- a/website/src/lib/demo-loop.ts
+++ b/website/src/lib/demo-loop.ts
@@ -4,7 +4,7 @@
  * The loops are served from Cloudflare R2, not from website/static/. Everything
  * under static/ is committed to git for good (scripts/check-media-budget.mjs
  * says why), and eighteen 1080p60 clips in two codecs and two sizes are about
- * 50 MB per cut. The bucket holds them outside the repository; the folder name
+ * 75 MB per cut. The bucket holds them outside the repository; the folder name
  * is the cut, so a re-encode goes to a new folder and the old files can keep
  * their `immutable` cache header.
  */
@@ -52,7 +52,9 @@ export function pickHeight(cssWidth: number, devicePixelRatio: number): LoopHeig
  * The codec strings are the encoder's real profile and level (ffprobe on the
  * files), not the bare "hvc1": an engine that can decode HEVC Main only up to a
  * lower level should say no here and take the H.264 file, rather than say yes
- * and stall. HEVC is listed first: about 40% smaller at the same VMAF.
+ * and stall. HEVC is listed first because it is the better file, measured with
+ * VMAF against the masters: 23% lighter at equal quality on every-layout, and
+ * 97.8 against 96.0 at equal size on 3d-cursors.
  */
 export function loopSources(name: LoopName, height: LoopHeight) {
 	return [

From 7d086df9c5d01527aa1e14cc6735ebdabc4f5b5d Mon Sep 17 00:00:00 2001
From: Etienne Lescot <etiennelescot@gmail.com>
Date: Fri, 2 Oct 2026 12:23:42 +0200
Subject: [PATCH 3/8] feat(website): film the homepage below the editor

A films section under the scroll-driven editor, for what the editor does
not reach: the look a take opens with, depth (3D camera, cursor packs,
device frames, animated backgrounds), the webcam (layouts, cutout), and
the format and blur before a file ships. Centred head, a wide stage whose
loops take turns behind a tab bar that doubles as their progress, and
three notes under it. Every claim was checked against the app's English
UI and projectDefaults.ts; the seven translations reuse the app's own
words for its options.

The Showcase's captions and agent bands are filmed now too: their copy
stays, the drawn panels go (and their CSS). The recorder and the encoder
keep their drawings, having no film.

DemoLoop gains a one-shot mode with onEnded and per-frame onProgress
for the stages. Also fixes the caption-styles label: the fifth style
shows one word at a time; nothing in the app highlights word by word.
---
 website/i18n/code.source.json                 | 111 ++++--
 website/i18n/de/code.json                     | 158 +++++++-
 website/i18n/es/code.json                     | 158 +++++++-
 website/i18n/fr/code.json                     | 158 +++++++-
 website/i18n/ja/code.json                     | 158 +++++++-
 website/i18n/pt-BR/code.json                  | 158 +++++++-
 website/i18n/zh-CN/code.json                  | 158 +++++++-
 website/i18n/zh-TW/code.json                  | 158 +++++++-
 website/src/components/DemoLoop/index.tsx     |  29 +-
 website/src/components/DemoLoop/labels.ts     |   2 +-
 website/src/components/Films/content.tsx      | 290 ++++++++++++++
 website/src/components/Films/index.tsx        | 136 +++++++
 .../src/components/Films/styles.module.css    | 272 ++++++++++++++
 website/src/components/Showcase/content.ts    |  30 +-
 website/src/components/Showcase/index.tsx     |  28 +-
 website/src/components/Showcase/panels.tsx    | 131 +------
 .../src/components/Showcase/styles.module.css | 354 +-----------------
 website/src/pages/index.tsx                   |   4 +
 18 files changed, 1898 insertions(+), 595 deletions(-)
 create mode 100644 website/src/components/Films/content.tsx
 create mode 100644 website/src/components/Films/index.tsx
 create mode 100644 website/src/components/Films/styles.module.css

diff --git a/website/i18n/code.source.json b/website/i18n/code.source.json
index b09e84f44..e2572a445 100644
--- a/website/i18n/code.source.json
+++ b/website/i18n/code.source.json
@@ -1,5 +1,4 @@
 {
-  "appLanguages.line": "Interface in {count} languages: {names}",
   "download.macos.arm.label": "Apple Silicon",
   "download.macos.arm.sublabel": "M1 and newer · .dmg",
   "download.macos.intel.label": "Intel",
@@ -72,13 +71,41 @@
   "home.install.note.windows": "Windows",
   "home.install.note.mac": "Mac",
   "home.install.note.linux": "Linux",
+  "appLanguages.line": "Interface in {count} languages: {names}",
+  "footer.brand.description": "A free, open-source screen recorder and editor. Community-maintained continuation, MIT licensed.",
+  "footer.product.title": "Product",
+  "footer.product.download": "Download",
+  "footer.product.autoZoom": "Auto zoom",
+  "footer.product.captions": "Local captions",
+  "footer.platforms.title": "Platforms",
+  "footer.platforms.windows": "Windows",
+  "footer.platforms.mac": "macOS",
+  "footer.platforms.linux": "Linux",
+  "footer.compare.title": "Compare",
+  "footer.compare.screenStudio": "Screen Studio alternative",
+  "footer.compare.camtasia": "Camtasia alternative",
+  "footer.compare.loom": "Loom alternative",
+  "footer.compare.cap": "OpenScreen vs Cap",
+  "footer.compare.obs": "OpenScreen vs OBS Studio",
+  "footer.project.title": "Project",
+  "footer.project.releases": "Releases",
+  "footer.project.blog": "Blog",
+  "footer.project.faq": "FAQ",
+  "footer.community.title": "Community",
+  "footer.community.contributing": "Contributing",
+  "footer.community.license": "License (MIT)",
+  "footer.bottom.license": "OpenScreen is released under the MIT license. Built by the community — free, forever.",
+  "footer.bottom.lineage": "The official spin-off of the {originalProject} — 39k stars, now archived.",
+  "footer.bottom.lineage.originalProject": "original OpenScreen project",
+  "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 highlighted word by word.",
+  "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.",
@@ -92,8 +119,6 @@
   "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.",
-  "editor.skipLink": "Skip the editor — go to downloads",
-  "editor.title": "Five things you will actually do",
   "recreation.style.kicker": "Style",
   "recreation.style.title": "Swap the background",
   "recreation.style.sub": "Image, color or gradient behind your recording — no re-shoot.",
@@ -109,6 +134,55 @@
   "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.",
+  "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.",
+  "films.default.lead.zoomed": "already zoomed on your clicks",
+  "films.default.note.zooms": "{t} Each take is zoomed where you clicked, by a fixed rule: no AI, no network call. Turn it off in Record mode.",
+  "films.default.note.zooms.t": "Zooms from your clicks.",
+  "films.default.note.frame": "{t} Wallpaper, padding, shadow, rounded corners and a little motion blur are on before you touch anything.",
+  "films.default.note.frame.t": "A finished frame.",
+  "films.default.note.cursor": "{t} The pointer is recorded apart from the pixels, so its size and style can change after the take.",
+  "films.default.note.cursor.t": "A cursor you can redo.",
+  "films.depth.kicker": "3D",
+  "films.depth.title": "Depth, not just zoom.",
+  "films.depth.lead": "Turn the screen or {orbit} as you zoom, draw the pointer as {cursor} with a shadow, and put the whole take {device}, over a background that moves.",
+  "films.depth.lead.orbit": "orbit the screen",
+  "films.depth.lead.cursor": "a 3D cursor",
+  "films.depth.lead.device": "in a device",
+  "films.depth.tab.camera": "3D camera",
+  "films.depth.tab.cursors": "Cursors",
+  "films.depth.tab.frames": "Device frames",
+  "films.depth.tab.backgrounds": "Animated backgrounds",
+  "films.depth.note.camera": "{t} Each zoom can stay flat, turn the screen left or right, or orbit it while following the zoom's focus. Depth of field softens the far side.",
+  "films.depth.note.camera.t": "3D camera.",
+  "films.depth.note.cursors": "{t} Studio Ink, Prism Glow, Pop Coral, Pixel Candy and Star Sprout, each of which can be drawn as a 3D object with a shadow.",
+  "films.depth.note.cursors.t": "Five cursor packs.",
+  "films.depth.note.frames": "{t} A window, laptop, phone or screen, light or dark, over a background animated with Drift, Aurora or Waves.",
+  "films.depth.note.frames.t": "Frames and motion.",
+  "films.camera.kicker": "Camera",
+  "films.camera.title": "Your camera, your screen, or both.",
+  "films.camera.lead": "One take with a webcam can be {layouts}, and the camera's background can be {removed}, with no green screen.",
+  "films.camera.lead.layouts": "picture in picture, side by side, stacked or full screen",
+  "films.camera.lead.removed": "removed on your computer",
+  "films.camera.tab.layouts": "Layouts",
+  "films.camera.tab.cutout": "Cutout",
+  "films.camera.note.layouts": "{t} Picture in picture, dual frame, vertical stack, or no webcam at all.",
+  "films.camera.note.layouts.t": "Four layouts.",
+  "films.camera.note.full": "{t} Give a stretch of the timeline to the camera: it grows to full screen, then eases back.",
+  "films.camera.note.full.t": "Full Camera.",
+  "films.camera.note.background": "{t} A segmentation model separates you from the room on your own computer. Nothing is uploaded.",
+  "films.camera.note.background.t": "Cutout, blur or replace.",
+  "films.ship.kicker": "Before it ships",
+  "films.ship.title": "Every format. Nothing private.",
+  "films.ship.lead": "One take becomes {formats}, and whatever should not be seen stays {blur}.",
+  "films.ship.lead.formats": "wide, square or vertical",
+  "films.ship.lead.blur": "under a blur",
+  "films.ship.formats": "{t} The same take, framed for 16:9, 9:16, 1:1, 4:3, 4:5, 16:10 or 10:16.",
+  "films.ship.formats.t": "Any aspect ratio.",
+  "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",
   "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.",
@@ -127,38 +201,11 @@
   "showcase.captions.fact": "whisper.cpp · 100 languages · offline after first run",
   "showcase.captions.link.docs": "Captions and transcript docs",
   "showcase.captions.link.feature": "How local captions compare",
-  "showcase.captions.label": "A drawing of the captions panel: the line “amber day on the validator, and it” set large over the video, and beside it captions switched on, a note that seven caption lines are derived live from the transcript, and a language row showing the original transcript and Français as buttons, a Translate button and the option to delete a translation.",
   "showcase.agent.kicker": "agent",
   "showcase.agent.claim": "Or say which parts to cut.",
   "showcase.agent.body": "The wizard further up this page places zooms by watching where your cursor went. The agent goes further: it reads the actual transcript and the actual timeline, so it answers with timecodes you can go and check — which spans it will cut, and how much that saves. Every edit it makes is an ordinary undoable one, and it needs a provider key you supply. Nothing runs until you connect one.",
   "showcase.agent.fact": "bring your own key · off by default · every edit is undoable",
   "showcase.agent.link.docs": "AI editing docs",
   "showcase.agent.link.feature": "How automatic zooms work",
-  "showcase.agent.label": "A drawing of the agent's reply. Asked to cut the dead air, it answers with timecodes: 0 to 2.19 seconds of lead-in before “Hi” and 35.12 to 40.03 seconds of tail after “think.”, taking the video from 40 seconds to 33 seconds of playable footage, with the existing zooms left on the same moments — then a green line reading “applied: added 2 trims”.",
-  "showcase.title": "Recorder, captions, agent, encoder.",
-  "footer.brand.description": "A free, open-source screen recorder and editor. Community-maintained continuation, MIT licensed.",
-  "footer.product.title": "Product",
-  "footer.product.download": "Download",
-  "footer.product.autoZoom": "Auto zoom",
-  "footer.product.captions": "Local captions",
-  "footer.platforms.title": "Platforms",
-  "footer.platforms.windows": "Windows",
-  "footer.platforms.mac": "macOS",
-  "footer.platforms.linux": "Linux",
-  "footer.compare.title": "Compare",
-  "footer.compare.screenStudio": "Screen Studio alternative",
-  "footer.compare.camtasia": "Camtasia alternative",
-  "footer.compare.loom": "Loom alternative",
-  "footer.compare.cap": "OpenScreen vs Cap",
-  "footer.compare.obs": "OpenScreen vs OBS Studio",
-  "footer.project.title": "Project",
-  "footer.project.releases": "Releases",
-  "footer.project.blog": "Blog",
-  "footer.project.faq": "FAQ",
-  "footer.community.title": "Community",
-  "footer.community.contributing": "Contributing",
-  "footer.community.license": "License (MIT)",
-  "footer.bottom.license": "OpenScreen is released under the MIT license. Built by the community — free, forever.",
-  "footer.bottom.lineage": "The official spin-off of the {originalProject} — 39k stars, now archived.",
-  "footer.bottom.lineage.originalProject": "original OpenScreen project"
+  "showcase.title": "Recorder, captions, agent, encoder."
 }
diff --git a/website/i18n/de/code.json b/website/i18n/de/code.json
index 8b180dbb9..0ceded321 100644
--- a/website/i18n/de/code.json
+++ b/website/i18n/de/code.json
@@ -336,10 +336,6 @@
     "message": "Lokale Untertitel im Vergleich",
     "description": "Link label under the panel."
   },
-  "showcase.captions.label": {
-    "message": "Eine Zeichnung des Untertitelbereichs: die Zeile „amber day on the validator, and it“ groß über dem Video, daneben eingeschaltete Untertitel, ein Hinweis, dass sieben Untertitelzeilen live aus dem Transkript abgeleitet werden, und eine Sprachzeile mit dem Originaltranskript und Français als Schaltflächen, einer Schaltfläche Translate und der Option, eine Übersetzung zu löschen.",
-    "description": "Describes a drawing of the app for screen readers. The drawing is in English: keep the quoted words as drawn."
-  },
   "showcase.agent.kicker": {
     "message": "Agent"
   },
@@ -359,10 +355,6 @@
     "message": "So funktionieren automatische Zooms",
     "description": "Link label under the panel."
   },
-  "showcase.agent.label": {
-    "message": "Eine Zeichnung der Antwort des Agenten. Auf die Bitte, die Stille herauszuschneiden, antwortet er mit Timecodes: 0 bis 2,19 Sekunden Vorlauf vor „Hi“ und 35,12 bis 40,03 Sekunden Nachlauf nach „think.“. Damit schrumpft das Video von 40 auf 33 Sekunden abspielbares Material, und die vorhandenen Zooms bleiben auf denselben Momenten. Danach folgt eine grüne Zeile: „applied: added 2 trims“.",
-    "description": "Describes a drawing of the app for screen readers. The drawing is in English: keep the quoted words as drawn."
-  },
   "showcase.title": {
     "message": "Rekorder, Untertitel, Agent, Encoder."
   },
@@ -794,7 +786,7 @@
     "description": "Describes a short silent video loop of the app for screen readers."
   },
   "demoLoop.caption-styles": {
-    "message": "Ein Untertitel in fünf Stilen: schlicht, fett in Gelb, handschriftlich, in Festbreitenschrift und Wort für Wort hervorgehoben.",
+    "message": "Ein Untertitel in fünf Stilen: schlicht, fett in Gelb, handschriftlich, in Festbreitenschrift und einer, der jeweils nur ein Wort zeigt.",
     "description": "Describes a short silent video loop of the app for screen readers."
   },
   "demoLoop.edit-by-transcript": {
@@ -848,5 +840,153 @@
   "demoLoop.ask-the-agent": {
     "message": "Eine im Chat-Panel des Editors eingegebene Anfrage, und die Änderungen des Agenten, die in der Zeitleiste erscheinen.",
     "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "films.default.kicker": {
+    "message": "Ab Werk"
+  },
+  "films.default.title": {
+    "message": "Gut aussehend ab der ersten Aufnahme."
+  },
+  "films.default.lead": {
+    "message": "Jede neue Aufnahme öffnet sich {zoomed}, auf einem Hintergrundbild, mit Rand, Schatten und abgerundeten Ecken. Ändern Sie, was Sie möchten, oder exportieren Sie sie so."
+  },
+  "films.default.lead.zoomed": {
+    "message": "bereits auf Ihre Klicks gezoomt"
+  },
+  "films.default.note.zooms": {
+    "message": "{t} Jede Aufnahme wird dort gezoomt, wo Sie geklickt haben, nach einer festen Regel: ohne KI, ohne Netzwerkaufruf. Abschaltbar im Modus Aufnahme."
+  },
+  "films.default.note.zooms.t": {
+    "message": "Zooms aus Ihren Klicks."
+  },
+  "films.default.note.frame": {
+    "message": "{t} Hintergrundbild, Rand, Schatten, abgerundete Ecken und etwas Bewegungsunschärfe sind aktiv, bevor Sie irgendetwas anfassen."
+  },
+  "films.default.note.frame.t": {
+    "message": "Ein fertiger Rahmen."
+  },
+  "films.default.note.cursor": {
+    "message": "{t} Der Mauszeiger wird getrennt von den Pixeln aufgezeichnet, daher lassen sich Größe und Stil nach der Aufnahme ändern."
+  },
+  "films.default.note.cursor.t": {
+    "message": "Ein Cursor, den man neu machen kann."
+  },
+  "films.depth.kicker": {
+    "message": "3D"
+  },
+  "films.depth.title": {
+    "message": "Tiefe, nicht nur Zoom."
+  },
+  "films.depth.lead": {
+    "message": "Neigen Sie den Bildschirm oder {orbit} beim Zoomen, zeichnen Sie den Zeiger als {cursor} mit Schatten und setzen Sie die ganze Aufnahme {device}, vor einen Hintergrund, der sich bewegt."
+  },
+  "films.depth.lead.orbit": {
+    "message": "umkreisen Sie ihn"
+  },
+  "films.depth.lead.cursor": {
+    "message": "3D-Cursor"
+  },
+  "films.depth.lead.device": {
+    "message": "in ein Gerät"
+  },
+  "films.depth.tab.camera": {
+    "message": "3D-Kamera"
+  },
+  "films.depth.tab.cursors": {
+    "message": "Cursor"
+  },
+  "films.depth.tab.frames": {
+    "message": "Geräterahmen"
+  },
+  "films.depth.tab.backgrounds": {
+    "message": "Animierte Hintergründe"
+  },
+  "films.depth.note.camera": {
+    "message": "{t} Jeder Zoom kann flach bleiben, den Bildschirm nach links oder rechts drehen oder ihn umkreisen und dabei dem Fokus des Zooms folgen. Die Tiefenschärfe macht die ferne Seite weich."
+  },
+  "films.depth.note.camera.t": {
+    "message": "3D-Kamera."
+  },
+  "films.depth.note.cursors": {
+    "message": "{t} Studio Ink, Prism Glow, Pop Coral, Pixel Candy und Star Sprout, jedes davon lässt sich als 3D-Objekt mit Schatten zeichnen."
+  },
+  "films.depth.note.cursors.t": {
+    "message": "Fünf Cursor-Pakete."
+  },
+  "films.depth.note.frames": {
+    "message": "{t} Ein Fenster, ein Notebook, ein Smartphone oder ein Bildschirm, hell oder dunkel, vor einem Hintergrund, animiert mit Treiben, Polarlicht oder Wellen."
+  },
+  "films.depth.note.frames.t": {
+    "message": "Rahmen und Bewegung."
+  },
+  "films.camera.kicker": {
+    "message": "Kamera"
+  },
+  "films.camera.title": {
+    "message": "Ihre Kamera, Ihr Bildschirm oder beides."
+  },
+  "films.camera.lead": {
+    "message": "Eine Aufnahme mit Webcam kann {layouts} sein, und der Hintergrund der Kamera kann {removed} werden, ohne Greenscreen."
+  },
+  "films.camera.lead.layouts": {
+    "message": "Bild in Bild, nebeneinander, gestapelt oder im Vollbild"
+  },
+  "films.camera.lead.removed": {
+    "message": "auf Ihrem Computer entfernt"
+  },
+  "films.camera.tab.layouts": {
+    "message": "Layouts"
+  },
+  "films.camera.tab.cutout": {
+    "message": "Freisteller"
+  },
+  "films.camera.note.layouts": {
+    "message": "{t} Bild in Bild, Doppelrahmen, vertikal gestapelt oder ganz ohne Webcam."
+  },
+  "films.camera.note.layouts.t": {
+    "message": "Vier Layouts."
+  },
+  "films.camera.note.full": {
+    "message": "{t} Geben Sie der Kamera einen Abschnitt der Zeitleiste: Sie wird zum Vollbild und gleitet dann zurück."
+  },
+  "films.camera.note.full.t": {
+    "message": "Vollbild-Kamera."
+  },
+  "films.camera.note.background": {
+    "message": "{t} Ein Segmentierungsmodell trennt Sie auf Ihrem eigenen Computer vom Raum. Nichts wird hochgeladen."
+  },
+  "films.camera.note.background.t": {
+    "message": "Freistellen, weichzeichnen oder ersetzen."
+  },
+  "films.ship.kicker": {
+    "message": "Vor dem Versand"
+  },
+  "films.ship.title": {
+    "message": "Jedes Format. Nichts Privates."
+  },
+  "films.ship.lead": {
+    "message": "Aus einer Aufnahme wird {formats}, und was nicht gesehen werden soll, bleibt {blur}."
+  },
+  "films.ship.lead.formats": {
+    "message": "Quer-, Quadrat- oder Hochformat"
+  },
+  "films.ship.lead.blur": {
+    "message": "unter einer Unschärfe"
+  },
+  "films.ship.formats": {
+    "message": "{t} Dieselbe Aufnahme, gerahmt für 16:9, 9:16, 1:1, 4:3, 4:5, 16:10 oder 10:16."
+  },
+  "films.ship.formats.t": {
+    "message": "Jedes Seitenverhältnis."
+  },
+  "films.ship.blur": {
+    "message": "{t} Gauß oder Mosaik, als Rechteck, Oval oder Freihandform, über einer E-Mail-Adresse, einem Schlüssel oder einem Passwort."
+  },
+  "films.ship.blur.t": {
+    "message": "Unschärfebereiche."
+  },
+  "films.label": {
+    "message": "Mehr von der App, in Bewegung",
+    "description": "Read by screen readers only: names the section of feature videos"
   }
 }
diff --git a/website/i18n/es/code.json b/website/i18n/es/code.json
index d844a827e..828cde1f7 100644
--- a/website/i18n/es/code.json
+++ b/website/i18n/es/code.json
@@ -323,10 +323,6 @@
     "message": "Comparativa de subtítulos locales",
     "description": "Link label under the panel."
   },
-  "showcase.captions.label": {
-    "message": "Dibujo del panel de subtítulos: la línea “amber day on the validator, and it” en tamaño grande sobre el video y, al lado, los subtítulos activados, una nota que indica que siete líneas de subtítulos se derivan en vivo de la transcripción, y una fila de idiomas que muestra la transcripción original y Français como botones, un botón Translate y la opción de eliminar una traducción.",
-    "description": "Describes a drawing of the app for screen readers. The drawing is in English: keep the quoted words as drawn."
-  },
   "showcase.agent.kicker": {
     "message": "agente"
   },
@@ -346,10 +342,6 @@
     "message": "Cómo funcionan los zooms automáticos",
     "description": "Link label under the panel."
   },
-  "showcase.agent.label": {
-    "message": "Dibujo de la respuesta del agente. Cuando se le pide que corte los tiempos muertos, responde con códigos de tiempo: de 0 a 2.19 segundos de entrada antes de “Hi” y de 35.12 a 40.03 segundos de cola después de “think.”, lo que deja el video en 33 segundos reproducibles en lugar de 40, con los zooms existentes en los mismos momentos; luego, una línea verde que dice “applied: added 2 trims”.",
-    "description": "Describes a drawing of the app for screen readers. The drawing is in English: keep the quoted words as drawn."
-  },
   "showcase.title": {
     "message": "Grabador, subtítulos, agente, codificador."
   },
@@ -794,7 +786,7 @@
     "description": "Describes a short silent video loop of the app for screen readers."
   },
   "demoLoop.caption-styles": {
-    "message": "Un mismo subtítulo en cinco estilos: uno sencillo, uno amarillo en negrita, uno manuscrito, uno monoespaciado y uno resaltado palabra por palabra.",
+    "message": "Un mismo subtítulo en cinco estilos: uno sencillo, uno amarillo en negrita, uno manuscrito, uno monoespaciado y uno que muestra una sola palabra cada vez.",
     "description": "Describes a short silent video loop of the app for screen readers."
   },
   "demoLoop.edit-by-transcript": {
@@ -848,5 +840,153 @@
   "demoLoop.ask-the-agent": {
     "message": "Una petición escrita en el panel de chat del editor, y los cambios del agente apareciendo en la línea de tiempo.",
     "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "films.default.kicker": {
+    "message": "Listo de serie"
+  },
+  "films.default.title": {
+    "message": "Bien desde la primera toma."
+  },
+  "films.default.lead": {
+    "message": "Cada grabación nueva se abre {zoomed}, sobre un fondo de pantalla, con margen, sombra y esquinas redondeadas. Cambia lo que quieras o expórtala tal cual."
+  },
+  "films.default.lead.zoomed": {
+    "message": "ya con zoom en tus clics"
+  },
+  "films.default.note.zooms": {
+    "message": "{t} Cada toma recibe zoom donde hiciste clic, según una regla fija: sin IA ni llamadas de red. Se desactiva en el modo Grabar."
+  },
+  "films.default.note.zooms.t": {
+    "message": "Zooms a partir de tus clics."
+  },
+  "films.default.note.frame": {
+    "message": "{t} Fondo de pantalla, margen, sombra, esquinas redondeadas y un poco de desenfoque de movimiento están activos antes de que toques nada."
+  },
+  "films.default.note.frame.t": {
+    "message": "Un encuadre terminado."
+  },
+  "films.default.note.cursor": {
+    "message": "{t} El puntero se graba aparte de los píxeles, así que su tamaño y su estilo pueden cambiar después de la toma."
+  },
+  "films.default.note.cursor.t": {
+    "message": "Un cursor que se puede rehacer."
+  },
+  "films.depth.kicker": {
+    "message": "3D"
+  },
+  "films.depth.title": {
+    "message": "Profundidad, no solo zoom."
+  },
+  "films.depth.lead": {
+    "message": "Inclina la pantalla o {orbit} mientras haces zoom, dibuja el puntero como {cursor} con sombra y coloca toda la toma {device}, sobre un fondo que se mueve."
+  },
+  "films.depth.lead.orbit": {
+    "message": "gira a su alrededor"
+  },
+  "films.depth.lead.cursor": {
+    "message": "un cursor 3D"
+  },
+  "films.depth.lead.device": {
+    "message": "dentro de un dispositivo"
+  },
+  "films.depth.tab.camera": {
+    "message": "Cámara 3D"
+  },
+  "films.depth.tab.cursors": {
+    "message": "Cursores"
+  },
+  "films.depth.tab.frames": {
+    "message": "Marcos de dispositivo"
+  },
+  "films.depth.tab.backgrounds": {
+    "message": "Fondos animados"
+  },
+  "films.depth.note.camera": {
+    "message": "{t} Cada zoom puede quedarse plano, girar la pantalla a la izquierda o a la derecha, u orbitar a su alrededor siguiendo el foco del zoom. La profundidad de campo suaviza el lado lejano."
+  },
+  "films.depth.note.camera.t": {
+    "message": "Cámara 3D."
+  },
+  "films.depth.note.cursors": {
+    "message": "{t} Studio Ink, Prism Glow, Pop Coral, Pixel Candy y Star Sprout, y cada uno puede dibujarse como un objeto 3D con sombra."
+  },
+  "films.depth.note.cursors.t": {
+    "message": "Cinco paquetes de cursores."
+  },
+  "films.depth.note.frames": {
+    "message": "{t} Una ventana, un portátil, un teléfono o una pantalla, claro u oscuro, sobre un fondo animado con Deriva, Aurora u Ondas."
+  },
+  "films.depth.note.frames.t": {
+    "message": "Marcos y movimiento."
+  },
+  "films.camera.kicker": {
+    "message": "Cámara"
+  },
+  "films.camera.title": {
+    "message": "Tu cámara, tu pantalla, o ambas."
+  },
+  "films.camera.lead": {
+    "message": "Una toma con webcam puede ser {layouts}, y el fondo de la cámara puede {removed}, sin pantalla verde."
+  },
+  "films.camera.lead.layouts": {
+    "message": "imagen en imagen, lado a lado, apilada o a pantalla completa"
+  },
+  "films.camera.lead.removed": {
+    "message": "eliminarse en tu ordenador"
+  },
+  "films.camera.tab.layouts": {
+    "message": "Diseños"
+  },
+  "films.camera.tab.cutout": {
+    "message": "Recortado"
+  },
+  "films.camera.note.layouts": {
+    "message": "{t} Imagen en imagen, marco dual, apilado vertical o sin webcam."
+  },
+  "films.camera.note.layouts.t": {
+    "message": "Cuatro diseños."
+  },
+  "films.camera.note.full": {
+    "message": "{t} Dale un tramo de la línea de tiempo a la cámara: pasa a pantalla completa y luego vuelve con suavidad."
+  },
+  "films.camera.note.full.t": {
+    "message": "Cámara a pantalla completa."
+  },
+  "films.camera.note.background": {
+    "message": "{t} Un modelo de segmentación te separa de la habitación en tu propio ordenador. No se sube nada."
+  },
+  "films.camera.note.background.t": {
+    "message": "Recortar, desenfocar o reemplazar."
+  },
+  "films.ship.kicker": {
+    "message": "Antes de publicar"
+  },
+  "films.ship.title": {
+    "message": "Todos los formatos. Nada privado."
+  },
+  "films.ship.lead": {
+    "message": "Una toma se convierte en {formats}, y lo que no debe verse queda {blur}."
+  },
+  "films.ship.lead.formats": {
+    "message": "horizontal, cuadrada o vertical"
+  },
+  "films.ship.lead.blur": {
+    "message": "bajo un desenfoque"
+  },
+  "films.ship.formats": {
+    "message": "{t} La misma toma, encuadrada en 16:9, 9:16, 1:1, 4:3, 4:5, 16:10 o 10:16."
+  },
+  "films.ship.formats.t": {
+    "message": "Cualquier relación de aspecto."
+  },
+  "films.ship.blur": {
+    "message": "{t} Gaussiano o mosaico, en rectángulo, óvalo o a mano alzada, sobre un correo, una clave o una contraseña."
+  },
+  "films.ship.blur.t": {
+    "message": "Zonas de desenfoque."
+  },
+  "films.label": {
+    "message": "Más de la app, en movimiento",
+    "description": "Read by screen readers only: names the section of feature videos"
   }
 }
diff --git a/website/i18n/fr/code.json b/website/i18n/fr/code.json
index 52488e36c..a25625b60 100644
--- a/website/i18n/fr/code.json
+++ b/website/i18n/fr/code.json
@@ -323,10 +323,6 @@
     "message": "Comparatif des sous-titres locaux",
     "description": "Link label under the panel."
   },
-  "showcase.captions.label": {
-    "message": "Dessin du panneau des sous-titres : la ligne « amber day on the validator, and it » en grand sur la vidéo, et à côté les sous-titres activés, une note indiquant que sept lignes de sous-titres sont dérivées en direct de la transcription, et une ligne de langues qui affiche la transcription d'origine et Français sous forme de boutons, un bouton Translate et l'option de supprimer une traduction.",
-    "description": "Describes a drawing of the app for screen readers. The drawing is in English: keep the quoted words as drawn."
-  },
   "showcase.agent.kicker": {
     "message": "agent"
   },
@@ -346,10 +342,6 @@
     "message": "Fonctionnement des zooms automatiques",
     "description": "Link label under the panel."
   },
-  "showcase.agent.label": {
-    "message": "Dessin de la réponse de l'agent. Prié de couper les temps morts, il répond avec des timecodes : de 0 à 2,19 secondes d'amorce avant « Hi » et de 35,12 à 40,03 secondes de fin après « think. », ce qui fait passer la vidéo de 40 à 33 secondes de contenu lisible, les zooms existants restant sur les mêmes moments ; puis une ligne verte qui indique « applied: added 2 trims ».",
-    "description": "Describes a drawing of the app for screen readers. The drawing is in English: keep the quoted words as drawn."
-  },
   "showcase.title": {
     "message": "Enregistreur, sous-titres, agent, encodeur."
   },
@@ -794,7 +786,7 @@
     "description": "Describes a short silent video loop of the app for screen readers."
   },
   "demoLoop.caption-styles": {
-    "message": "Un même sous-titre dans cinq styles : un sous-titre simple, un jaune en gras, un manuscrit, un à chasse fixe, et un surligné mot à mot.",
+    "message": "Un même sous-titre dans cinq styles : un sous-titre simple, un jaune en gras, un manuscrit, un à chasse fixe, et un qui affiche un seul mot à la fois.",
     "description": "Describes a short silent video loop of the app for screen readers."
   },
   "demoLoop.edit-by-transcript": {
@@ -848,5 +840,153 @@
   "demoLoop.ask-the-agent": {
     "message": "Une demande saisie dans le panneau de chat de l'éditeur, et les modifications de l'agent qui apparaissent sur la timeline.",
     "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "films.default.kicker": {
+    "message": "Dès la sortie de la boîte"
+  },
+  "films.default.title": {
+    "message": "Réussi dès la première prise."
+  },
+  "films.default.lead": {
+    "message": "Chaque nouvel enregistrement s'ouvre {zoomed}, sur un fond d'écran, avec une marge, une ombre et des coins arrondis. Changez ce que vous voulez, ou exportez tel quel."
+  },
+  "films.default.lead.zoomed": {
+    "message": "déjà zoomé sur vos clics"
+  },
+  "films.default.note.zooms": {
+    "message": "{t} Chaque prise est zoomée là où vous avez cliqué, selon une règle fixe : sans IA, sans appel réseau. Désactivable dans le mode Enregistrement."
+  },
+  "films.default.note.zooms.t": {
+    "message": "Des zooms tirés de vos clics."
+  },
+  "films.default.note.frame": {
+    "message": "{t} Fond d'écran, marge, ombre, coins arrondis et un léger flou de mouvement sont en place avant que vous ne touchiez à rien."
+  },
+  "films.default.note.frame.t": {
+    "message": "Un cadre fini."
+  },
+  "films.default.note.cursor": {
+    "message": "{t} Le pointeur est enregistré à part des pixels : sa taille et son style peuvent changer après la prise."
+  },
+  "films.default.note.cursor.t": {
+    "message": "Un curseur qu'on peut refaire."
+  },
+  "films.depth.kicker": {
+    "message": "3D"
+  },
+  "films.depth.title": {
+    "message": "De la profondeur, pas seulement du zoom."
+  },
+  "films.depth.lead": {
+    "message": "Inclinez l'écran ou {orbit} pendant le zoom, dessinez le pointeur comme {cursor} avec une ombre, et placez toute la prise {device}, sur un fond qui bouge."
+  },
+  "films.depth.lead.orbit": {
+    "message": "tournez autour"
+  },
+  "films.depth.lead.cursor": {
+    "message": "un curseur 3D"
+  },
+  "films.depth.lead.device": {
+    "message": "dans un appareil"
+  },
+  "films.depth.tab.camera": {
+    "message": "Caméra 3D"
+  },
+  "films.depth.tab.cursors": {
+    "message": "Curseurs"
+  },
+  "films.depth.tab.frames": {
+    "message": "Cadres d'appareil"
+  },
+  "films.depth.tab.backgrounds": {
+    "message": "Fonds animés"
+  },
+  "films.depth.note.camera": {
+    "message": "{t} Chaque zoom peut rester à plat, tourner l'écran vers la gauche ou la droite, ou tourner autour en suivant le point de focus du zoom. La profondeur de champ adoucit le côté éloigné."
+  },
+  "films.depth.note.camera.t": {
+    "message": "Caméra 3D."
+  },
+  "films.depth.note.cursors": {
+    "message": "{t} Studio Ink, Prism Glow, Pop Coral, Pixel Candy et Star Sprout, chacun pouvant être dessiné comme un objet 3D avec une ombre."
+  },
+  "films.depth.note.cursors.t": {
+    "message": "Cinq jeux de curseurs."
+  },
+  "films.depth.note.frames": {
+    "message": "{t} Une fenêtre, un portable, un téléphone ou un écran, clair ou sombre, sur un fond animé en Dérive, Aurore ou Vagues."
+  },
+  "films.depth.note.frames.t": {
+    "message": "Cadres et mouvement."
+  },
+  "films.camera.kicker": {
+    "message": "Caméra"
+  },
+  "films.camera.title": {
+    "message": "Votre caméra, votre écran, ou les deux."
+  },
+  "films.camera.lead": {
+    "message": "Une prise avec webcam peut passer {layouts}, et l'arrière-plan de la caméra peut être {removed}, sans fond vert."
+  },
+  "films.camera.lead.layouts": {
+    "message": "en incrustation, côte à côte, empilée ou en plein écran"
+  },
+  "films.camera.lead.removed": {
+    "message": "retiré sur votre ordinateur"
+  },
+  "films.camera.tab.layouts": {
+    "message": "Dispositions"
+  },
+  "films.camera.tab.cutout": {
+    "message": "Détouré"
+  },
+  "films.camera.note.layouts": {
+    "message": "{t} Incrustation d'image, double cadre, empilement vertical, ou pas de webcam du tout."
+  },
+  "films.camera.note.layouts.t": {
+    "message": "Quatre dispositions."
+  },
+  "films.camera.note.full": {
+    "message": "{t} Confiez un passage de la timeline à la caméra : elle passe en plein écran, puis revient en douceur."
+  },
+  "films.camera.note.full.t": {
+    "message": "Caméra plein écran."
+  },
+  "films.camera.note.background": {
+    "message": "{t} Un modèle de segmentation vous sépare de la pièce, sur votre propre ordinateur. Rien n'est envoyé."
+  },
+  "films.camera.note.background.t": {
+    "message": "Détourer, flouter ou remplacer."
+  },
+  "films.ship.kicker": {
+    "message": "Avant l'envoi"
+  },
+  "films.ship.title": {
+    "message": "Tous les formats. Rien de privé."
+  },
+  "films.ship.lead": {
+    "message": "Une prise devient {formats}, et ce qui ne doit pas être vu reste {blur}."
+  },
+  "films.ship.lead.formats": {
+    "message": "horizontale, carrée ou verticale"
+  },
+  "films.ship.lead.blur": {
+    "message": "sous un flou"
+  },
+  "films.ship.formats": {
+    "message": "{t} La même prise, cadrée en 16:9, 9:16, 1:1, 4:3, 4:5, 16:10 ou 10:16."
+  },
+  "films.ship.formats.t": {
+    "message": "Tous les formats d'image."
+  },
+  "films.ship.blur": {
+    "message": "{t} Gaussien ou mosaïque, en rectangle, en ovale ou à main levée, sur un e-mail, une clé ou un mot de passe."
+  },
+  "films.ship.blur.t": {
+    "message": "Zones de flou."
+  },
+  "films.label": {
+    "message": "L'app en mouvement, en plus",
+    "description": "Read by screen readers only: names the section of feature videos"
   }
 }
diff --git a/website/i18n/ja/code.json b/website/i18n/ja/code.json
index 9f07e4d3c..7770a2cba 100644
--- a/website/i18n/ja/code.json
+++ b/website/i18n/ja/code.json
@@ -278,10 +278,6 @@
     "message": "ローカル字幕の比較",
     "description": "Link label under the panel."
   },
-  "showcase.captions.label": {
-    "message": "字幕パネルのイラスト：動画の上に「amber day on the validator, and it」という一行が大きく表示されています。その横では字幕がオンになっていて、7 行の字幕が文字起こしからリアルタイムに生成されているという注記と、元の文字起こしと Français のボタン、Translate ボタン、翻訳を削除するオプションが並ぶ言語の行があります。",
-    "description": "Describes a drawing of the app for screen readers. The drawing is in English: keep the quoted words as drawn."
-  },
   "showcase.agent.kicker": {
     "message": "エージェント"
   },
@@ -301,10 +297,6 @@
     "message": "自動ズームの仕組み",
     "description": "Link label under the panel."
   },
-  "showcase.agent.label": {
-    "message": "エージェントの返答のイラスト。無音部分のカットを頼まれ、タイムコードで答えています。「Hi」の前の導入部 0〜2.19 秒と、「think.」の後の末尾 35.12〜40.03 秒をカットし、再生できる映像を 40 秒から 33 秒にします。既存のズームは同じ場面に残ります。最後に「applied: added 2 trims」という緑色の行があります。",
-    "description": "Describes a drawing of the app for screen readers. The drawing is in English: keep the quoted words as drawn."
-  },
   "showcase.title": {
     "message": "レコーダー、字幕、エージェント、エンコーダー。"
   },
@@ -794,7 +786,7 @@
     "description": "Describes a short silent video loop of the app for screen readers."
   },
   "demoLoop.caption-styles": {
-    "message": "同じ字幕を 5 つのスタイルで表示します。シンプルな字幕、太字の黄色、手書き風、等幅、そして単語ごとのハイライトです。",
+    "message": "同じ字幕を 5 つのスタイルで表示します。シンプルな字幕、太字の黄色、手書き風、等幅、そして 1 語ずつ表示するスタイルです。",
     "description": "Describes a short silent video loop of the app for screen readers."
   },
   "demoLoop.edit-by-transcript": {
@@ -848,5 +840,153 @@
   "demoLoop.ask-the-agent": {
     "message": "エディターのチャットパネルに入力した依頼と、エージェントによる編集がタイムラインに現れる様子。",
     "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "films.default.kicker": {
+    "message": "最初から"
+  },
+  "films.default.title": {
+    "message": "最初のテイクから見栄えよく。"
+  },
+  "films.default.lead": {
+    "message": "新しい録画はどれも{zoomed}状態で開き、壁紙、余白、影、角丸もついています。好きなところを変えても、そのまま書き出しても構いません。"
+  },
+  "films.default.lead.zoomed": {
+    "message": "クリックした箇所にすでにズームした"
+  },
+  "films.default.note.zooms": {
+    "message": "{t} 各テイクはクリックした位置で、決まったルールに従ってズームされます。AI もネットワーク通信も使いません。録画モードでオフにできます。"
+  },
+  "films.default.note.zooms.t": {
+    "message": "クリックからズーム。"
+  },
+  "films.default.note.frame": {
+    "message": "{t} 壁紙、余白、影、角丸、少しのモーションブラーが、何も触らないうちから適用されています。"
+  },
+  "films.default.note.frame.t": {
+    "message": "仕上がったフレーム。"
+  },
+  "films.default.note.cursor": {
+    "message": "{t} ポインターはピクセルとは別に記録されるので、テイクの後でもサイズとスタイルを変えられます。"
+  },
+  "films.default.note.cursor.t": {
+    "message": "やり直せるカーソル。"
+  },
+  "films.depth.kicker": {
+    "message": "3D"
+  },
+  "films.depth.title": {
+    "message": "ズームだけでなく、奥行きを。"
+  },
+  "films.depth.lead": {
+    "message": "ズームしながら画面を傾けたり{orbit}、ポインターを影つきの{cursor}として描いたり、テイク全体を{device}、動く背景の上に置いたりできます。"
+  },
+  "films.depth.lead.orbit": {
+    "message": "周りを回ったり"
+  },
+  "films.depth.lead.cursor": {
+    "message": "3D カーソル"
+  },
+  "films.depth.lead.device": {
+    "message": "デバイスの中に収めて"
+  },
+  "films.depth.tab.camera": {
+    "message": "3D カメラ"
+  },
+  "films.depth.tab.cursors": {
+    "message": "カーソル"
+  },
+  "films.depth.tab.frames": {
+    "message": "デバイスフレーム"
+  },
+  "films.depth.tab.backgrounds": {
+    "message": "アニメーション背景"
+  },
+  "films.depth.note.camera": {
+    "message": "{t} 各ズームは平面のまま、画面を左右に回転、またはズームの焦点を追いながら周りを回ることができます。被写界深度が奥側をぼかします。"
+  },
+  "films.depth.note.camera.t": {
+    "message": "3D カメラ。"
+  },
+  "films.depth.note.cursors": {
+    "message": "{t} Studio Ink, Prism Glow, Pop Coral, Pixel Candy、Star Sprout の 5 種類。どれも影つきの 3D オブジェクトとして描けます。"
+  },
+  "films.depth.note.cursors.t": {
+    "message": "5 つのカーソルパック。"
+  },
+  "films.depth.note.frames": {
+    "message": "{t} ウィンドウ、ノート PC、スマートフォン、ディスプレイをライトかダークで。背景はドリフト、オーロラ、ウェーブでアニメーションできます。"
+  },
+  "films.depth.note.frames.t": {
+    "message": "フレームと動き。"
+  },
+  "films.camera.kicker": {
+    "message": "カメラ"
+  },
+  "films.camera.title": {
+    "message": "カメラも、画面も、その両方も。"
+  },
+  "films.camera.lead": {
+    "message": "ウェブカメラ付きのテイクは{layouts}にでき、カメラの背景は{removed}できます。グリーンバックは不要です。"
+  },
+  "films.camera.lead.layouts": {
+    "message": "ピクチャーインピクチャ、横並び、縦並び、全画面"
+  },
+  "films.camera.lead.removed": {
+    "message": "お使いのコンピューター上で削除"
+  },
+  "films.camera.tab.layouts": {
+    "message": "レイアウト"
+  },
+  "films.camera.tab.cutout": {
+    "message": "切り抜き"
+  },
+  "films.camera.note.layouts": {
+    "message": "{t} ピクチャーインピクチャ、デュアルフレーム、縦並び、またはウェブカメラなし。"
+  },
+  "films.camera.note.layouts.t": {
+    "message": "4 つのレイアウト。"
+  },
+  "films.camera.note.full": {
+    "message": "{t} タイムラインの一区間をカメラに任せると、全画面に広がってから滑らかに戻ります。"
+  },
+  "films.camera.note.full.t": {
+    "message": "フルスクリーンカメラ。"
+  },
+  "films.camera.note.background": {
+    "message": "{t} セグメンテーションモデルが、お使いのコンピューター上であなたと部屋を切り分けます。何もアップロードされません。"
+  },
+  "films.camera.note.background.t": {
+    "message": "切り抜き、ぼかし、差し替え。"
+  },
+  "films.ship.kicker": {
+    "message": "公開の前に"
+  },
+  "films.ship.title": {
+    "message": "どんな形式でも。プライベートは見せない。"
+  },
+  "films.ship.lead": {
+    "message": "1 つのテイクが{formats}になり、見せたくないものは{blur}。"
+  },
+  "films.ship.lead.formats": {
+    "message": "横長、正方形、縦長"
+  },
+  "films.ship.lead.blur": {
+    "message": "ぼかしの下に隠れたまま"
+  },
+  "films.ship.formats": {
+    "message": "{t} 同じテイクを 16:9、9:16、1:1、4:3、4:5、16:10、10:16 で構成します。"
+  },
+  "films.ship.formats.t": {
+    "message": "あらゆるアスペクト比。"
+  },
+  "films.ship.blur": {
+    "message": "{t} ガウスまたはモザイクで、長方形、楕円、フリーハンドの形に。メールアドレス、キー、パスワードの上に。"
+  },
+  "films.ship.blur.t": {
+    "message": "ぼかし領域。"
+  },
+  "films.label": {
+    "message": "動くアプリをもっと",
+    "description": "Read by screen readers only: names the section of feature videos"
   }
 }
diff --git a/website/i18n/pt-BR/code.json b/website/i18n/pt-BR/code.json
index 69eb5dcf3..cb3c1c02a 100644
--- a/website/i18n/pt-BR/code.json
+++ b/website/i18n/pt-BR/code.json
@@ -278,10 +278,6 @@
     "message": "Como as legendas locais se comparam",
     "description": "Link label under the panel."
   },
-  "showcase.captions.label": {
-    "message": "Um desenho do painel de legendas: a frase “amber day on the validator, and it” em letras grandes sobre o vídeo e, ao lado, as legendas ativadas, uma nota de que sete linhas de legenda são derivadas ao vivo a partir da transcrição e uma linha de idiomas que mostra a transcrição original e Français como botões, um botão Translate e a opção de excluir uma tradução.",
-    "description": "Describes a drawing of the app for screen readers. The drawing is in English: keep the quoted words as drawn."
-  },
   "showcase.agent.kicker": {
     "message": "agente"
   },
@@ -301,10 +297,6 @@
     "message": "Como funcionam os zooms automáticos",
     "description": "Link label under the panel."
   },
-  "showcase.agent.label": {
-    "message": "Um desenho da resposta do agente. Ao receber o pedido de cortar o tempo morto, ele responde com timecodes: de 0 a 2,19 segundos de abertura antes de “Hi” e de 35,12 a 40,03 segundos de final depois de “think.”, levando o vídeo de 40 para 33 segundos reproduzíveis, com os zooms existentes mantidos nos mesmos momentos — e depois uma linha verde com “applied: added 2 trims”.",
-    "description": "Describes a drawing of the app for screen readers. The drawing is in English: keep the quoted words as drawn."
-  },
   "showcase.title": {
     "message": "Gravador, legendas, agente, codificador."
   },
@@ -794,7 +786,7 @@
     "description": "Describes a short silent video loop of the app for screen readers."
   },
   "demoLoop.caption-styles": {
-    "message": "Uma mesma legenda em cinco estilos: uma simples, uma amarela em negrito, uma manuscrita, uma monoespaçada e uma destacada palavra por palavra.",
+    "message": "Uma mesma legenda em cinco estilos: uma simples, uma amarela em negrito, uma manuscrita, uma monoespaçada e uma que mostra uma palavra de cada vez.",
     "description": "Describes a short silent video loop of the app for screen readers."
   },
   "demoLoop.edit-by-transcript": {
@@ -848,5 +840,153 @@
   "demoLoop.ask-the-agent": {
     "message": "Um pedido digitado no painel de chat do editor, e as edições do agente aparecendo na linha do tempo.",
     "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "films.default.kicker": {
+    "message": "Pronto de fábrica"
+  },
+  "films.default.title": {
+    "message": "Bonito desde a primeira tomada."
+  },
+  "films.default.lead": {
+    "message": "Cada nova gravação abre {zoomed}, sobre um papel de parede, com margem, sombra e cantos arredondados. Mude o que quiser ou exporte como está."
+  },
+  "films.default.lead.zoomed": {
+    "message": "já com zoom nos seus cliques"
+  },
+  "films.default.note.zooms": {
+    "message": "{t} Cada tomada recebe zoom onde você clicou, por uma regra fixa: sem IA e sem chamada de rede. Desative no modo Gravar."
+  },
+  "films.default.note.zooms.t": {
+    "message": "Zooms a partir dos seus cliques."
+  },
+  "films.default.note.frame": {
+    "message": "{t} Papel de parede, margem, sombra, cantos arredondados e um pouco de desfoque de movimento já estão ativos antes de você mexer em algo."
+  },
+  "films.default.note.frame.t": {
+    "message": "Um enquadramento pronto."
+  },
+  "films.default.note.cursor": {
+    "message": "{t} O ponteiro é gravado separado dos pixels, então o tamanho e o estilo dele podem mudar depois da tomada."
+  },
+  "films.default.note.cursor.t": {
+    "message": "Um cursor que dá para refazer."
+  },
+  "films.depth.kicker": {
+    "message": "3D"
+  },
+  "films.depth.title": {
+    "message": "Profundidade, não só zoom."
+  },
+  "films.depth.lead": {
+    "message": "Incline a tela ou {orbit} durante o zoom, desenhe o ponteiro como {cursor} com sombra e coloque a tomada inteira {device}, sobre um fundo que se move."
+  },
+  "films.depth.lead.orbit": {
+    "message": "gire ao redor dela"
+  },
+  "films.depth.lead.cursor": {
+    "message": "um cursor 3D"
+  },
+  "films.depth.lead.device": {
+    "message": "dentro de um dispositivo"
+  },
+  "films.depth.tab.camera": {
+    "message": "Câmera 3D"
+  },
+  "films.depth.tab.cursors": {
+    "message": "Cursores"
+  },
+  "films.depth.tab.frames": {
+    "message": "Molduras de dispositivo"
+  },
+  "films.depth.tab.backgrounds": {
+    "message": "Fundos animados"
+  },
+  "films.depth.note.camera": {
+    "message": "{t} Cada zoom pode ficar plano, girar a tela para a esquerda ou para a direita, ou orbitar ao redor dela seguindo o foco do zoom. A profundidade de campo suaviza o lado mais distante."
+  },
+  "films.depth.note.camera.t": {
+    "message": "Câmera 3D."
+  },
+  "films.depth.note.cursors": {
+    "message": "{t} Studio Ink, Prism Glow, Pop Coral, Pixel Candy e Star Sprout, e cada um pode ser desenhado como um objeto 3D com sombra."
+  },
+  "films.depth.note.cursors.t": {
+    "message": "Cinco pacotes de cursores."
+  },
+  "films.depth.note.frames": {
+    "message": "{t} Uma janela, um notebook, um celular ou uma tela, clara ou escura, sobre um fundo animado com Deriva, Aurora ou Ondas."
+  },
+  "films.depth.note.frames.t": {
+    "message": "Molduras e movimento."
+  },
+  "films.camera.kicker": {
+    "message": "Câmera"
+  },
+  "films.camera.title": {
+    "message": "Sua câmera, sua tela, ou as duas."
+  },
+  "films.camera.lead": {
+    "message": "Uma tomada com webcam pode ficar {layouts}, e o fundo da câmera pode ser {removed}, sem tela verde."
+  },
+  "films.camera.lead.layouts": {
+    "message": "em picture in picture, lado a lado, empilhada ou em tela cheia"
+  },
+  "films.camera.lead.removed": {
+    "message": "removido no seu computador"
+  },
+  "films.camera.tab.layouts": {
+    "message": "Layouts"
+  },
+  "films.camera.tab.cutout": {
+    "message": "Recorte"
+  },
+  "films.camera.note.layouts": {
+    "message": "{t} Picture in Picture, quadro duplo, empilhamento vertical ou nenhuma webcam."
+  },
+  "films.camera.note.layouts.t": {
+    "message": "Quatro layouts."
+  },
+  "films.camera.note.full": {
+    "message": "{t} Dê um trecho da linha do tempo para a câmera: ela vai para tela cheia e depois volta suavemente."
+  },
+  "films.camera.note.full.t": {
+    "message": "Câmera em tela cheia."
+  },
+  "films.camera.note.background": {
+    "message": "{t} Um modelo de segmentação separa você do ambiente no seu próprio computador. Nada é enviado."
+  },
+  "films.camera.note.background.t": {
+    "message": "Recortar, desfocar ou substituir."
+  },
+  "films.ship.kicker": {
+    "message": "Antes de publicar"
+  },
+  "films.ship.title": {
+    "message": "Todos os formatos. Nada privado."
+  },
+  "films.ship.lead": {
+    "message": "Uma tomada vira {formats}, e o que não deve aparecer fica {blur}."
+  },
+  "films.ship.lead.formats": {
+    "message": "horizontal, quadrada ou vertical"
+  },
+  "films.ship.lead.blur": {
+    "message": "sob um desfoque"
+  },
+  "films.ship.formats": {
+    "message": "{t} A mesma tomada, enquadrada em 16:9, 9:16, 1:1, 4:3, 4:5, 16:10 ou 10:16."
+  },
+  "films.ship.formats.t": {
+    "message": "Qualquer proporção."
+  },
+  "films.ship.blur": {
+    "message": "{t} Gaussiano ou mosaico, em retângulo, oval ou à mão livre, sobre um e-mail, uma chave ou uma senha."
+  },
+  "films.ship.blur.t": {
+    "message": "Regiões de desfoque."
+  },
+  "films.label": {
+    "message": "Mais do app, em movimento",
+    "description": "Read by screen readers only: names the section of feature videos"
   }
 }
diff --git a/website/i18n/zh-CN/code.json b/website/i18n/zh-CN/code.json
index f9d41e61c..d52a34e5f 100644
--- a/website/i18n/zh-CN/code.json
+++ b/website/i18n/zh-CN/code.json
@@ -336,10 +336,6 @@
     "message": "本地字幕方案对比",
     "description": "Link label under the panel."
   },
-  "showcase.captions.label": {
-    "message": "字幕面板的示意图：“amber day on the validator, and it”这行字幕以大字号显示在视频上；旁边，字幕已开启，一条说明写着七行字幕由转录文本实时生成，还有一行语言选项，以按钮形式显示原始转录文本和 Français，还有 Translate 按钮以及删除翻译的选项。",
-    "description": "Describes a drawing of the app for screen readers. The drawing is in English: keep the quoted words as drawn."
-  },
   "showcase.agent.kicker": {
     "message": "AI 代理"
   },
@@ -359,10 +355,6 @@
     "message": "自动缩放的工作原理",
     "description": "Link label under the panel."
   },
-  "showcase.agent.label": {
-    "message": "AI 代理回复的示意图。被要求剪掉无声的空白时，它用时间码作答：“Hi”之前 0 到 2.19 秒的开场，以及“think.”之后 35.12 到 40.03 秒的结尾，把视频的可播放时长从 40 秒缩短到 33 秒，已有的缩放仍留在原来的时刻；最后是一行绿色文字：“applied: added 2 trims”。",
-    "description": "Describes a drawing of the app for screen readers. The drawing is in English: keep the quoted words as drawn."
-  },
   "showcase.title": {
     "message": "录制器、字幕、AI 代理、编码器。"
   },
@@ -794,7 +786,7 @@
     "description": "Describes a short silent video loop of the app for screen readers."
   },
   "demoLoop.caption-styles": {
-    "message": "同一条字幕的五种样式：普通字幕、黄色粗体、手写体、等宽字体，以及逐词高亮。",
+    "message": "同一条字幕的五种样式：普通字幕、黄色粗体、手写体、等宽字体，以及一次只显示一个词的样式。",
     "description": "Describes a short silent video loop of the app for screen readers."
   },
   "demoLoop.edit-by-transcript": {
@@ -848,5 +840,153 @@
   "demoLoop.ask-the-agent": {
     "message": "在编辑器聊天面板中输入的请求，以及代理所做的编辑出现在时间线上。",
     "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "films.default.kicker": {
+    "message": "开箱即用"
+  },
+  "films.default.title": {
+    "message": "第一条素材就好看。"
+  },
+  "films.default.lead": {
+    "message": "每段新录制打开时都{zoomed}，带壁纸、边距、阴影和圆角。想改哪里都行，也可以直接导出。"
+  },
+  "films.default.lead.zoomed": {
+    "message": "已经在你的点击处放大"
+  },
+  "films.default.note.zooms": {
+    "message": "{t} 每段素材都按固定规则在你点击的位置放大：不用 AI，也不联网。可在录制模式中关闭。"
+  },
+  "films.default.note.zooms.t": {
+    "message": "按点击放大。"
+  },
+  "films.default.note.frame": {
+    "message": "{t} 壁纸、边距、阴影、圆角和一点动态模糊，在你动手之前就已经就位。"
+  },
+  "films.default.note.frame.t": {
+    "message": "现成的画面。"
+  },
+  "films.default.note.cursor": {
+    "message": "{t} 指针与像素分开记录，所以录完后仍可更改它的大小和样式。"
+  },
+  "films.default.note.cursor.t": {
+    "message": "可以重做的光标。"
+  },
+  "films.depth.kicker": {
+    "message": "3D"
+  },
+  "films.depth.title": {
+    "message": "不只是缩放，还有纵深。"
+  },
+  "films.depth.lead": {
+    "message": "放大时可以倾斜屏幕或{orbit}，把指针画成带阴影的{cursor}，再把整段素材{device}，放在会动的背景上。"
+  },
+  "films.depth.lead.orbit": {
+    "message": "绕着它旋转"
+  },
+  "films.depth.lead.cursor": {
+    "message": "3D 光标"
+  },
+  "films.depth.lead.device": {
+    "message": "放进设备里"
+  },
+  "films.depth.tab.camera": {
+    "message": "3D 摄像机"
+  },
+  "films.depth.tab.cursors": {
+    "message": "光标"
+  },
+  "films.depth.tab.frames": {
+    "message": "设备边框"
+  },
+  "films.depth.tab.backgrounds": {
+    "message": "动态背景"
+  },
+  "films.depth.note.camera": {
+    "message": "{t} 每次缩放都可以保持平面、把屏幕向左或向右转，或跟随缩放焦点环绕屏幕。景深会柔化远侧。"
+  },
+  "films.depth.note.camera.t": {
+    "message": "3D 摄像机。"
+  },
+  "films.depth.note.cursors": {
+    "message": "{t} Studio Ink, Prism Glow, Pop Coral, Pixel Candy 和 Star Sprout，每一套都能画成带阴影的 3D 对象。"
+  },
+  "films.depth.note.cursors.t": {
+    "message": "五套光标。"
+  },
+  "films.depth.note.frames": {
+    "message": "{t} 窗口、笔记本电脑、手机或屏幕，浅色或深色，背景可用漂移、极光或波浪动画。"
+  },
+  "films.depth.note.frames.t": {
+    "message": "边框与动态。"
+  },
+  "films.camera.kicker": {
+    "message": "摄像头"
+  },
+  "films.camera.title": {
+    "message": "你的摄像头、你的屏幕，或两者兼有。"
+  },
+  "films.camera.lead": {
+    "message": "带摄像头的素材可以{layouts}，摄像头背景也可以{removed}，无需绿幕。"
+  },
+  "films.camera.lead.layouts": {
+    "message": "画中画、左右并排、上下堆叠或全屏"
+  },
+  "films.camera.lead.removed": {
+    "message": "在你的电脑上移除"
+  },
+  "films.camera.tab.layouts": {
+    "message": "布局"
+  },
+  "films.camera.tab.cutout": {
+    "message": "抠图"
+  },
+  "films.camera.note.layouts": {
+    "message": "{t} 画中画、双画框、垂直堆叠，或完全不用摄像头。"
+  },
+  "films.camera.note.layouts.t": {
+    "message": "四种布局。"
+  },
+  "films.camera.note.full": {
+    "message": "{t} 把时间线上的一段交给摄像头：它会放大到全屏，然后平滑地缩回。"
+  },
+  "films.camera.note.full.t": {
+    "message": "全屏摄像头。"
+  },
+  "films.camera.note.background": {
+    "message": "{t} 分割模型在你自己的电脑上把你和房间分开，什么都不会上传。"
+  },
+  "films.camera.note.background.t": {
+    "message": "抠图、模糊或替换。"
+  },
+  "films.ship.kicker": {
+    "message": "发布之前"
+  },
+  "films.ship.title": {
+    "message": "任何格式，不露隐私。"
+  },
+  "films.ship.lead": {
+    "message": "一段素材可以变成{formats}，不该被看到的内容始终{blur}。"
+  },
+  "films.ship.lead.formats": {
+    "message": "横屏、方形或竖屏"
+  },
+  "films.ship.lead.blur": {
+    "message": "藏在模糊之下"
+  },
+  "films.ship.formats": {
+    "message": "{t} 同一段素材，可按 16:9、9:16、1:1、4:3、4:5、16:10 或 10:16 构图。"
+  },
+  "films.ship.formats.t": {
+    "message": "任意宽高比。"
+  },
+  "films.ship.blur": {
+    "message": "{t} 高斯或马赛克，矩形、椭圆或手绘形状，盖住邮箱、密钥或密码。"
+  },
+  "films.ship.blur.t": {
+    "message": "模糊区域。"
+  },
+  "films.label": {
+    "message": "更多应用功能，动起来看",
+    "description": "Read by screen readers only: names the section of feature videos"
   }
 }
diff --git a/website/i18n/zh-TW/code.json b/website/i18n/zh-TW/code.json
index a314c2bf7..256d5f489 100644
--- a/website/i18n/zh-TW/code.json
+++ b/website/i18n/zh-TW/code.json
@@ -291,10 +291,6 @@
     "message": "本機字幕功能比較",
     "description": "Link label under the panel."
   },
-  "showcase.captions.label": {
-    "message": "字幕面板的示意圖：影片上以大字顯示「amber day on the validator, and it」這一行；旁邊的字幕已開啟，註明有七行字幕是從逐字稿即時產生，還有一列語言選項，以按鈕顯示原始逐字稿與 Français，還有 Translate 按鈕，以及刪除翻譯的選項。",
-    "description": "Describes a drawing of the app for screen readers. The drawing is in English: keep the quoted words as drawn."
-  },
   "showcase.agent.kicker": {
     "message": "代理"
   },
@@ -314,10 +310,6 @@
     "message": "自動縮放的運作方式",
     "description": "Link label under the panel."
   },
-  "showcase.agent.label": {
-    "message": "代理回覆的示意圖。被要求剪掉空檔時，它以時間碼回答：「Hi」之前 0 到 2.19 秒的開場，以及「think.」之後 35.12 到 40.03 秒的結尾，讓影片的可播放長度從 40 秒變成 33 秒，既有的縮放仍留在相同的時刻；最後是一行綠字「applied: added 2 trims」。",
-    "description": "Describes a drawing of the app for screen readers. The drawing is in English: keep the quoted words as drawn."
-  },
   "showcase.title": {
     "message": "錄影工具、字幕、代理、編碼器。"
   },
@@ -794,7 +786,7 @@
     "description": "Describes a short silent video loop of the app for screen readers."
   },
   "demoLoop.caption-styles": {
-    "message": "同一則字幕的五種樣式：一般字幕、黃色粗體、手寫體、等寬字型，以及逐字醒目標示。",
+    "message": "同一則字幕的五種樣式：一般字幕、黃色粗體、手寫體、等寬字型，以及一次只顯示一個詞的樣式。",
     "description": "Describes a short silent video loop of the app for screen readers."
   },
   "demoLoop.edit-by-transcript": {
@@ -848,5 +840,153 @@
   "demoLoop.ask-the-agent": {
     "message": "在編輯器聊天面板中輸入的請求，以及代理所做的編輯出現在時間軸上。",
     "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "films.default.kicker": {
+    "message": "開箱即用"
+  },
+  "films.default.title": {
+    "message": "第一段素材就好看。"
+  },
+  "films.default.lead": {
+    "message": "每段新錄製開啟時都{zoomed}，帶有桌布、邊距、陰影和圓角。想改哪裡都可以，也能直接匯出。"
+  },
+  "films.default.lead.zoomed": {
+    "message": "已經在你的點擊處放大"
+  },
+  "films.default.note.zooms": {
+    "message": "{t} 每段素材都依固定規則在你點擊的位置放大：不用 AI，也不連網。可在錄製模式中關閉。"
+  },
+  "films.default.note.zooms.t": {
+    "message": "依點擊放大。"
+  },
+  "films.default.note.frame": {
+    "message": "{t} 桌布、邊距、陰影、圓角和一點動態模糊，在你動手之前就已到位。"
+  },
+  "films.default.note.frame.t": {
+    "message": "現成的畫面。"
+  },
+  "films.default.note.cursor": {
+    "message": "{t} 指標與像素分開記錄，所以錄完後仍可更改它的大小和樣式。"
+  },
+  "films.default.note.cursor.t": {
+    "message": "可以重做的游標。"
+  },
+  "films.depth.kicker": {
+    "message": "3D"
+  },
+  "films.depth.title": {
+    "message": "不只是縮放，還有縱深。"
+  },
+  "films.depth.lead": {
+    "message": "放大時可以傾斜螢幕或{orbit}，把指標畫成帶陰影的{cursor}，再把整段素材{device}，放在會動的背景上。"
+  },
+  "films.depth.lead.orbit": {
+    "message": "繞著它旋轉"
+  },
+  "films.depth.lead.cursor": {
+    "message": "3D 游標"
+  },
+  "films.depth.lead.device": {
+    "message": "放進裝置裡"
+  },
+  "films.depth.tab.camera": {
+    "message": "3D 攝影機"
+  },
+  "films.depth.tab.cursors": {
+    "message": "游標"
+  },
+  "films.depth.tab.frames": {
+    "message": "裝置外框"
+  },
+  "films.depth.tab.backgrounds": {
+    "message": "動態背景"
+  },
+  "films.depth.note.camera": {
+    "message": "{t} 每次縮放都可以保持平面、把螢幕向左或向右轉，或跟隨縮放焦點環繞螢幕。景深會柔化遠側。"
+  },
+  "films.depth.note.camera.t": {
+    "message": "3D 攝影機。"
+  },
+  "films.depth.note.cursors": {
+    "message": "{t} Studio Ink, Prism Glow, Pop Coral, Pixel Candy 和 Star Sprout，每一套都能畫成帶陰影的 3D 物件。"
+  },
+  "films.depth.note.cursors.t": {
+    "message": "五套游標。"
+  },
+  "films.depth.note.frames": {
+    "message": "{t} 視窗、筆記型電腦、手機或螢幕，淺色或深色，背景可用漂移、極光或波浪動畫。"
+  },
+  "films.depth.note.frames.t": {
+    "message": "外框與動態。"
+  },
+  "films.camera.kicker": {
+    "message": "攝影機"
+  },
+  "films.camera.title": {
+    "message": "你的攝影機、你的螢幕，或兩者兼具。"
+  },
+  "films.camera.lead": {
+    "message": "含網路攝影機的素材可以{layouts}，攝影機背景也可以{removed}，不需要綠幕。"
+  },
+  "films.camera.lead.layouts": {
+    "message": "子母畫面、左右並排、上下堆疊或全螢幕"
+  },
+  "films.camera.lead.removed": {
+    "message": "在你的電腦上移除"
+  },
+  "films.camera.tab.layouts": {
+    "message": "版面配置"
+  },
+  "films.camera.tab.cutout": {
+    "message": "去背"
+  },
+  "films.camera.note.layouts": {
+    "message": "{t} 子母畫面、雙畫框、垂直堆疊，或完全不用網路攝影機。"
+  },
+  "films.camera.note.layouts.t": {
+    "message": "四種版面配置。"
+  },
+  "films.camera.note.full": {
+    "message": "{t} 把時間軸上的一段交給攝影機：它會放大到全螢幕，然後平順地縮回。"
+  },
+  "films.camera.note.full.t": {
+    "message": "全螢幕攝影機。"
+  },
+  "films.camera.note.background": {
+    "message": "{t} 分割模型在你自己的電腦上把你和房間分開，不會上傳任何東西。"
+  },
+  "films.camera.note.background.t": {
+    "message": "去背、模糊或替換。"
+  },
+  "films.ship.kicker": {
+    "message": "發布之前"
+  },
+  "films.ship.title": {
+    "message": "任何格式，不露隱私。"
+  },
+  "films.ship.lead": {
+    "message": "一段素材可以變成{formats}，不該被看到的內容始終{blur}。"
+  },
+  "films.ship.lead.formats": {
+    "message": "橫式、方形或直式"
+  },
+  "films.ship.lead.blur": {
+    "message": "藏在模糊之下"
+  },
+  "films.ship.formats": {
+    "message": "{t} 同一段素材，可依 16:9、9:16、1:1、4:3、4:5、16:10 或 10:16 構圖。"
+  },
+  "films.ship.formats.t": {
+    "message": "任意長寬比。"
+  },
+  "films.ship.blur": {
+    "message": "{t} 高斯或馬賽克，矩形、橢圓或手繪形狀，蓋住電子郵件、金鑰或密碼。"
+  },
+  "films.ship.blur.t": {
+    "message": "模糊區域。"
+  },
+  "films.label": {
+    "message": "更多應用功能，動起來看",
+    "description": "Read by screen readers only: names the section of feature videos"
   }
 }
diff --git a/website/src/components/DemoLoop/index.tsx b/website/src/components/DemoLoop/index.tsx
index dea1cc7f6..dbd7c94e5 100644
--- a/website/src/components/DemoLoop/index.tsx
+++ b/website/src/components/DemoLoop/index.tsx
@@ -36,7 +36,15 @@ import {
 import { loopLabel } from "./labels";
 import styles from "./styles.module.css";
 
-type Props = { name: LoopName };
+type Props = {
+	name: LoopName;
+	/** Off when the loop is one of several taking turns on a stage: it plays
+	 *  once, then `onEnded` hands over to the next. */
+	loop?: boolean;
+	onEnded?: () => void;
+	/** Called every frame while playing, with the share of the clip played. */
+	onProgress?: (fraction: number) => void;
+};
 
 /** Far enough ahead that the poster is there before the box is. */
 const NEAR = "100% 0px";
@@ -52,7 +60,7 @@ function motionAllowed(): boolean {
 	}
 }
 
-export default function DemoLoop({ name }: Props) {
+export default function DemoLoop({ name, loop = true, onEnded, onProgress }: Props) {
 	const box = useRef<HTMLDivElement>(null);
 	const video = useRef<HTMLVideoElement>(null);
 	const [height, setHeight] = useState<LoopHeight | null>(null);
@@ -111,6 +119,20 @@ export default function DemoLoop({ name }: Props) {
 		};
 	}, [height, wanted]);
 
+	// Progress for a stage's tab bar, per frame rather than per `timeupdate`,
+	// which fires four times a second and would step the bar visibly.
+	useEffect(() => {
+		const v = video.current;
+		if (!v || !onProgress || !playing) return;
+		let raf = 0;
+		const tick = () => {
+			if (v.duration > 0) onProgress(Math.min(v.currentTime / v.duration, 1));
+			raf = requestAnimationFrame(tick);
+		};
+		raf = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(raf);
+	}, [playing, onProgress]);
+
 	const label = loopLabel(name);
 	const toggle = playing
 		? translate({ id: "demoLoop.pause", message: "Pause video" })
@@ -125,13 +147,14 @@ export default function DemoLoop({ name }: Props) {
 					aria-label={label}
 					poster={height ? loopPoster(name) : undefined}
 					muted
-					loop
+					loop={loop}
 					playsInline
 					preload={height && auto.current ? "auto" : "none"}
 					disablePictureInPicture
 					disableRemotePlayback
 					onPlay={() => setPlaying(true)}
 					onPause={() => setPlaying(false)}
+					onEnded={onEnded}
 				>
 					{height &&
 						loopSources(name, height).map((s) => <source key={s.src} src={s.src} type={s.type} />)}
diff --git a/website/src/components/DemoLoop/labels.ts b/website/src/components/DemoLoop/labels.ts
index d4fb299c9..42addc509 100644
--- a/website/src/components/DemoLoop/labels.ts
+++ b/website/src/components/DemoLoop/labels.ts
@@ -48,7 +48,7 @@ export function loopLabel(name: LoopName): string {
 				id: "demoLoop.caption-styles",
 				description: LOOP,
 				message:
-					"One caption shown in five styles: a plain caption, a bold yellow one, a handwritten one, a monospaced one, and one highlighted word by word.",
+					"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.",
 			});
 		case "edit-by-transcript":
 			return translate({
diff --git a/website/src/components/Films/content.tsx b/website/src/components/Films/content.tsx
new file mode 100644
index 000000000..9247d7b42
--- /dev/null
+++ b/website/src/components/Films/content.tsx
@@ -0,0 +1,290 @@
+/**
+ * The films under the editor, and what each one says.
+ *
+ * The scroll-driven editor above already shows five things working: the
+ * background, the frame effects, the cursor settings, the zoom wand and the
+ * transcript. These blocks are for what it does not reach: the look a take
+ * opens with, depth (the 3D camera, the cursor packs, device frames and
+ * animated backgrounds), the webcam, and the last steps before a file leaves
+ * (the format and the blur). Captions and the agent get theirs in the Showcase
+ * bands below, beside the copy those bands already carry.
+ *
+ * Every claim here was checked against the app: the option names are the
+ * English UI's own, the defaults are src/lib/projectDefaults.ts.
+ */
+
+import Translate, { translate } from "@docusaurus/Translate";
+import type { ReactNode } from "react";
+
+import type { LoopName } from "../../lib/demo-loop";
+
+export type Tab = { label: string; loop: LoopName };
+
+export type Block = {
+	id: string;
+	kicker: string;
+	title: string;
+	lead: ReactNode;
+	/** One loop, or several taking turns behind a tab bar. */
+	tabs: Tab[];
+	notes: ReactNode[];
+};
+
+export type PairBlock = {
+	id: string;
+	kicker: string;
+	title: string;
+	lead: ReactNode;
+	items: { loop: LoopName; caption: ReactNode }[];
+};
+
+const b = (s: ReactNode) => <strong>{s}</strong>;
+
+export function getBlocks(): Block[] {
+	return [
+		{
+			id: "default",
+			kicker: translate({ id: "films.default.kicker", message: "Out of the box" }),
+			title: translate({
+				id: "films.default.title",
+				message: "Good-looking from the first take.",
+			}),
+			lead: (
+				<Translate
+					id="films.default.lead"
+					values={{
+						zoomed: b(
+							<Translate id="films.default.lead.zoomed">already zoomed on your clicks</Translate>,
+						),
+					}}
+				>
+					{
+						"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."
+					}
+				</Translate>
+			),
+			tabs: [
+				// One loop, so no tab bar and no label to show.
+				{ label: "", loop: "beautiful-by-default" },
+			],
+			notes: [
+				<Translate
+					key="zooms"
+					id="films.default.note.zooms"
+					values={{
+						t: b(<Translate id="films.default.note.zooms.t">Zooms from your clicks.</Translate>),
+					}}
+				>
+					{
+						"{t} Each take is zoomed where you clicked, by a fixed rule: no AI, no network call. Turn it off in Record mode."
+					}
+				</Translate>,
+				<Translate
+					key="frame"
+					id="films.default.note.frame"
+					values={{
+						t: b(<Translate id="films.default.note.frame.t">A finished frame.</Translate>),
+					}}
+				>
+					{
+						"{t} Wallpaper, padding, shadow, rounded corners and a little motion blur are on before you touch anything."
+					}
+				</Translate>,
+				<Translate
+					key="cursor"
+					id="films.default.note.cursor"
+					values={{
+						t: b(<Translate id="films.default.note.cursor.t">A cursor you can redo.</Translate>),
+					}}
+				>
+					{
+						"{t} The pointer is recorded apart from the pixels, so its size and style can change after the take."
+					}
+				</Translate>,
+			],
+		},
+		{
+			id: "depth",
+			kicker: translate({ id: "films.depth.kicker", message: "3D" }),
+			title: translate({ id: "films.depth.title", message: "Depth, not just zoom." }),
+			lead: (
+				<Translate
+					id="films.depth.lead"
+					values={{
+						orbit: b(<Translate id="films.depth.lead.orbit">orbit the screen</Translate>),
+						cursor: b(<Translate id="films.depth.lead.cursor">a 3D cursor</Translate>),
+						device: b(<Translate id="films.depth.lead.device">in a device</Translate>),
+					}}
+				>
+					{
+						"Turn the screen or {orbit} as you zoom, draw the pointer as {cursor} with a shadow, and put the whole take {device}, over a background that moves."
+					}
+				</Translate>
+			),
+			tabs: [
+				{
+					label: translate({ id: "films.depth.tab.camera", message: "3D camera" }),
+					loop: "3d-camera",
+				},
+				{
+					label: translate({ id: "films.depth.tab.cursors", message: "Cursors" }),
+					loop: "3d-cursors",
+				},
+				{
+					label: translate({ id: "films.depth.tab.frames", message: "Device frames" }),
+					loop: "device-frames",
+				},
+				{
+					label: translate({ id: "films.depth.tab.backgrounds", message: "Animated backgrounds" }),
+					loop: "animated-backgrounds",
+				},
+			],
+			notes: [
+				<Translate
+					key="camera"
+					id="films.depth.note.camera"
+					values={{ t: b(<Translate id="films.depth.note.camera.t">3D camera.</Translate>) }}
+				>
+					{
+						"{t} Each zoom can stay flat, turn the screen left or right, or orbit it while following the zoom's focus. Depth of field softens the far side."
+					}
+				</Translate>,
+				<Translate
+					key="cursors"
+					id="films.depth.note.cursors"
+					values={{
+						t: b(<Translate id="films.depth.note.cursors.t">Five cursor packs.</Translate>),
+					}}
+				>
+					{
+						"{t} Studio Ink, Prism Glow, Pop Coral, Pixel Candy and Star Sprout, each of which can be drawn as a 3D object with a shadow."
+					}
+				</Translate>,
+				<Translate
+					key="frames"
+					id="films.depth.note.frames"
+					values={{
+						t: b(<Translate id="films.depth.note.frames.t">Frames and motion.</Translate>),
+					}}
+				>
+					{
+						"{t} A window, laptop, phone or screen, light or dark, over a background animated with Drift, Aurora or Waves."
+					}
+				</Translate>,
+			],
+		},
+		{
+			id: "camera",
+			kicker: translate({ id: "films.camera.kicker", message: "Camera" }),
+			title: translate({
+				id: "films.camera.title",
+				message: "Your camera, your screen, or both.",
+			}),
+			lead: (
+				<Translate
+					id="films.camera.lead"
+					values={{
+						layouts: b(
+							<Translate id="films.camera.lead.layouts">
+								picture in picture, side by side, stacked or full screen
+							</Translate>,
+						),
+						removed: b(
+							<Translate id="films.camera.lead.removed">removed on your computer</Translate>,
+						),
+					}}
+				>
+					{
+						"One take with a webcam can be {layouts}, and the camera's background can be {removed}, with no green screen."
+					}
+				</Translate>
+			),
+			tabs: [
+				{
+					label: translate({ id: "films.camera.tab.layouts", message: "Layouts" }),
+					loop: "every-layout",
+				},
+				{
+					label: translate({ id: "films.camera.tab.cutout", message: "Cutout" }),
+					loop: "camera-cutout",
+				},
+			],
+			notes: [
+				<Translate
+					key="layouts"
+					id="films.camera.note.layouts"
+					values={{ t: b(<Translate id="films.camera.note.layouts.t">Four layouts.</Translate>) }}
+				>
+					{"{t} Picture in picture, dual frame, vertical stack, or no webcam at all."}
+				</Translate>,
+				<Translate
+					key="full"
+					id="films.camera.note.full"
+					values={{ t: b(<Translate id="films.camera.note.full.t">Full Camera.</Translate>) }}
+				>
+					{
+						"{t} Give a stretch of the timeline to the camera: it grows to full screen, then eases back."
+					}
+				</Translate>,
+				<Translate
+					key="background"
+					id="films.camera.note.background"
+					values={{
+						t: b(
+							<Translate id="films.camera.note.background.t">Cutout, blur or replace.</Translate>,
+						),
+					}}
+				>
+					{
+						"{t} A segmentation model separates you from the room on your own computer. Nothing is uploaded."
+					}
+				</Translate>,
+			],
+		},
+	];
+}
+
+export function getPair(): PairBlock {
+	return {
+		id: "ship",
+		kicker: translate({ id: "films.ship.kicker", message: "Before it ships" }),
+		title: translate({ id: "films.ship.title", message: "Every format. Nothing private." }),
+		lead: (
+			<Translate
+				id="films.ship.lead"
+				values={{
+					formats: b(<Translate id="films.ship.lead.formats">wide, square or vertical</Translate>),
+					blur: b(<Translate id="films.ship.lead.blur">under a blur</Translate>),
+				}}
+			>
+				{"One take becomes {formats}, and whatever should not be seen stays {blur}."}
+			</Translate>
+		),
+		items: [
+			{
+				loop: "every-format",
+				caption: (
+					<Translate
+						id="films.ship.formats"
+						values={{ t: b(<Translate id="films.ship.formats.t">Any aspect ratio.</Translate>) }}
+					>
+						{"{t} The same take, framed for 16:9, 9:16, 1:1, 4:3, 4:5, 16:10 or 10:16."}
+					</Translate>
+				),
+			},
+			{
+				loop: "sensitive-data-mask",
+				caption: (
+					<Translate
+						id="films.ship.blur"
+						values={{ t: b(<Translate id="films.ship.blur.t">Blur regions.</Translate>) }}
+					>
+						{
+							"{t} Smooth or mosaic, as a rectangle, an oval or a freehand shape, over an email, a key or a password."
+						}
+					</Translate>
+				),
+			},
+		],
+	};
+}
diff --git a/website/src/components/Films/index.tsx b/website/src/components/Films/index.tsx
new file mode 100644
index 000000000..9aa6eda76
--- /dev/null
+++ b/website/src/components/Films/index.tsx
@@ -0,0 +1,136 @@
+/**
+ * Films of the app, under the editor: a centred head, a wide stage, and the
+ * notes that say what the film just showed.
+ *
+ * A stage with several loops plays them in turn. Each plays once, its tab
+ * filling as it goes, then hands over to the next; a click on a tab jumps
+ * there. Everything about loading and playback (nothing fetched before the
+ * stage is near, 720p or 1080p from the real width, pause off screen, no
+ * autoplay under reduced motion, a pause button) is DemoLoop's.
+ */
+
+import { translate } from "@docusaurus/Translate";
+import Heading from "@theme/Heading";
+import { useCallback, useRef, useState } from "react";
+
+import DemoLoop from "../DemoLoop";
+import { type Block, getBlocks, getPair } from "./content";
+import styles from "./styles.module.css";
+
+function Stage({ block }: { block: Block }) {
+	const [index, setIndex] = useState(0);
+	const bars = useRef<(HTMLSpanElement | null)[]>([]);
+	const many = block.tabs.length > 1;
+	const current = block.tabs[index];
+
+	// Straight to the DOM: a state update per frame would re-render the block.
+	const onProgress = useCallback(
+		(p: number) => bars.current[index]?.style.setProperty("--p", String(p)),
+		[index],
+	);
+	const go = (i: number) => {
+		bars.current.forEach((el) => el?.style.setProperty("--p", "0"));
+		setIndex(i);
+	};
+
+	return (
+		<div className={styles.stage}>
+			<span className={styles.glow} />
+			{many && (
+				<div className={styles.tabs} role="tablist" aria-label={block.title}>
+					{block.tabs.map((tab, i) => (
+						<button
+							key={tab.loop}
+							type="button"
+							role="tab"
+							id={`${block.id}-tab-${i}`}
+							aria-selected={i === index}
+							aria-controls={`${block.id}-panel`}
+							className={styles.tab}
+							onClick={() => go(i)}
+						>
+							{tab.label}
+							<span
+								ref={(el) => {
+									bars.current[i] = el;
+								}}
+								className={styles.tabProgress}
+								aria-hidden="true"
+							/>
+						</button>
+					))}
+				</div>
+			)}
+			<div
+				className={styles.frame}
+				id={`${block.id}-panel`}
+				role={many ? "tabpanel" : undefined}
+				aria-labelledby={many ? `${block.id}-tab-${index}` : undefined}
+			>
+				<DemoLoop
+					key={current.loop}
+					name={current.loop}
+					loop={!many}
+					onProgress={many ? onProgress : undefined}
+					onEnded={many ? () => go((index + 1) % block.tabs.length) : undefined}
+				/>
+			</div>
+		</div>
+	);
+}
+
+export default function Films() {
+	const pair = getPair();
+	return (
+		<section
+			className={styles.section}
+			aria-label={translate({
+				id: "films.label",
+				description: "Read by screen readers only: names the section of feature videos",
+				message: "More of the app, in motion",
+			})}
+		>
+			<div className={styles.inner}>
+				{getBlocks().map((block) => (
+					<article key={block.id} id={block.id} className={styles.block}>
+						<header className={styles.head}>
+							<p className={styles.kicker}>{block.kicker}</p>
+							<Heading as="h2" className={styles.title}>
+								{block.title}
+							</Heading>
+							<p className={styles.lead}>{block.lead}</p>
+						</header>
+						<Stage block={block} />
+						<ul className={styles.notes}>
+							{block.notes.map((note, i) => (
+								<li key={i} className={styles.note}>
+									{note}
+								</li>
+							))}
+						</ul>
+					</article>
+				))}
+
+				<article id={pair.id} className={styles.block}>
+					<header className={styles.head}>
+						<p className={styles.kicker}>{pair.kicker}</p>
+						<Heading as="h2" className={styles.title}>
+							{pair.title}
+						</Heading>
+						<p className={styles.lead}>{pair.lead}</p>
+					</header>
+					<div className={styles.pair}>
+						{pair.items.map((item) => (
+							<div key={item.loop} className={styles.pairItem}>
+								<div className={styles.frame}>
+									<DemoLoop name={item.loop} />
+								</div>
+								<p className={styles.pairCaption}>{item.caption}</p>
+							</div>
+						))}
+					</div>
+				</article>
+			</div>
+		</section>
+	);
+}
diff --git a/website/src/components/Films/styles.module.css b/website/src/components/Films/styles.module.css
new file mode 100644
index 000000000..f2803426b
--- /dev/null
+++ b/website/src/components/Films/styles.module.css
@@ -0,0 +1,272 @@
+/* The films under the editor: one centred head per block, a wide stage, and
+   the notes under it — the shape the category's own pages use, in this site's
+   type, accent and panel chrome. */
+
+.section {
+	background: var(--os-bg);
+	color: var(--os-fg);
+	padding: 120px 28px 0;
+	overflow-x: clip;
+}
+
+.inner {
+	max-width: 1080px;
+	margin: 0 auto;
+}
+
+.block {
+	scroll-margin-top: 76px;
+}
+
+.block + .block {
+	margin-top: 150px;
+}
+
+/* ---- head ---- */
+
+.head {
+	max-width: 720px;
+	margin: 0 auto;
+	text-align: center;
+}
+
+.kicker {
+	margin: 0;
+	font-family: var(--ifm-font-family-monospace);
+	font-size: 11px;
+	font-weight: 600;
+	letter-spacing: 0.16em;
+	text-transform: uppercase;
+	color: var(--os-accent);
+}
+
+.title {
+	margin: 14px 0 0;
+	font-size: clamp(30px, 3.6vw, 44px);
+	font-weight: 750;
+	letter-spacing: -0.03em;
+	line-height: 1.1;
+	color: var(--os-fg-emphasis);
+	text-wrap: balance;
+}
+
+.lead {
+	margin: 18px auto 0;
+	max-width: 58ch;
+	font-size: 16px;
+	line-height: 1.7;
+	color: var(--os-muted);
+	text-wrap: pretty;
+}
+
+.lead strong {
+	font-weight: 600;
+	color: var(--os-fg-emphasis);
+}
+
+/* ---- stage ---- */
+
+.stage {
+	position: relative;
+	margin-top: 44px;
+}
+
+/* The same wash the Showcase panels sit on, so the two sections read as one
+   page rather than two templates. */
+.glow {
+	position: absolute;
+	inset: -60px -80px;
+	background: radial-gradient(ellipse 60% 55% at 50% 45%, var(--os-accent-wash), transparent 70%);
+	pointer-events: none;
+}
+
+.frame {
+	position: relative;
+	border-radius: 18px;
+	border: 1px solid var(--os-border);
+	background: var(--os-surface);
+	box-shadow:
+		0 30px 80px rgba(0, 0, 0, 0.5),
+		inset 0 1px 0 rgba(255, 255, 255, 0.04);
+	overflow: hidden;
+}
+
+:global([data-theme="light"]) .frame {
+	box-shadow: var(--os-elev-pop);
+}
+
+/* The loop fills the frame: no second border, no second radius. */
+.frame figure {
+	margin: 0;
+}
+
+.frame figure > div {
+	border: 0;
+	border-radius: 0;
+}
+
+/* ---- tabs ---- */
+
+.tabs {
+	position: absolute;
+	z-index: 2;
+	top: 14px;
+	left: 50%;
+	transform: translateX(-50%);
+	display: flex;
+	gap: 2px;
+	max-width: calc(100% - 28px);
+	padding: 4px;
+	overflow-x: auto;
+	scrollbar-width: none;
+	border-radius: 999px;
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	background: rgba(8, 10, 13, 0.66);
+	backdrop-filter: blur(14px);
+	-webkit-backdrop-filter: blur(14px);
+}
+
+.tab {
+	position: relative;
+	flex: none;
+	overflow: hidden;
+	padding: 7px 14px;
+	border: 0;
+	border-radius: 999px;
+	background: transparent;
+	font: inherit;
+	font-size: 13px;
+	font-weight: 550;
+	white-space: nowrap;
+	color: rgba(255, 255, 255, 0.66);
+	cursor: pointer;
+	transition:
+		color 0.15s,
+		background 0.15s;
+}
+
+.tab:hover {
+	color: #fff;
+}
+
+.tab[aria-selected="true"] {
+	background: rgba(255, 255, 255, 0.12);
+	color: #fff;
+}
+
+/* How far the current loop has played: the tab is also the progress bar,
+   so a reader can see when the stage will move on by itself. */
+.tabProgress {
+	position: absolute;
+	left: 10px;
+	right: 10px;
+	bottom: 3px;
+	height: 2px;
+	border-radius: 2px;
+	background: var(--os-accent);
+	transform-origin: left center;
+	transform: scaleX(var(--p, 0));
+}
+
+/* ---- notes ---- */
+
+.notes {
+	display: grid;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	gap: 28px;
+	margin: 40px 0 0;
+	padding: 28px 0 0;
+	border-top: 1px solid var(--os-border-soft);
+	list-style: none;
+}
+
+.note {
+	margin: 0;
+	font-size: 14px;
+	line-height: 1.65;
+	color: var(--os-muted);
+	text-wrap: pretty;
+}
+
+.note strong {
+	font-weight: 600;
+	color: var(--os-fg-emphasis);
+}
+
+/* ---- the pair ---- */
+
+.pair {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 24px;
+	margin-top: 44px;
+}
+
+.pairItem .frame {
+	border-radius: 16px;
+}
+
+.pairCaption {
+	margin: 18px 4px 0;
+	font-size: 14px;
+	line-height: 1.65;
+	color: var(--os-muted);
+}
+
+.pairCaption strong {
+	font-weight: 600;
+	color: var(--os-fg-emphasis);
+}
+
+@media (max-width: 900px) {
+	.section {
+		padding-top: 90px;
+	}
+
+	.block + .block {
+		margin-top: 110px;
+	}
+
+	.notes {
+		grid-template-columns: 1fr;
+		gap: 14px;
+	}
+
+	.pair {
+		grid-template-columns: 1fr;
+	}
+}
+
+@media (max-width: 600px) {
+	.section {
+		padding-left: 16px;
+		padding-right: 16px;
+	}
+
+	.frame {
+		border-radius: 12px;
+	}
+
+	/* Over a 340px-wide loop the bar would cover the picture it labels. */
+	.tabs {
+		position: static;
+		transform: none;
+		margin: 0 auto 12px;
+		width: fit-content;
+		background: var(--os-surface-1);
+		border-color: var(--os-border);
+	}
+
+	.tab {
+		color: var(--os-muted);
+	}
+
+	.tab[aria-selected="true"] {
+		background: var(--os-surface-3);
+		color: var(--os-fg-emphasis);
+	}
+
+	.glow {
+		inset: -30px -16px;
+	}
+}
diff --git a/website/src/components/Showcase/content.ts b/website/src/components/Showcase/content.ts
index 14403c915..fe40fafa0 100644
--- a/website/src/components/Showcase/content.ts
+++ b/website/src/components/Showcase/content.ts
@@ -20,10 +20,19 @@
  * here is a drawing, it is labelled as one, and nothing in this section asks to
  * be believed on the strength of it. The specification line under each claim is
  * still doing the work.
+ *
+ * Two of the four are no longer drawn. Captions and the agent are filmed:
+ * loops exported from the app itself, lazy and served from R2 (see DemoLoop),
+ * which the films section above this one already pays the set-up cost for. A
+ * film shows what a drawing could only quote — the captions changing language,
+ * the agent's edits landing on the timeline. The recorder and the encoder have
+ * no film yet and keep their drawings.
  */
 
 import { translate } from "@docusaurus/Translate";
 
+import type { LoopName } from "../../lib/demo-loop";
+
 export type Feature = {
 	id: string;
 	kicker: string;
@@ -34,8 +43,11 @@ export type Feature = {
 	 *  believe it; the reference is where the specification line can be
 	 *  checked. A feature page, where one exists, follows it. */
 	links: { to: string; label: string }[];
-	/** What the drawn panel depicts, for anyone who cannot see it. */
-	label: string;
+	/** What the drawn panel depicts, for anyone who cannot see it. Only on a
+	 *  drawn band: a filmed one carries its loop's own label. */
+	label?: string;
+	/** A loop of the app in place of the drawing. */
+	video?: LoopName;
 	/** Layout only — the copy stays first in the DOM either way. */
 	flip?: boolean;
 };
@@ -143,12 +155,7 @@ export function getFeatures(): Feature[] {
 					}),
 				},
 			],
-			label: translate({
-				id: "showcase.captions.label",
-				description: DRAWING,
-				message:
-					"A drawing of the captions panel: the line “amber day on the validator, and it” set large over the video, and beside it captions switched on, a note that seven caption lines are derived live from the transcript, and a language row showing the original transcript and Français as buttons, a Translate button and the option to delete a translation.",
-			}),
+			video: "automatic-subtitles",
 		},
 		{
 			id: "agent",
@@ -178,12 +185,7 @@ export function getFeatures(): Feature[] {
 					}),
 				},
 			],
-			label: translate({
-				id: "showcase.agent.label",
-				description: DRAWING,
-				message:
-					"A drawing of the agent's reply. Asked to cut the dead air, it answers with timecodes: 0 to 2.19 seconds of lead-in before “Hi” and 35.12 to 40.03 seconds of tail after “think.”, taking the video from 40 seconds to 33 seconds of playable footage, with the existing zooms left on the same moments — then a green line reading “applied: added 2 trims”.",
-			}),
+			video: "ask-the-agent",
 			flip: true,
 		},
 	];
diff --git a/website/src/components/Showcase/index.tsx b/website/src/components/Showcase/index.tsx
index 1b6181118..ee87bf100 100644
--- a/website/src/components/Showcase/index.tsx
+++ b/website/src/components/Showcase/index.tsx
@@ -20,6 +20,7 @@ import Translate from "@docusaurus/Translate";
 import Heading from "@theme/Heading";
 import { Fragment } from "react";
 
+import DemoLoop from "../DemoLoop";
 import LocaleLink from "../LocaleLink";
 import { getFeatures } from "./content";
 import { PANELS } from "./panels";
@@ -55,15 +56,24 @@ export default function Showcase() {
 							<p className={styles.fact}>{item.fact}</p>
 						</div>
 
-						{/* One label for the whole drawing. Without it a screen reader walks
-						    two dozen interface fragments — "Display 1", "60 fps", "62%" —
-						    that mean nothing out of the picture they are drawn in.
-						    The drawing is in English on every locale, so it says so; the
-						    figure does not, its label is translated. */}
-						<figure className={styles.figure} role="img" aria-label={item.label}>
-							<span className={styles.glow} />
-							<div lang="en">{PANELS[item.id]}</div>
-						</figure>
+						{item.video ? (
+							<div className={styles.figure}>
+								<span className={styles.glow} />
+								<div className={`${styles.panel} ${styles.filmPanel}`}>
+									<DemoLoop name={item.video} />
+								</div>
+							</div>
+						) : (
+							/* One label for the whole drawing. Without it a screen reader walks
+							   two dozen interface fragments — "Display 1", "60 fps", "62%" —
+							   that mean nothing out of the picture they are drawn in.
+							   The drawing is in English on every locale, so it says so; the
+							   figure does not, its label is translated. */
+							<figure className={styles.figure} role="img" aria-label={item.label}>
+								<span className={styles.glow} />
+								<div lang="en">{PANELS[item.id]}</div>
+							</figure>
+						)}
 					</article>
 				))}
 			</div>
diff --git a/website/src/components/Showcase/panels.tsx b/website/src/components/Showcase/panels.tsx
index 286b42955..74918c2ca 100644
--- a/website/src/components/Showcase/panels.tsx
+++ b/website/src/components/Showcase/panels.tsx
@@ -1,10 +1,11 @@
 /**
- * The four panels, drawn.
+ * The two panels still drawn: the recorder and the export. Captions and the
+ * agent are filmed now (content.ts names their loops).
  *
  * Every string in here is a string the application shows, and every one of them
  * is either in the fixture the editor above is driven from or in the repository
  * — the quality tiers are the export dialog's, the capture chips are what macOS
- * reports for the take, the agent's timecodes are the ones it answered with.
+ * reports for the take.
  * The panels are illustrations and are labelled as such by their `role="img"`,
  * which is also why the placeholder bars and window controls are drawn rather
  * than described: with the subtree collapsed to one label, nothing in here is
@@ -15,16 +16,7 @@
  * scrubs, so the panels reuse those two URLs and cost no further request.
  */
 
-import {
-	Check,
-	ChevronDown,
-	ChevronRight,
-	CircleCheck,
-	Languages,
-	Mic,
-	Trash,
-	Volume1,
-} from "lucide-react";
+import { CircleCheck, Mic, Volume1 } from "lucide-react";
 import type { ReactNode } from "react";
 
 import styles from "./styles.module.css";
@@ -155,123 +147,8 @@ function ExportPanel() {
 	);
 }
 
-function CaptionsPanel() {
-	return (
-		<div className={`${styles.panel} ${styles.capPanel}`}>
-			<div className={styles.capStage}>
-				<img
-					className={styles.capWall}
-					src="/img/walkthrough/canvas-bg-2.jpg"
-					alt=""
-					width={1200}
-					height={675}
-					loading="lazy"
-					decoding="async"
-				/>
-				<div className={styles.capWin}>
-					<div className={styles.capWinBar}>
-						<TrafficLights small />
-					</div>
-					<div className={styles.capWinBody}>
-						<span className={`${styles.capWinLine} ${styles.phA}`} style={{ width: "58%" }} />
-						<span className={`${styles.capWinLine} ${styles.phB}`} style={{ width: "84%" }} />
-						<span className={`${styles.capWinLine} ${styles.phB}`} style={{ width: "72%" }} />
-						<span className={`${styles.capWinLine} ${styles.phB}`} style={{ width: "66%" }} />
-					</div>
-				</div>
-				{/* The burned-in line, at the size and the offset the app draws it. */}
-				<div className={styles.capLine}>amber day on the validator, and it</div>
-			</div>
-
-			<div className={styles.capSide}>
-				<div className={styles.capSideHead}>
-					<span className={styles.capSideTitle}>Captions</span>
-					<ChevronRight className={styles.capChevron} size={14} />
-				</div>
-
-				<div className={styles.capRow}>
-					<span className={styles.capRowLabel}>Show captions</span>
-					<span className={styles.switch}>
-						<span className={styles.switchKnob} />
-					</span>
-				</div>
-
-				<div className={styles.capMeta}>7 caption lines, derived live from the transcript.</div>
-
-				<div className={styles.capGroup}>Language</div>
-
-				{/* A row of buttons, as the app draws it: every language on show, one click. */}
-				<div className={styles.capSelectLabel}>Display</div>
-				<div className={`${styles.pills} ${styles.capPills}`}>
-					<span className={`${styles.pill} ${styles.pillOn}`}>Original (transcript)</span>
-					<span className={styles.pill}>Français</span>
-				</div>
-
-				<div className={styles.capActions}>
-					<span className={styles.capPicker}>
-						Français
-						<ChevronDown className={styles.capChevron} size={10} />
-					</span>
-					<span className={styles.capButton}>
-						<Languages size={12} />
-						Translate
-					</span>
-				</div>
-
-				<div className={`${styles.capButton} ${styles.capButtonWide}`}>
-					<Trash size={12} />
-					Delete this translation
-				</div>
-
-				<div className={styles.capFoot}>
-					Translations are stored beside the transcript, never in it — the original text and its
-					timings stay untouched.
-				</div>
-			</div>
-		</div>
-	);
-}
-
-function AgentPanel() {
-	return (
-		<div className={`${styles.panel} ${styles.agentPanel}`}>
-			<div className={styles.agentHead}>
-				<img
-					className={styles.agentLogo}
-					src="/img/logo-icon.png"
-					alt=""
-					width={96}
-					height={96}
-					loading="lazy"
-					decoding="async"
-				/>
-				<span className={styles.agentName}>Agent</span>
-				<span className={styles.agentKey}>your key</span>
-			</div>
-
-			<div className={styles.ask}>Cut the dead air — how much does it save?</div>
-
-			<div className={styles.reply}>
-				The only silences over a second are at the two ends:{" "}
-				<span className={styles.tc}>0–2.19s</span> of dead lead-in before “Hi” and{" "}
-				<span className={styles.tc}>35.12–40.03s</span> of dead tail after “think.” Cutting both
-				takes the video about seven seconds shorter —{" "}
-				<span className={styles.tcTotal}>40.0s → 33.0s</span> of playable footage. Existing zooms
-				stay anchored to the same moments.
-			</div>
-
-			<div className={styles.applied}>
-				<Check size={13} strokeWidth={2.4} />
-				applied: added 2 trims
-			</div>
-		</div>
-	);
-}
-
 /** Keyed by the feature id in `content.ts`. */
 export const PANELS: Record<string, ReactNode> = {
 	record: <RecordPanel />,
 	export: <ExportPanel />,
-	captions: <CaptionsPanel />,
-	agent: <AgentPanel />,
 };
diff --git a/website/src/components/Showcase/styles.module.css b/website/src/components/Showcase/styles.module.css
index 0f6a470b8..bbb143bd4 100644
--- a/website/src/components/Showcase/styles.module.css
+++ b/website/src/components/Showcase/styles.module.css
@@ -517,332 +517,17 @@
 	color: var(--os-meta);
 }
 
-/* ---- captions ---- */
+/* ---- filmed bands ----
+   Captions and the agent are shown by the app itself, not drawn: the loop
+   fills the same panel shell, edge to edge. */
 
-.capPanel {
-	display: flex;
-	min-height: 380px;
-}
-
-.capStage {
-	position: relative;
-	flex: 1;
-	min-width: 0;
-}
-
-.capWall {
-	position: absolute;
-	inset: 0;
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-}
-
-.capWin {
-	position: absolute;
-	left: 9%;
-	right: 9%;
-	top: 10%;
-	bottom: 30%;
-	border-radius: 10px;
-	background: var(--os-surface-1);
-	border: 1px solid var(--os-border);
-	box-shadow: var(--win-elev);
-	overflow: hidden;
-}
-
-.capWinBar {
-	height: 24px;
-	display: flex;
-	align-items: center;
-	gap: 5px;
-	padding: 0 10px;
-	background: var(--os-surface-2);
-	border-bottom: 1px solid var(--os-border-soft);
-}
-
-.capWinBody {
-	padding: 14px 16px;
-	display: flex;
-	flex-direction: column;
-	gap: 9px;
-}
-
-.capWinLine {
-	height: 8px;
-	border-radius: 4px;
-}
-
-/* The plate the app burns into the render: literal in both themes, because it
-   is drawn over video and not over the page.
-
-   No backdrop-filter, though the app's own plate has one. It always sits over
-   the bottom of the wallpaper — the drawn window stops at 70% and the plate
-   starts at 91% — so its backdrop is a smooth gradient, and blurring a smooth
-   gradient returns the same gradient. Measured: removing the blur moved 0.8%
-   of the panel's pixels by a mean of 0.13/255, all of them on the plate's own
-   edge. It bought a compositing layer and a backdrop read-back for that. */
-.capLine {
-	position: absolute;
-	left: 50%;
-	bottom: 9%;
-	transform: translateX(-50%);
-	max-width: 90%;
-	padding: 10px 18px;
-	border-radius: 10px;
-	background: rgba(8, 10, 13, 0.72);
-	font-size: 18px;
-	font-weight: 700;
-	letter-spacing: -0.01em;
-	color: #fff;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.capSide {
-	width: 252px;
-	flex-shrink: 0;
-	display: flex;
-	flex-direction: column;
-	gap: 11px;
-	border-left: 1px solid var(--os-border);
-	background: var(--os-surface);
-	padding: 15px 16px;
-}
-
-.capSideHead {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-
-.capSideTitle {
-	font-size: 14px;
-	font-weight: 650;
-	color: var(--os-fg-emphasis);
-}
-
-.capChevron {
-	color: var(--os-muted);
-	flex-shrink: 0;
-}
-
-.capRow {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 11px 13px;
-	border-radius: 12px;
-	border: 1px solid var(--os-border);
-	background: var(--os-surface-1);
-}
-
-.capRowLabel {
-	font-size: 12.5px;
-	font-weight: 600;
-	color: var(--os-fg-emphasis);
-}
-
-.switch {
-	position: relative;
-	width: 34px;
-	height: 20px;
-	flex-shrink: 0;
-	border-radius: 999px;
-	background: var(--os-accent);
-}
-
-.switchKnob {
-	position: absolute;
-	right: 2px;
-	top: 2px;
-	width: 16px;
-	height: 16px;
-	border-radius: 50%;
-	background: #fff;
-}
-
-.capMeta {
-	font-size: 11px;
-	line-height: 1.55;
-	color: var(--os-muted);
-}
-
-.capGroup {
-	margin-top: 2px;
-	font-size: 12.5px;
-	font-weight: 650;
-	color: var(--os-fg-emphasis);
-}
-
-.capSelectRow {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 10px;
-	padding: 10px 13px;
-	border-radius: 12px;
-	border: 1px solid var(--os-border);
-	background: var(--os-surface-1);
-}
-
-.capPills {
-	grid-template-columns: 1.7fr 1fr;
-}
-
-.capSelectLabel {
-	font-size: 12px;
-	color: var(--os-fg);
-}
-
-.capSelect {
-	display: inline-flex;
-	align-items: center;
-	gap: 7px;
-	padding: 6px 10px;
-	border-radius: 9px;
-	border: 1px solid var(--os-border);
-	background: var(--os-surface-2);
-	font-size: 11.5px;
-	font-weight: 500;
-	color: var(--os-fg);
-}
-
-.capActions {
-	display: grid;
-	grid-template-columns: 1fr auto;
-	gap: 8px;
-}
-
-.capPicker {
-	display: inline-flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 7px;
-	padding: 8px 11px;
-	border-radius: 10px;
-	border: 1px solid var(--os-border);
-	font-size: 11.5px;
-	font-weight: 500;
-	color: var(--os-fg);
-}
-
-.capButton {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	padding: 8px 12px;
-	border-radius: 10px;
-	border: 1px solid var(--os-border);
-	font-size: 11.5px;
-	font-weight: 600;
-	color: var(--os-fg);
-}
-
-.capButtonWide {
-	align-self: flex-start;
-	gap: 7px;
-	font-weight: 500;
-}
-
-.capFoot {
-	font-size: 10.5px;
-	line-height: 1.6;
-	color: var(--os-meta);
-}
-
-/* ---- agent ---- */
-
-.agentPanel {
-	display: flex;
-	flex-direction: column;
-	gap: 14px;
-	padding: 18px 20px;
-}
-
-.agentHead {
-	display: flex;
-	align-items: center;
-	gap: 9px;
-	padding-bottom: 12px;
-	border-bottom: 1px solid var(--os-border-soft);
-}
-
-.agentLogo {
-	width: 18px;
-	height: 18px;
-	object-fit: contain;
-}
-
-.agentName {
-	font-size: 13.5px;
-	font-weight: 600;
-	color: var(--os-fg-emphasis);
-}
-
-.agentKey {
-	margin-left: auto;
-	padding: 3px 9px;
-	border-radius: 999px;
-	border: 1px solid var(--os-border);
-	font-family: var(--ifm-font-family-monospace);
-	font-size: 10px;
-	color: var(--os-muted);
-}
-
-.ask {
-	align-self: flex-end;
-	max-width: 72%;
-	padding: 10px 14px;
-	border-radius: 12px;
-	background: var(--os-accent-soft);
-	border: 1px solid var(--os-accent-border);
-	font-size: 13px;
-	line-height: 1.6;
-	color: var(--os-fg-2);
-}
-
-.reply {
-	align-self: flex-start;
-	max-width: 94%;
-	padding: 12px 15px;
-	border-radius: 12px;
-	background: var(--os-surface-2);
-	border: 1px solid var(--os-border-soft);
-	font-size: 13px;
-	line-height: 1.75;
-	color: var(--os-fg);
-}
-
-.tc,
-.tcTotal {
-	font-family: var(--ifm-font-family-monospace);
-	font-size: 12px;
-	white-space: nowrap;
-}
-
-.tc {
-	color: var(--os-accent);
-}
-
-.tcTotal {
-	color: var(--os-fg-emphasis);
+.filmPanel figure {
+	margin: 0;
 }
 
-.applied {
-	align-self: flex-start;
-	display: inline-flex;
-	align-items: center;
-	gap: 7px;
-	padding: 6px 13px;
-	border-radius: 999px;
-	background: var(--os-accent-soft);
-	border: 1px solid var(--os-accent-border);
-	color: var(--os-accent);
-	font-family: var(--ifm-font-family-monospace);
-	font-size: 11.5px;
-	font-weight: 600;
+.filmPanel figure > div {
+	border: 0;
+	border-radius: 0;
 }
 
 /* ---- narrow ---- */
@@ -867,24 +552,6 @@
 		grid-column: 1;
 		grid-row: auto;
 	}
-
-	/* Side by side, the caption panel's inspector is a quarter of it; stacked in
-	   one column it would be half. */
-	.capPanel {
-		flex-direction: column;
-		min-height: 0;
-	}
-
-	.capStage {
-		aspect-ratio: 16 / 10;
-		flex: none;
-	}
-
-	.capSide {
-		width: auto;
-		border-left: none;
-		border-top: 1px solid var(--os-border);
-	}
 }
 
 @media (max-width: 600px) {
@@ -896,11 +563,6 @@
 	.glow {
 		inset: -30px -20px;
 	}
-
-	.capLine {
-		font-size: 14px;
-		padding: 8px 13px;
-	}
 }
 
 @media print {
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index d2e60bf8f..0e63acb59 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -8,6 +8,7 @@ import { Apple, AppWindow, ArrowDown, CircleCheck, Download, TerminalSquare } fr
 
 import AppLanguages from "../components/AppLanguages";
 import Editor from "../components/Editor";
+import Films from "../components/Films";
 import LocaleLink from "../components/LocaleLink";
 import Showcase from "../components/Showcase";
 import type { AppLanguage } from "../lib/release";
@@ -118,6 +119,9 @@ export default function Home() {
 			{/* The argument, immediately after the hero. */}
 			<Editor />
 
+			{/* What the editor above does not reach, filmed from the app. */}
+			<Films />
+
 			{/* The claims the editor cannot make on its own. */}
 			<Showcase />
 

From a3f091a26b61e8996e8526d39901e5604f097ca4 Mon Sep 17 00:00:00 2001
From: Etienne Lescot <etiennelescot@gmail.com>
Date: Fri, 2 Oct 2026 13:28:14 +0200
Subject: [PATCH 4/8] fix(website): smooth every loop, and blur the camera
 instead of cutting it out

The loops are re-cut (media folder loops/2026-10b): every cut inside a loop
is now a cross-fade on the same moment of the take, and every loop's end
dissolves into its own start, so none of them jumps when it repeats.
beautiful-by-default goes from six hard cuts to four shots dissolving into
one another; animated-backgrounds is animated from its first frame; the
agent's wait is skipped with a dissolve instead of a 12x fast-forward; the
dragged card no longer jumps back to its column when dropped (a bug in the
demo app, fixed and re-filmed). A scene-cut detector finds no hard cut in
any of the eighteen.

On a stage, switching tabs cross-fades too: the loop being left stays on
top, holding its last frame, until the next one has a frame of its own.

The camera block shows background blur on a square vignette, pushed in so
the blur reads, rather than the cutout. The pause button moves to the top
right, off the corner where webcam vignettes sit.
---
 website/i18n/code.source.json                 | 98 +++++++++----------
 website/i18n/de/code.json                     | 24 ++---
 .../alternatives/screen-studio.mdx            |  2 +-
 website/i18n/es/code.json                     | 24 ++---
 .../alternatives/screen-studio.mdx            |  2 +-
 website/i18n/fr/code.json                     | 24 ++---
 .../alternatives/screen-studio.mdx            |  2 +-
 website/i18n/ja/code.json                     | 24 ++---
 .../alternatives/screen-studio.mdx            |  2 +-
 website/i18n/pt-BR/code.json                  | 24 ++---
 .../alternatives/screen-studio.mdx            |  2 +-
 website/i18n/zh-CN/code.json                  | 24 ++---
 .../alternatives/screen-studio.mdx            |  2 +-
 website/i18n/zh-TW/code.json                  | 24 ++---
 .../alternatives/screen-studio.mdx            |  2 +-
 website/src/components/DemoLoop/index.tsx     |  5 +-
 website/src/components/DemoLoop/labels.ts     |  6 +-
 .../src/components/DemoLoop/styles.module.css |  4 +-
 website/src/components/Films/content.tsx      | 12 +--
 website/src/components/Films/index.tsx        | 56 +++++++++--
 .../src/components/Films/styles.module.css    | 27 +++++
 website/src/lib/demo-loop.ts                  |  4 +-
 .../src/pages/alternatives/screen-studio.mdx  |  2 +-
 23 files changed, 231 insertions(+), 165 deletions(-)

diff --git a/website/i18n/code.source.json b/website/i18n/code.source.json
index e2572a445..1a60f1b29 100644
--- a/website/i18n/code.source.json
+++ b/website/i18n/code.source.json
@@ -1,4 +1,5 @@
 {
+  "appLanguages.line": "Interface in {count} languages: {names}",
   "download.macos.arm.label": "Apple Silicon",
   "download.macos.arm.sublabel": "M1 and newer · .dmg",
   "download.macos.intel.label": "Intel",
@@ -71,34 +72,6 @@
   "home.install.note.windows": "Windows",
   "home.install.note.mac": "Mac",
   "home.install.note.linux": "Linux",
-  "appLanguages.line": "Interface in {count} languages: {names}",
-  "footer.brand.description": "A free, open-source screen recorder and editor. Community-maintained continuation, MIT licensed.",
-  "footer.product.title": "Product",
-  "footer.product.download": "Download",
-  "footer.product.autoZoom": "Auto zoom",
-  "footer.product.captions": "Local captions",
-  "footer.platforms.title": "Platforms",
-  "footer.platforms.windows": "Windows",
-  "footer.platforms.mac": "macOS",
-  "footer.platforms.linux": "Linux",
-  "footer.compare.title": "Compare",
-  "footer.compare.screenStudio": "Screen Studio alternative",
-  "footer.compare.camtasia": "Camtasia alternative",
-  "footer.compare.loom": "Loom alternative",
-  "footer.compare.cap": "OpenScreen vs Cap",
-  "footer.compare.obs": "OpenScreen vs OBS Studio",
-  "footer.project.title": "Project",
-  "footer.project.releases": "Releases",
-  "footer.project.blog": "Blog",
-  "footer.project.faq": "FAQ",
-  "footer.community.title": "Community",
-  "footer.community.contributing": "Contributing",
-  "footer.community.license": "License (MIT)",
-  "footer.bottom.license": "OpenScreen is released under the MIT license. Built by the community — free, forever.",
-  "footer.bottom.lineage": "The official spin-off of the {originalProject} — 39k stars, now archived.",
-  "footer.bottom.lineage.originalProject": "original OpenScreen project",
-  "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.",
@@ -111,7 +84,7 @@
   "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-cutout": "A webcam bubble over a screen recording. Its background is then removed, leaving the speaker in front of the screen.",
+  "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.",
@@ -119,21 +92,6 @@
   "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.",
-  "recreation.style.kicker": "Style",
-  "recreation.style.title": "Swap the background",
-  "recreation.style.sub": "Image, color or gradient behind your recording — no re-shoot.",
-  "recreation.effects.kicker": "Effects",
-  "recreation.effects.title": "Frame it your way",
-  "recreation.effects.sub": "Padding, motion blur, shadow, roundness — every effect composites live.",
-  "recreation.cursor.kicker": "Cursor",
-  "recreation.cursor.title": "A cursor worth watching",
-  "recreation.cursor.sub": "Size, smoothing, motion blur, click bounce — every move reads on screen.",
-  "recreation.timeline.kicker": "Timeline",
-  "recreation.timeline.title": "One click, every zoom placed",
-  "recreation.timeline.sub": "Zooms, speed ramps, trims, comments — each edit lands as a pill on the timeline.",
-  "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.",
   "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.",
@@ -162,17 +120,17 @@
   "films.depth.note.frames.t": "Frames and motion.",
   "films.camera.kicker": "Camera",
   "films.camera.title": "Your camera, your screen, or both.",
-  "films.camera.lead": "One take with a webcam can be {layouts}, and the camera's background can be {removed}, with no green screen.",
+  "films.camera.lead": "One take with a webcam can be {layouts}, and the room behind you can be {blurred}, cut out or replaced on your own computer, with no green screen.",
   "films.camera.lead.layouts": "picture in picture, side by side, stacked or full screen",
-  "films.camera.lead.removed": "removed on your computer",
+  "films.camera.lead.blurred": "blurred",
   "films.camera.tab.layouts": "Layouts",
-  "films.camera.tab.cutout": "Cutout",
+  "films.camera.tab.blur": "Background blur",
   "films.camera.note.layouts": "{t} Picture in picture, dual frame, vertical stack, or no webcam at all.",
   "films.camera.note.layouts.t": "Four layouts.",
   "films.camera.note.full": "{t} Give a stretch of the timeline to the camera: it grows to full screen, then eases back.",
   "films.camera.note.full.t": "Full Camera.",
   "films.camera.note.background": "{t} A segmentation model separates you from the room on your own computer. Nothing is uploaded.",
-  "films.camera.note.background.t": "Cutout, blur or replace.",
+  "films.camera.note.background.t": "Blur, cut out or replace.",
   "films.ship.kicker": "Before it ships",
   "films.ship.title": "Every format. Nothing private.",
   "films.ship.lead": "One take becomes {formats}, and whatever should not be seen stays {blur}.",
@@ -183,6 +141,23 @@
   "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",
+  "recreation.style.kicker": "Style",
+  "recreation.style.title": "Swap the background",
+  "recreation.style.sub": "Image, color or gradient behind your recording — no re-shoot.",
+  "recreation.effects.kicker": "Effects",
+  "recreation.effects.title": "Frame it your way",
+  "recreation.effects.sub": "Padding, motion blur, shadow, roundness — every effect composites live.",
+  "recreation.cursor.kicker": "Cursor",
+  "recreation.cursor.title": "A cursor worth watching",
+  "recreation.cursor.sub": "Size, smoothing, motion blur, click bounce — every move reads on screen.",
+  "recreation.timeline.kicker": "Timeline",
+  "recreation.timeline.title": "One click, every zoom placed",
+  "recreation.timeline.sub": "Zooms, speed ramps, trims, comments — each edit lands as a pill on the timeline.",
+  "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.",
   "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.",
@@ -207,5 +182,30 @@
   "showcase.agent.fact": "bring your own key · off by default · every edit is undoable",
   "showcase.agent.link.docs": "AI editing docs",
   "showcase.agent.link.feature": "How automatic zooms work",
-  "showcase.title": "Recorder, captions, agent, encoder."
+  "showcase.title": "Recorder, captions, agent, encoder.",
+  "footer.brand.description": "A free, open-source screen recorder and editor. Community-maintained continuation, MIT licensed.",
+  "footer.product.title": "Product",
+  "footer.product.download": "Download",
+  "footer.product.autoZoom": "Auto zoom",
+  "footer.product.captions": "Local captions",
+  "footer.platforms.title": "Platforms",
+  "footer.platforms.windows": "Windows",
+  "footer.platforms.mac": "macOS",
+  "footer.platforms.linux": "Linux",
+  "footer.compare.title": "Compare",
+  "footer.compare.screenStudio": "Screen Studio alternative",
+  "footer.compare.camtasia": "Camtasia alternative",
+  "footer.compare.loom": "Loom alternative",
+  "footer.compare.cap": "OpenScreen vs Cap",
+  "footer.compare.obs": "OpenScreen vs OBS Studio",
+  "footer.project.title": "Project",
+  "footer.project.releases": "Releases",
+  "footer.project.blog": "Blog",
+  "footer.project.faq": "FAQ",
+  "footer.community.title": "Community",
+  "footer.community.contributing": "Contributing",
+  "footer.community.license": "License (MIT)",
+  "footer.bottom.license": "OpenScreen is released under the MIT license. Built by the community — free, forever.",
+  "footer.bottom.lineage": "The official spin-off of the {originalProject} — 39k stars, now archived.",
+  "footer.bottom.lineage.originalProject": "original OpenScreen project"
 }
diff --git a/website/i18n/de/code.json b/website/i18n/de/code.json
index 0ceded321..17f209c39 100644
--- a/website/i18n/de/code.json
+++ b/website/i18n/de/code.json
@@ -809,10 +809,6 @@
     "message": "Ein Anmeldeformular wird ausgefüllt. Die Felder für E-Mail und Passwort bleiben beim Tippen unscharf.",
     "description": "Describes a short silent video loop of the app for screen readers."
   },
-  "demoLoop.camera-cutout": {
-    "message": "Eine Webcam-Blase über einer Bildschirmaufnahme. Dann wird ihr Hintergrund entfernt, und die Person steht vor dem Bildschirm.",
-    "description": "Describes a short silent video loop of the app for screen readers."
-  },
   "demoLoop.every-layout": {
     "message": "Eine Aufnahme mit Webcam, die die Layouts durchläuft: Bild-im-Bild, nebeneinander, übereinander, Vollbild-Kamera und zuletzt nur der Bildschirm.",
     "description": "Describes a short silent video loop of the app for screen readers."
@@ -926,20 +922,14 @@
     "message": "Ihre Kamera, Ihr Bildschirm oder beides."
   },
   "films.camera.lead": {
-    "message": "Eine Aufnahme mit Webcam kann {layouts} sein, und der Hintergrund der Kamera kann {removed} werden, ohne Greenscreen."
+    "message": "Eine Aufnahme mit Webcam kann {layouts} sein, und der Raum hinter Ihnen kann auf Ihrem eigenen Computer {blurred}, freigestellt oder ersetzt werden, ohne Greenscreen."
   },
   "films.camera.lead.layouts": {
     "message": "Bild in Bild, nebeneinander, gestapelt oder im Vollbild"
   },
-  "films.camera.lead.removed": {
-    "message": "auf Ihrem Computer entfernt"
-  },
   "films.camera.tab.layouts": {
     "message": "Layouts"
   },
-  "films.camera.tab.cutout": {
-    "message": "Freisteller"
-  },
   "films.camera.note.layouts": {
     "message": "{t} Bild in Bild, Doppelrahmen, vertikal gestapelt oder ganz ohne Webcam."
   },
@@ -956,7 +946,7 @@
     "message": "{t} Ein Segmentierungsmodell trennt Sie auf Ihrem eigenen Computer vom Raum. Nichts wird hochgeladen."
   },
   "films.camera.note.background.t": {
-    "message": "Freistellen, weichzeichnen oder ersetzen."
+    "message": "Weichzeichnen, freistellen oder ersetzen."
   },
   "films.ship.kicker": {
     "message": "Vor dem Versand"
@@ -988,5 +978,15 @@
   "films.label": {
     "message": "Mehr von der App, in Bewegung",
     "description": "Read by screen readers only: names the section of feature videos"
+  },
+  "demoLoop.camera-blur": {
+    "message": "Eine quadratische Webcam-Vignette über einer Bildschirmaufnahme. Die Ansicht fährt heran, während der Raum hinter der Person unscharf wird, und fährt dann zurück.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "films.camera.lead.blurred": {
+    "message": "weichgezeichnet"
+  },
+  "films.camera.tab.blur": {
+    "message": "Hintergrundunschärfe"
   }
 }
diff --git a/website/i18n/de/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx b/website/i18n/de/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
index 4e76407b4..2fb038def 100644
--- a/website/i18n/de/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
+++ b/website/i18n/de/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
@@ -73,7 +73,7 @@ Beide Apps decken Folgendes ab. Nichts davon ist für eine der beiden einzigarti
 
 <DemoLoopPair>
   <DemoLoop name="every-layout" />
-  <DemoLoop name="camera-cutout" />
+  <DemoLoop name="camera-blur" />
 </DemoLoopPair>
 
 ### Export und Automatisierung {#export-and-automation}
diff --git a/website/i18n/es/code.json b/website/i18n/es/code.json
index 828cde1f7..f7b781137 100644
--- a/website/i18n/es/code.json
+++ b/website/i18n/es/code.json
@@ -809,10 +809,6 @@
     "message": "Un formulario de inicio de sesión mientras se rellena. Los campos de correo y contraseña siguen difuminados mientras se escriben.",
     "description": "Describes a short silent video loop of the app for screen readers."
   },
-  "demoLoop.camera-cutout": {
-    "message": "Una burbuja de webcam sobre una grabación de pantalla. Después se elimina su fondo y la persona queda delante de la pantalla.",
-    "description": "Describes a short silent video loop of the app for screen readers."
-  },
   "demoLoop.every-layout": {
     "message": "Una grabación con webcam que recorre los diseños: imagen en imagen, lado a lado, apilado, cámara completa y, por último, solo pantalla.",
     "description": "Describes a short silent video loop of the app for screen readers."
@@ -926,20 +922,14 @@
     "message": "Tu cámara, tu pantalla, o ambas."
   },
   "films.camera.lead": {
-    "message": "Una toma con webcam puede ser {layouts}, y el fondo de la cámara puede {removed}, sin pantalla verde."
+    "message": "Una toma con webcam puede ser {layouts}, y la habitación detrás de ti puede {blurred}, recortarse o reemplazarse en tu propio ordenador, sin pantalla verde."
   },
   "films.camera.lead.layouts": {
     "message": "imagen en imagen, lado a lado, apilada o a pantalla completa"
   },
-  "films.camera.lead.removed": {
-    "message": "eliminarse en tu ordenador"
-  },
   "films.camera.tab.layouts": {
     "message": "Diseños"
   },
-  "films.camera.tab.cutout": {
-    "message": "Recortado"
-  },
   "films.camera.note.layouts": {
     "message": "{t} Imagen en imagen, marco dual, apilado vertical o sin webcam."
   },
@@ -956,7 +946,7 @@
     "message": "{t} Un modelo de segmentación te separa de la habitación en tu propio ordenador. No se sube nada."
   },
   "films.camera.note.background.t": {
-    "message": "Recortar, desenfocar o reemplazar."
+    "message": "Desenfocar, recortar o reemplazar."
   },
   "films.ship.kicker": {
     "message": "Antes de publicar"
@@ -988,5 +978,15 @@
   "films.label": {
     "message": "Más de la app, en movimiento",
     "description": "Read by screen readers only: names the section of feature videos"
+  },
+  "demoLoop.camera-blur": {
+    "message": "Una viñeta cuadrada de webcam sobre una grabación de pantalla. La vista se acerca mientras la habitación detrás de la persona se desenfoca, y luego se aleja.",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "films.camera.lead.blurred": {
+    "message": "desenfocarse"
+  },
+  "films.camera.tab.blur": {
+    "message": "Desenfoque de fondo"
   }
 }
diff --git a/website/i18n/es/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx b/website/i18n/es/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
index 8cfc57296..19c7aad38 100644
--- a/website/i18n/es/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
+++ b/website/i18n/es/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
@@ -73,7 +73,7 @@ Ambas apps cubren lo siguiente. Nada de esto es exclusivo de una sola.
 
 <DemoLoopPair>
   <DemoLoop name="every-layout" />
-  <DemoLoop name="camera-cutout" />
+  <DemoLoop name="camera-blur" />
 </DemoLoopPair>
 
 ### Exportación y automatización {#export-and-automation}
diff --git a/website/i18n/fr/code.json b/website/i18n/fr/code.json
index a25625b60..6ac24eb21 100644
--- a/website/i18n/fr/code.json
+++ b/website/i18n/fr/code.json
@@ -809,10 +809,6 @@
     "message": "Un formulaire de connexion en cours de saisie. Les champs e-mail et mot de passe restent floutés pendant la frappe.",
     "description": "Describes a short silent video loop of the app for screen readers."
   },
-  "demoLoop.camera-cutout": {
-    "message": "Une bulle de webcam sur un enregistrement d'écran. Son arrière-plan est ensuite retiré, et la personne apparaît devant l'écran.",
-    "description": "Describes a short silent video loop of the app for screen readers."
-  },
   "demoLoop.every-layout": {
     "message": "Un enregistrement avec webcam qui passe par les dispositions : incrustation, côte à côte, empilée, caméra plein écran, puis écran seul.",
     "description": "Describes a short silent video loop of the app for screen readers."
@@ -926,20 +922,14 @@
     "message": "Votre caméra, votre écran, ou les deux."
   },
   "films.camera.lead": {
-    "message": "Une prise avec webcam peut passer {layouts}, et l'arrière-plan de la caméra peut être {removed}, sans fond vert."
+    "message": "Une prise avec webcam peut passer {layouts}, et la pièce derrière vous peut être {blurred}, détourée ou remplacée sur votre propre ordinateur, sans fond vert."
   },
   "films.camera.lead.layouts": {
     "message": "en incrustation, côte à côte, empilée ou en plein écran"
   },
-  "films.camera.lead.removed": {
-    "message": "retiré sur votre ordinateur"
-  },
   "films.camera.tab.layouts": {
     "message": "Dispositions"
   },
-  "films.camera.tab.cutout": {
-    "message": "Détouré"
-  },
   "films.camera.note.layouts": {
     "message": "{t} Incrustation d'image, double cadre, empilement vertical, ou pas de webcam du tout."
   },
@@ -956,7 +946,7 @@
     "message": "{t} Un modèle de segmentation vous sépare de la pièce, sur votre propre ordinateur. Rien n'est envoyé."
   },
   "films.camera.note.background.t": {
-    "message": "Détourer, flouter ou remplacer."
+    "message": "Flouter, détourer ou remplacer."
   },
   "films.ship.kicker": {
     "message": "Avant l'envoi"
@@ -988,5 +978,15 @@
   "films.label": {
     "message": "L'app en mouvement, en plus",
     "description": "Read by screen readers only: names the section of feature videos"
+  },
+  "films.camera.lead.blurred": {
+    "message": "floutée"
+  },
+  "films.camera.tab.blur": {
+    "message": "Flou d'arrière-plan"
+  },
+  "demoLoop.camera-blur": {
+    "message": "Une vignette de webcam carrée sur un enregistrement d'écran. La vue s'en rapproche pendant que la pièce derrière la personne se floute, puis recule.",
+    "description": "Describes a short silent video loop of the app for screen readers."
   }
 }
diff --git a/website/i18n/fr/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx b/website/i18n/fr/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
index ce0eb8400..ba2dcf83c 100644
--- a/website/i18n/fr/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
+++ b/website/i18n/fr/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
@@ -73,7 +73,7 @@ Les deux applications couvrent les points suivants. Rien ici n'est propre à l'u
 
 <DemoLoopPair>
   <DemoLoop name="every-layout" />
-  <DemoLoop name="camera-cutout" />
+  <DemoLoop name="camera-blur" />
 </DemoLoopPair>
 
 ### Export et automatisation {#export-and-automation}
diff --git a/website/i18n/ja/code.json b/website/i18n/ja/code.json
index 7770a2cba..582b5e8f1 100644
--- a/website/i18n/ja/code.json
+++ b/website/i18n/ja/code.json
@@ -809,10 +809,6 @@
     "message": "ログインフォームへの入力中。メールアドレスとパスワードの欄は、入力している間ぼかされたままです。",
     "description": "Describes a short silent video loop of the app for screen readers."
   },
-  "demoLoop.camera-cutout": {
-    "message": "画面録画の上に重なったウェブカメラのバブル。その後背景が取り除かれ、話し手が画面の前に立って見えます。",
-    "description": "Describes a short silent video loop of the app for screen readers."
-  },
   "demoLoop.every-layout": {
     "message": "ウェブカメラ付きの 1 つの録画で、レイアウトを順に切り替えます。ピクチャーインピクチャー、横並び、縦並び、カメラ全画面、最後に画面のみ。",
     "description": "Describes a short silent video loop of the app for screen readers."
@@ -926,20 +922,14 @@
     "message": "カメラも、画面も、その両方も。"
   },
   "films.camera.lead": {
-    "message": "ウェブカメラ付きのテイクは{layouts}にでき、カメラの背景は{removed}できます。グリーンバックは不要です。"
+    "message": "ウェブカメラ付きのテイクは{layouts}にでき、背後の部屋はお使いのコンピューター上で{blurred}、切り抜いたり、差し替えたりできます。グリーンバックは不要です。"
   },
   "films.camera.lead.layouts": {
     "message": "ピクチャーインピクチャ、横並び、縦並び、全画面"
   },
-  "films.camera.lead.removed": {
-    "message": "お使いのコンピューター上で削除"
-  },
   "films.camera.tab.layouts": {
     "message": "レイアウト"
   },
-  "films.camera.tab.cutout": {
-    "message": "切り抜き"
-  },
   "films.camera.note.layouts": {
     "message": "{t} ピクチャーインピクチャ、デュアルフレーム、縦並び、またはウェブカメラなし。"
   },
@@ -956,7 +946,7 @@
     "message": "{t} セグメンテーションモデルが、お使いのコンピューター上であなたと部屋を切り分けます。何もアップロードされません。"
   },
   "films.camera.note.background.t": {
-    "message": "切り抜き、ぼかし、差し替え。"
+    "message": "ぼかし、切り抜き、差し替え。"
   },
   "films.ship.kicker": {
     "message": "公開の前に"
@@ -988,5 +978,15 @@
   "films.label": {
     "message": "動くアプリをもっと",
     "description": "Read by screen readers only: names the section of feature videos"
+  },
+  "demoLoop.camera-blur": {
+    "message": "画面録画の上の正方形のウェブカメラ枠。話し手の背後の部屋がぼけていく間にカメラが寄り、その後引いていきます。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "films.camera.lead.blurred": {
+    "message": "ぼかしたり"
+  },
+  "films.camera.tab.blur": {
+    "message": "背景ぼかし"
   }
 }
diff --git a/website/i18n/ja/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx b/website/i18n/ja/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
index c31f3c717..8585c9062 100644
--- a/website/i18n/ja/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
+++ b/website/i18n/ja/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
@@ -73,7 +73,7 @@ OpenScreen は、Windows・macOS・Linux 向けの無料の MIT ライセンス
 
 <DemoLoopPair>
   <DemoLoop name="every-layout" />
-  <DemoLoop name="camera-cutout" />
+  <DemoLoop name="camera-blur" />
 </DemoLoopPair>
 
 ### エクスポートと自動化 {#export-and-automation}
diff --git a/website/i18n/pt-BR/code.json b/website/i18n/pt-BR/code.json
index cb3c1c02a..22d8f5e8d 100644
--- a/website/i18n/pt-BR/code.json
+++ b/website/i18n/pt-BR/code.json
@@ -809,10 +809,6 @@
     "message": "Um formulário de login sendo preenchido. Os campos de e-mail e senha continuam desfocados enquanto são digitados.",
     "description": "Describes a short silent video loop of the app for screen readers."
   },
-  "demoLoop.camera-cutout": {
-    "message": "Uma bolha de webcam sobre uma gravação de tela. Em seguida o fundo dela é removido, deixando a pessoa na frente da tela.",
-    "description": "Describes a short silent video loop of the app for screen readers."
-  },
   "demoLoop.every-layout": {
     "message": "Uma gravação com webcam passando pelos layouts: picture-in-picture, lado a lado, empilhado, câmera em tela cheia e, por fim, só a tela.",
     "description": "Describes a short silent video loop of the app for screen readers."
@@ -926,20 +922,14 @@
     "message": "Sua câmera, sua tela, ou as duas."
   },
   "films.camera.lead": {
-    "message": "Uma tomada com webcam pode ficar {layouts}, e o fundo da câmera pode ser {removed}, sem tela verde."
+    "message": "Uma tomada com webcam pode ficar {layouts}, e o ambiente atrás de você pode ser {blurred}, recortado ou substituído no seu próprio computador, sem tela verde."
   },
   "films.camera.lead.layouts": {
     "message": "em picture in picture, lado a lado, empilhada ou em tela cheia"
   },
-  "films.camera.lead.removed": {
-    "message": "removido no seu computador"
-  },
   "films.camera.tab.layouts": {
     "message": "Layouts"
   },
-  "films.camera.tab.cutout": {
-    "message": "Recorte"
-  },
   "films.camera.note.layouts": {
     "message": "{t} Picture in Picture, quadro duplo, empilhamento vertical ou nenhuma webcam."
   },
@@ -956,7 +946,7 @@
     "message": "{t} Um modelo de segmentação separa você do ambiente no seu próprio computador. Nada é enviado."
   },
   "films.camera.note.background.t": {
-    "message": "Recortar, desfocar ou substituir."
+    "message": "Desfocar, recortar ou substituir."
   },
   "films.ship.kicker": {
     "message": "Antes de publicar"
@@ -988,5 +978,15 @@
   "films.label": {
     "message": "Mais do app, em movimento",
     "description": "Read by screen readers only: names the section of feature videos"
+  },
+  "films.camera.lead.blurred": {
+    "message": "desfocado"
+  },
+  "films.camera.tab.blur": {
+    "message": "Desfoque de fundo"
+  },
+  "demoLoop.camera-blur": {
+    "message": "Uma vinheta quadrada de webcam sobre uma gravação de tela. A visualização se aproxima enquanto o ambiente atrás da pessoa fica desfocado, e depois se afasta.",
+    "description": "Describes a short silent video loop of the app for screen readers."
   }
 }
diff --git a/website/i18n/pt-BR/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx b/website/i18n/pt-BR/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
index 653b63e38..348adc456 100644
--- a/website/i18n/pt-BR/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
+++ b/website/i18n/pt-BR/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
@@ -73,7 +73,7 @@ Os dois apps cobrem o seguinte. Nada disso é exclusivo de um ou outro.
 
 <DemoLoopPair>
   <DemoLoop name="every-layout" />
-  <DemoLoop name="camera-cutout" />
+  <DemoLoop name="camera-blur" />
 </DemoLoopPair>
 
 ### Exportação e automação {#export-and-automation}
diff --git a/website/i18n/zh-CN/code.json b/website/i18n/zh-CN/code.json
index d52a34e5f..301e9533a 100644
--- a/website/i18n/zh-CN/code.json
+++ b/website/i18n/zh-CN/code.json
@@ -809,10 +809,6 @@
     "message": "正在填写的登录表单。输入时，邮箱和密码字段始终保持模糊。",
     "description": "Describes a short silent video loop of the app for screen readers."
   },
-  "demoLoop.camera-cutout": {
-    "message": "屏幕录制上方的摄像头气泡。随后其背景被移除，人物出现在屏幕前方。",
-    "description": "Describes a short silent video loop of the app for screen readers."
-  },
   "demoLoop.every-layout": {
     "message": "一段带摄像头的录制依次切换布局：画中画、左右并排、上下堆叠、摄像头全屏，最后仅显示屏幕。",
     "description": "Describes a short silent video loop of the app for screen readers."
@@ -926,20 +922,14 @@
     "message": "你的摄像头、你的屏幕，或两者兼有。"
   },
   "films.camera.lead": {
-    "message": "带摄像头的素材可以{layouts}，摄像头背景也可以{removed}，无需绿幕。"
+    "message": "带摄像头的素材可以{layouts}，你身后的房间也可以在你自己的电脑上{blurred}、抠除或替换，无需绿幕。"
   },
   "films.camera.lead.layouts": {
     "message": "画中画、左右并排、上下堆叠或全屏"
   },
-  "films.camera.lead.removed": {
-    "message": "在你的电脑上移除"
-  },
   "films.camera.tab.layouts": {
     "message": "布局"
   },
-  "films.camera.tab.cutout": {
-    "message": "抠图"
-  },
   "films.camera.note.layouts": {
     "message": "{t} 画中画、双画框、垂直堆叠，或完全不用摄像头。"
   },
@@ -956,7 +946,7 @@
     "message": "{t} 分割模型在你自己的电脑上把你和房间分开，什么都不会上传。"
   },
   "films.camera.note.background.t": {
-    "message": "抠图、模糊或替换。"
+    "message": "虚化、抠图或替换。"
   },
   "films.ship.kicker": {
     "message": "发布之前"
@@ -988,5 +978,15 @@
   "films.label": {
     "message": "更多应用功能，动起来看",
     "description": "Read by screen readers only: names the section of feature videos"
+  },
+  "demoLoop.camera-blur": {
+    "message": "屏幕录制上的方形摄像头小窗。画面推近小窗，同时人物身后的房间变得模糊，随后再拉远。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "films.camera.lead.blurred": {
+    "message": "虚化"
+  },
+  "films.camera.tab.blur": {
+    "message": "背景虚化"
   }
 }
diff --git a/website/i18n/zh-CN/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx b/website/i18n/zh-CN/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
index 802e36057..db3c2b135 100644
--- a/website/i18n/zh-CN/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
+++ b/website/i18n/zh-CN/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
@@ -73,7 +73,7 @@ OpenScreen 是一款面向 Windows、macOS 和 Linux 的免费 Screen Studio 替
 
 <DemoLoopPair>
   <DemoLoop name="every-layout" />
-  <DemoLoop name="camera-cutout" />
+  <DemoLoop name="camera-blur" />
 </DemoLoopPair>
 
 ### 导出与自动化 {#export-and-automation}
diff --git a/website/i18n/zh-TW/code.json b/website/i18n/zh-TW/code.json
index 256d5f489..b47a22ed0 100644
--- a/website/i18n/zh-TW/code.json
+++ b/website/i18n/zh-TW/code.json
@@ -809,10 +809,6 @@
     "message": "正在填寫的登入表單。輸入時，電子郵件和密碼欄位始終保持模糊。",
     "description": "Describes a short silent video loop of the app for screen readers."
   },
-  "demoLoop.camera-cutout": {
-    "message": "螢幕錄製上方的網路攝影機泡泡。接著其背景被移除，人物出現在螢幕前方。",
-    "description": "Describes a short silent video loop of the app for screen readers."
-  },
   "demoLoop.every-layout": {
     "message": "一段含網路攝影機的錄製依序切換版面配置：子母畫面、左右並排、上下堆疊、攝影機全螢幕，最後僅顯示螢幕。",
     "description": "Describes a short silent video loop of the app for screen readers."
@@ -926,20 +922,14 @@
     "message": "你的攝影機、你的螢幕，或兩者兼具。"
   },
   "films.camera.lead": {
-    "message": "含網路攝影機的素材可以{layouts}，攝影機背景也可以{removed}，不需要綠幕。"
+    "message": "含網路攝影機的素材可以{layouts}，你身後的房間也可以在你自己的電腦上{blurred}、去背或替換，不需要綠幕。"
   },
   "films.camera.lead.layouts": {
     "message": "子母畫面、左右並排、上下堆疊或全螢幕"
   },
-  "films.camera.lead.removed": {
-    "message": "在你的電腦上移除"
-  },
   "films.camera.tab.layouts": {
     "message": "版面配置"
   },
-  "films.camera.tab.cutout": {
-    "message": "去背"
-  },
   "films.camera.note.layouts": {
     "message": "{t} 子母畫面、雙畫框、垂直堆疊，或完全不用網路攝影機。"
   },
@@ -956,7 +946,7 @@
     "message": "{t} 分割模型在你自己的電腦上把你和房間分開，不會上傳任何東西。"
   },
   "films.camera.note.background.t": {
-    "message": "去背、模糊或替換。"
+    "message": "模糊、去背或替換。"
   },
   "films.ship.kicker": {
     "message": "發布之前"
@@ -988,5 +978,15 @@
   "films.label": {
     "message": "更多應用功能，動起來看",
     "description": "Read by screen readers only: names the section of feature videos"
+  },
+  "demoLoop.camera-blur": {
+    "message": "螢幕錄製上的方形攝影機小窗。畫面推近小窗，同時人物身後的房間變得模糊，接著再拉遠。",
+    "description": "Describes a short silent video loop of the app for screen readers."
+  },
+  "films.camera.lead.blurred": {
+    "message": "模糊化"
+  },
+  "films.camera.tab.blur": {
+    "message": "背景模糊"
   }
 }
diff --git a/website/i18n/zh-TW/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx b/website/i18n/zh-TW/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
index c4b3ac4ee..b2367f2c1 100644
--- a/website/i18n/zh-TW/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
+++ b/website/i18n/zh-TW/docusaurus-plugin-content-pages/alternatives/screen-studio.mdx
@@ -73,7 +73,7 @@ OpenScreen 是免費、MIT 授權，支援 Windows、macOS 與 Linux 的 Screen
 
 <DemoLoopPair>
   <DemoLoop name="every-layout" />
-  <DemoLoop name="camera-cutout" />
+  <DemoLoop name="camera-blur" />
 </DemoLoopPair>
 
 ### 匯出與自動化 {#export-and-automation}
diff --git a/website/src/components/DemoLoop/index.tsx b/website/src/components/DemoLoop/index.tsx
index dbd7c94e5..324098b86 100644
--- a/website/src/components/DemoLoop/index.tsx
+++ b/website/src/components/DemoLoop/index.tsx
@@ -44,6 +44,8 @@ type Props = {
 	onEnded?: () => void;
 	/** Called every frame while playing, with the share of the clip played. */
 	onProgress?: (fraction: number) => void;
+	/** Called once the first frame is decoded, so a stage can fade to it. */
+	onReady?: () => void;
 };
 
 /** Far enough ahead that the poster is there before the box is. */
@@ -60,7 +62,7 @@ function motionAllowed(): boolean {
 	}
 }
 
-export default function DemoLoop({ name, loop = true, onEnded, onProgress }: Props) {
+export default function DemoLoop({ name, loop = true, onEnded, onProgress, onReady }: Props) {
 	const box = useRef<HTMLDivElement>(null);
 	const video = useRef<HTMLVideoElement>(null);
 	const [height, setHeight] = useState<LoopHeight | null>(null);
@@ -155,6 +157,7 @@ export default function DemoLoop({ name, loop = true, onEnded, onProgress }: Pro
 					onPlay={() => setPlaying(true)}
 					onPause={() => setPlaying(false)}
 					onEnded={onEnded}
+					onLoadedData={onReady}
 				>
 					{height &&
 						loopSources(name, height).map((s) => <source key={s.src} src={s.src} type={s.type} />)}
diff --git a/website/src/components/DemoLoop/labels.ts b/website/src/components/DemoLoop/labels.ts
index 42addc509..e4d5902ca 100644
--- a/website/src/components/DemoLoop/labels.ts
+++ b/website/src/components/DemoLoop/labels.ts
@@ -85,12 +85,12 @@ export function loopLabel(name: LoopName): string {
 				message:
 					"A sign-in form being filled in. The email and password fields stay blurred while they are typed.",
 			});
-		case "camera-cutout":
+		case "camera-blur":
 			return translate({
-				id: "demoLoop.camera-cutout",
+				id: "demoLoop.camera-blur",
 				description: LOOP,
 				message:
-					"A webcam bubble over a screen recording. Its background is then removed, leaving the speaker in front of the screen.",
+					"A square webcam vignette over a screen recording. The view moves in on it while the room behind the speaker blurs, then pulls back.",
 			});
 		case "every-layout":
 			return translate({
diff --git a/website/src/components/DemoLoop/styles.module.css b/website/src/components/DemoLoop/styles.module.css
index c1b8f8838..1d9f2176a 100644
--- a/website/src/components/DemoLoop/styles.module.css
+++ b/website/src/components/DemoLoop/styles.module.css
@@ -21,10 +21,12 @@
 	object-fit: cover;
 }
 
+/* Top right: the bottom-right corner is where a webcam vignette sits. */
 .toggle {
 	position: absolute;
+	z-index: 2;
 	right: 10px;
-	bottom: 10px;
+	top: 10px;
 	display: grid;
 	place-items: center;
 	width: 34px;
diff --git a/website/src/components/Films/content.tsx b/website/src/components/Films/content.tsx
index 9247d7b42..d6ee70412 100644
--- a/website/src/components/Films/content.tsx
+++ b/website/src/components/Films/content.tsx
@@ -189,13 +189,11 @@ export function getBlocks(): Block[] {
 								picture in picture, side by side, stacked or full screen
 							</Translate>,
 						),
-						removed: b(
-							<Translate id="films.camera.lead.removed">removed on your computer</Translate>,
-						),
+						blurred: b(<Translate id="films.camera.lead.blurred">blurred</Translate>),
 					}}
 				>
 					{
-						"One take with a webcam can be {layouts}, and the camera's background can be {removed}, with no green screen."
+						"One take with a webcam can be {layouts}, and the room behind you can be {blurred}, cut out or replaced on your own computer, with no green screen."
 					}
 				</Translate>
 			),
@@ -205,8 +203,8 @@ export function getBlocks(): Block[] {
 					loop: "every-layout",
 				},
 				{
-					label: translate({ id: "films.camera.tab.cutout", message: "Cutout" }),
-					loop: "camera-cutout",
+					label: translate({ id: "films.camera.tab.blur", message: "Background blur" }),
+					loop: "camera-blur",
 				},
 			],
 			notes: [
@@ -231,7 +229,7 @@ export function getBlocks(): Block[] {
 					id="films.camera.note.background"
 					values={{
 						t: b(
-							<Translate id="films.camera.note.background.t">Cutout, blur or replace.</Translate>,
+							<Translate id="films.camera.note.background.t">Blur, cut out or replace.</Translate>,
 						),
 					}}
 				>
diff --git a/website/src/components/Films/index.tsx b/website/src/components/Films/index.tsx
index 9aa6eda76..3c3199d3c 100644
--- a/website/src/components/Films/index.tsx
+++ b/website/src/components/Films/index.tsx
@@ -11,7 +11,7 @@
 
 import { translate } from "@docusaurus/Translate";
 import Heading from "@theme/Heading";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import DemoLoop from "../DemoLoop";
 import { type Block, getBlocks, getPair } from "./content";
@@ -19,9 +19,11 @@ import styles from "./styles.module.css";
 
 function Stage({ block }: { block: Block }) {
 	const [index, setIndex] = useState(0);
+	// The loop being left, kept on top while the next one loads, then faded out.
+	const [prev, setPrev] = useState<number | null>(null);
+	const [fading, setFading] = useState(false);
 	const bars = useRef<(HTMLSpanElement | null)[]>([]);
 	const many = block.tabs.length > 1;
-	const current = block.tabs[index];
 
 	// Straight to the DOM: a state update per frame would re-render the block.
 	const onProgress = useCallback(
@@ -29,10 +31,36 @@ function Stage({ block }: { block: Block }) {
 		[index],
 	);
 	const go = (i: number) => {
+		if (i === index) return;
 		bars.current.forEach((el) => el?.style.setProperty("--p", "0"));
+		setPrev(index);
+		setFading(false);
 		setIndex(i);
 	};
 
+	// Without a first frame (reduced motion fetches nothing until play), fade anyway.
+	useEffect(() => {
+		if (prev === null) return;
+		const t = window.setTimeout(() => setFading(true), 900);
+		return () => window.clearTimeout(t);
+	}, [prev]);
+
+	// Drop the outgoing layer once its fade (0.6 s in the CSS) is over. A timer,
+	// not transitionend: the layer's descendants transition too, and an event
+	// from any of them ended the fade early.
+	useEffect(() => {
+		if (!fading || prev === null) return;
+		const t = window.setTimeout(() => setPrev(null), 700);
+		return () => window.clearTimeout(t);
+	}, [fading, prev]);
+
+	// Both layers are keyed by their loop, so the outgoing one keeps its last
+	// frame instead of remounting from the start.
+	const layers = [
+		...(prev !== null && prev !== index ? [{ i: prev, out: true }] : []),
+		{ i: index, out: false },
+	];
+
 	return (
 		<div className={styles.stage}>
 			<span className={styles.glow} />
@@ -62,18 +90,26 @@ function Stage({ block }: { block: Block }) {
 				</div>
 			)}
 			<div
-				className={styles.frame}
+				className={`${styles.frame} ${styles.layers}`}
 				id={`${block.id}-panel`}
 				role={many ? "tabpanel" : undefined}
 				aria-labelledby={many ? `${block.id}-tab-${index}` : undefined}
 			>
-				<DemoLoop
-					key={current.loop}
-					name={current.loop}
-					loop={!many}
-					onProgress={many ? onProgress : undefined}
-					onEnded={many ? () => go((index + 1) % block.tabs.length) : undefined}
-				/>
+				{layers.map(({ i, out }) => (
+					<div
+						key={block.tabs[i].loop}
+						className={`${styles.layer} ${out ? styles.outgoing : ""} ${out && fading ? styles.gone : ""}`}
+						aria-hidden={out || undefined}
+					>
+						<DemoLoop
+							name={block.tabs[i].loop}
+							loop={!many}
+							onProgress={!out && many ? onProgress : undefined}
+							onEnded={!out && many ? () => go((index + 1) % block.tabs.length) : undefined}
+							onReady={!out ? () => setFading(true) : undefined}
+						/>
+					</div>
+				))}
 			</div>
 		</div>
 	);
diff --git a/website/src/components/Films/styles.module.css b/website/src/components/Films/styles.module.css
index f2803426b..52fde18f4 100644
--- a/website/src/components/Films/styles.module.css
+++ b/website/src/components/Films/styles.module.css
@@ -105,6 +105,33 @@
 	border-radius: 0;
 }
 
+/* Loops on a stage are stacked: the one being left stays on top, holding its
+   last frame, until the next has a frame of its own, then dissolves. */
+.layers {
+	display: grid;
+}
+
+.layer {
+	grid-area: 1 / 1;
+	min-width: 0;
+}
+
+.outgoing {
+	z-index: 1;
+	opacity: 1;
+	transition: opacity 0.6s ease;
+}
+
+.gone {
+	opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.outgoing {
+		transition-duration: 0.01s;
+	}
+}
+
 /* ---- tabs ---- */
 
 .tabs {
diff --git a/website/src/lib/demo-loop.ts b/website/src/lib/demo-loop.ts
index da9a64e20..834c91477 100644
--- a/website/src/lib/demo-loop.ts
+++ b/website/src/lib/demo-loop.ts
@@ -9,7 +9,7 @@
  * their `immutable` cache header.
  */
 
-export const LOOP_BASE = "https://media.getopenscreen.com/loops/2026-10";
+export const LOOP_BASE = "https://media.getopenscreen.com/loops/2026-10b";
 
 export const LOOP_NAMES = [
 	"classic-zoom",
@@ -22,7 +22,7 @@ export const LOOP_NAMES = [
 	"background-picker",
 	"every-format",
 	"sensitive-data-mask",
-	"camera-cutout",
+	"camera-blur",
 	"every-layout",
 	"device-frames",
 	"animated-backgrounds",
diff --git a/website/src/pages/alternatives/screen-studio.mdx b/website/src/pages/alternatives/screen-studio.mdx
index 005585e05..260f523c0 100644
--- a/website/src/pages/alternatives/screen-studio.mdx
+++ b/website/src/pages/alternatives/screen-studio.mdx
@@ -73,7 +73,7 @@ Both apps cover the following. None of it is unique to either one.
 
 <DemoLoopPair>
   <DemoLoop name="every-layout" />
-  <DemoLoop name="camera-cutout" />
+  <DemoLoop name="camera-blur" />
 </DemoLoopPair>
 
 ### Export and automation

From 56b50d267fbb9e5bf08a8ce5e733e379fc591fa0 Mon Sep 17 00:00:00 2001
From: Etienne Lescot <etiennelescot@gmail.com>
Date: Fri, 2 Oct 2026 13:49:45 +0200
Subject: [PATCH 5/8] fix(website): give the format-and-blur block a title that
 reads as a sentence

---
 website/i18n/code.source.json            | 6 +++---
 website/i18n/de/code.json                | 2 +-
 website/i18n/es/code.json                | 2 +-
 website/i18n/fr/code.json                | 2 +-
 website/i18n/ja/code.json                | 2 +-
 website/i18n/pt-BR/code.json             | 2 +-
 website/i18n/zh-CN/code.json             | 2 +-
 website/i18n/zh-TW/code.json             | 2 +-
 website/src/components/Films/content.tsx | 5 ++++-
 9 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/website/i18n/code.source.json b/website/i18n/code.source.json
index 1a60f1b29..442df5583 100644
--- a/website/i18n/code.source.json
+++ b/website/i18n/code.source.json
@@ -132,7 +132,7 @@
   "films.camera.note.background": "{t} A segmentation model separates you from the room on your own computer. Nothing is uploaded.",
   "films.camera.note.background.t": "Blur, cut out or replace.",
   "films.ship.kicker": "Before it ships",
-  "films.ship.title": "Every format. Nothing private.",
+  "films.ship.title": "Fit any format. Blur what should not be seen.",
   "films.ship.lead": "One take becomes {formats}, and whatever should not be seen stays {blur}.",
   "films.ship.lead.formats": "wide, square or vertical",
   "films.ship.lead.blur": "under a blur",
@@ -141,8 +141,6 @@
   "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",
   "recreation.style.kicker": "Style",
   "recreation.style.title": "Swap the background",
   "recreation.style.sub": "Image, color or gradient behind your recording — no re-shoot.",
@@ -158,6 +156,8 @@
   "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.",
+  "editor.skipLink": "Skip the editor — go to downloads",
+  "editor.title": "Five things you will actually do",
   "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.",
diff --git a/website/i18n/de/code.json b/website/i18n/de/code.json
index 17f209c39..64be02637 100644
--- a/website/i18n/de/code.json
+++ b/website/i18n/de/code.json
@@ -952,7 +952,7 @@
     "message": "Vor dem Versand"
   },
   "films.ship.title": {
-    "message": "Jedes Format. Nichts Privates."
+    "message": "Für jedes Format zuschneiden. Unscharf machen, was niemand sehen soll."
   },
   "films.ship.lead": {
     "message": "Aus einer Aufnahme wird {formats}, und was nicht gesehen werden soll, bleibt {blur}."
diff --git a/website/i18n/es/code.json b/website/i18n/es/code.json
index f7b781137..256e4cf8c 100644
--- a/website/i18n/es/code.json
+++ b/website/i18n/es/code.json
@@ -952,7 +952,7 @@
     "message": "Antes de publicar"
   },
   "films.ship.title": {
-    "message": "Todos los formatos. Nada privado."
+    "message": "Adáptalo a cualquier formato. Difumina lo que no debe verse."
   },
   "films.ship.lead": {
     "message": "Una toma se convierte en {formats}, y lo que no debe verse queda {blur}."
diff --git a/website/i18n/fr/code.json b/website/i18n/fr/code.json
index 6ac24eb21..1a8bb2064 100644
--- a/website/i18n/fr/code.json
+++ b/website/i18n/fr/code.json
@@ -952,7 +952,7 @@
     "message": "Avant l'envoi"
   },
   "films.ship.title": {
-    "message": "Tous les formats. Rien de privé."
+    "message": "Adaptez à tous les formats. Floutez ce qui ne doit pas se voir."
   },
   "films.ship.lead": {
     "message": "Une prise devient {formats}, et ce qui ne doit pas être vu reste {blur}."
diff --git a/website/i18n/ja/code.json b/website/i18n/ja/code.json
index 582b5e8f1..4baf292e2 100644
--- a/website/i18n/ja/code.json
+++ b/website/i18n/ja/code.json
@@ -952,7 +952,7 @@
     "message": "公開の前に"
   },
   "films.ship.title": {
-    "message": "どんな形式でも。プライベートは見せない。"
+    "message": "どんな形式にも合わせて。見せたくないものはぼかして。"
   },
   "films.ship.lead": {
     "message": "1 つのテイクが{formats}になり、見せたくないものは{blur}。"
diff --git a/website/i18n/pt-BR/code.json b/website/i18n/pt-BR/code.json
index 22d8f5e8d..f5d4397b4 100644
--- a/website/i18n/pt-BR/code.json
+++ b/website/i18n/pt-BR/code.json
@@ -952,7 +952,7 @@
     "message": "Antes de publicar"
   },
   "films.ship.title": {
-    "message": "Todos os formatos. Nada privado."
+    "message": "Adapte a qualquer formato. Desfoque o que não deve aparecer."
   },
   "films.ship.lead": {
     "message": "Uma tomada vira {formats}, e o que não deve aparecer fica {blur}."
diff --git a/website/i18n/zh-CN/code.json b/website/i18n/zh-CN/code.json
index 301e9533a..a5e7d5337 100644
--- a/website/i18n/zh-CN/code.json
+++ b/website/i18n/zh-CN/code.json
@@ -952,7 +952,7 @@
     "message": "发布之前"
   },
   "films.ship.title": {
-    "message": "任何格式，不露隐私。"
+    "message": "适配任何格式，模糊不该露出的内容。"
   },
   "films.ship.lead": {
     "message": "一段素材可以变成{formats}，不该被看到的内容始终{blur}。"
diff --git a/website/i18n/zh-TW/code.json b/website/i18n/zh-TW/code.json
index b47a22ed0..2382e7be3 100644
--- a/website/i18n/zh-TW/code.json
+++ b/website/i18n/zh-TW/code.json
@@ -952,7 +952,7 @@
     "message": "發布之前"
   },
   "films.ship.title": {
-    "message": "任何格式，不露隱私。"
+    "message": "適配任何格式，模糊不該露出的內容。"
   },
   "films.ship.lead": {
     "message": "一段素材可以變成{formats}，不該被看到的內容始終{blur}。"
diff --git a/website/src/components/Films/content.tsx b/website/src/components/Films/content.tsx
index d6ee70412..f9fb8fb94 100644
--- a/website/src/components/Films/content.tsx
+++ b/website/src/components/Films/content.tsx
@@ -246,7 +246,10 @@ export function getPair(): PairBlock {
 	return {
 		id: "ship",
 		kicker: translate({ id: "films.ship.kicker", message: "Before it ships" }),
-		title: translate({ id: "films.ship.title", message: "Every format. Nothing private." }),
+		title: translate({
+			id: "films.ship.title",
+			message: "Fit any format. Blur what should not be seen.",
+		}),
 		lead: (
 			<Translate
 				id="films.ship.lead"

From 49b0f0df36bdbc2e803a21326e435c32267c4b6d Mon Sep 17 00:00:00 2001
From: Etienne Lescot <etiennelescot@gmail.com>
Date: Fri, 2 Oct 2026 13:51:48 +0200
Subject: [PATCH 6/8] fix(website): an agent claim that stands on its own, and
 du throughout the German films copy

"Or say which parts to cut." answered a band that no longer sits before it,
and the film beside it asks for zooms, not cuts. The German films strings
said Sie where the rest of the German site says du.
---
 website/i18n/code.source.json              | 54 +++++++++++-----------
 website/i18n/de/code.json                  | 24 +++++-----
 website/i18n/es/code.json                  |  2 +-
 website/i18n/fr/code.json                  |  2 +-
 website/i18n/ja/code.json                  |  2 +-
 website/i18n/pt-BR/code.json               |  2 +-
 website/i18n/zh-CN/code.json               |  2 +-
 website/i18n/zh-TW/code.json               |  2 +-
 website/src/components/Showcase/content.ts |  5 +-
 9 files changed, 49 insertions(+), 46 deletions(-)

diff --git a/website/i18n/code.source.json b/website/i18n/code.source.json
index 442df5583..160006266 100644
--- a/website/i18n/code.source.json
+++ b/website/i18n/code.source.json
@@ -72,6 +72,8 @@
   "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.",
@@ -92,6 +94,31 @@
   "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.",
+  "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.",
+  "showcase.record.fact": "ScreenCaptureKit · Windows Graphics Capture · PipeWire · system audio without an extra driver",
+  "showcase.record.link.docs": "Screen recording docs",
+  "showcase.record.label": "A drawing of the recorder: two capture targets side by side, Display 1 selected and a window titled Terminal beside it, then the settings for the take — ScreenCaptureKit, system audio, 1920 × 1080 at 60 fps — a microphone and a system-audio toggle, and a Start recording button.",
+  "showcase.export.kicker": "export",
+  "showcase.export.claim": "Then it writes the file.",
+  "showcase.export.body": "MP4 from 720p up to source, at 24, 30 or 60, in H.264 — or a GIF. The encode runs on your machine and counts frames while it does. No queue, no account, no watermark, and the file is on disk when the bar fills.",
+  "showcase.export.fact": "H.264 · 24, 30, 60 fps · no watermark",
+  "showcase.export.link.docs": "Video export docs",
+  "showcase.export.label": "A drawing of the export panel: recording-1783066227227.mp4 going out as MP4 at 1080p and 60 fps, with the quality and frame rate rows above a progress bar 62 percent along reading frame 1 488 of 2 400, writing to the Movies folder.",
+  "showcase.captions.kicker": "captions",
+  "showcase.captions.claim": "Transcription runs on your machine.",
+  "showcase.captions.body": "whisper.cpp ships with the app, and the model downloads once on first use — after that it works with the network off. The audio never leaves the laptop, and what comes back is editable text: set the typeface, the size, the color and the position, then burn it into the render.",
+  "showcase.captions.fact": "whisper.cpp · 100 languages · offline after first run",
+  "showcase.captions.link.docs": "Captions and transcript docs",
+  "showcase.captions.link.feature": "How local captions compare",
+  "showcase.agent.kicker": "agent",
+  "showcase.agent.claim": "Describe the edit. The agent makes it.",
+  "showcase.agent.body": "The wizard further up this page places zooms by watching where your cursor went. The agent goes further: it reads the actual transcript and the actual timeline, so it answers with timecodes you can go and check — which spans it will cut, and how much that saves. Every edit it makes is an ordinary undoable one, and it needs a provider key you supply. Nothing runs until you connect one.",
+  "showcase.agent.fact": "bring your own key · off by default · every edit is undoable",
+  "showcase.agent.link.docs": "AI editing docs",
+  "showcase.agent.link.feature": "How automatic zooms work",
+  "showcase.title": "Recorder, captions, agent, encoder.",
   "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.",
@@ -156,33 +183,6 @@
   "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.",
-  "editor.skipLink": "Skip the editor — go to downloads",
-  "editor.title": "Five things you will actually do",
-  "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.",
-  "showcase.record.fact": "ScreenCaptureKit · Windows Graphics Capture · PipeWire · system audio without an extra driver",
-  "showcase.record.link.docs": "Screen recording docs",
-  "showcase.record.label": "A drawing of the recorder: two capture targets side by side, Display 1 selected and a window titled Terminal beside it, then the settings for the take — ScreenCaptureKit, system audio, 1920 × 1080 at 60 fps — a microphone and a system-audio toggle, and a Start recording button.",
-  "showcase.export.kicker": "export",
-  "showcase.export.claim": "Then it writes the file.",
-  "showcase.export.body": "MP4 from 720p up to source, at 24, 30 or 60, in H.264 — or a GIF. The encode runs on your machine and counts frames while it does. No queue, no account, no watermark, and the file is on disk when the bar fills.",
-  "showcase.export.fact": "H.264 · 24, 30, 60 fps · no watermark",
-  "showcase.export.link.docs": "Video export docs",
-  "showcase.export.label": "A drawing of the export panel: recording-1783066227227.mp4 going out as MP4 at 1080p and 60 fps, with the quality and frame rate rows above a progress bar 62 percent along reading frame 1 488 of 2 400, writing to the Movies folder.",
-  "showcase.captions.kicker": "captions",
-  "showcase.captions.claim": "Transcription runs on your machine.",
-  "showcase.captions.body": "whisper.cpp ships with the app, and the model downloads once on first use — after that it works with the network off. The audio never leaves the laptop, and what comes back is editable text: set the typeface, the size, the color and the position, then burn it into the render.",
-  "showcase.captions.fact": "whisper.cpp · 100 languages · offline after first run",
-  "showcase.captions.link.docs": "Captions and transcript docs",
-  "showcase.captions.link.feature": "How local captions compare",
-  "showcase.agent.kicker": "agent",
-  "showcase.agent.claim": "Or say which parts to cut.",
-  "showcase.agent.body": "The wizard further up this page places zooms by watching where your cursor went. The agent goes further: it reads the actual transcript and the actual timeline, so it answers with timecodes you can go and check — which spans it will cut, and how much that saves. Every edit it makes is an ordinary undoable one, and it needs a provider key you supply. Nothing runs until you connect one.",
-  "showcase.agent.fact": "bring your own key · off by default · every edit is undoable",
-  "showcase.agent.link.docs": "AI editing docs",
-  "showcase.agent.link.feature": "How automatic zooms work",
-  "showcase.title": "Recorder, captions, agent, encoder.",
   "footer.brand.description": "A free, open-source screen recorder and editor. Community-maintained continuation, MIT licensed.",
   "footer.product.title": "Product",
   "footer.product.download": "Download",
diff --git a/website/i18n/de/code.json b/website/i18n/de/code.json
index 64be02637..d1a9c1e5b 100644
--- a/website/i18n/de/code.json
+++ b/website/i18n/de/code.json
@@ -340,7 +340,7 @@
     "message": "Agent"
   },
   "showcase.agent.claim": {
-    "message": "Oder sag, welche Teile raus sollen."
+    "message": "Beschreib die Änderung. Der Agent setzt sie um."
   },
   "showcase.agent.body": {
     "message": "Der Zauberstab weiter oben auf dieser Seite setzt Zooms, indem er verfolgt, wohin dein Cursor ging. Der Agent geht weiter: Er liest das tatsächliche Transkript und die tatsächliche Zeitleiste und antwortet deshalb mit Timecodes, die du nachprüfen kannst, also welche Abschnitte er schneiden wird und wie viel das spart. Jede seiner Änderungen ist eine gewöhnliche, rückgängig machbare Änderung, und er braucht einen Anbieterschlüssel, den du selbst angibst. Nichts läuft, bis du einen verbindest."
@@ -844,19 +844,19 @@
     "message": "Gut aussehend ab der ersten Aufnahme."
   },
   "films.default.lead": {
-    "message": "Jede neue Aufnahme öffnet sich {zoomed}, auf einem Hintergrundbild, mit Rand, Schatten und abgerundeten Ecken. Ändern Sie, was Sie möchten, oder exportieren Sie sie so."
+    "message": "Jede neue Aufnahme öffnet sich {zoomed}, auf einem Hintergrundbild, mit Rand, Schatten und abgerundeten Ecken. Ändere, was du möchtest, oder exportiere sie so."
   },
   "films.default.lead.zoomed": {
-    "message": "bereits auf Ihre Klicks gezoomt"
+    "message": "bereits auf deine Klicks gezoomt"
   },
   "films.default.note.zooms": {
-    "message": "{t} Jede Aufnahme wird dort gezoomt, wo Sie geklickt haben, nach einer festen Regel: ohne KI, ohne Netzwerkaufruf. Abschaltbar im Modus Aufnahme."
+    "message": "{t} Jede Aufnahme wird dort gezoomt, wo du geklickt hast, nach einer festen Regel: ohne KI, ohne Netzwerkaufruf. Abschaltbar im Modus Aufnahme."
   },
   "films.default.note.zooms.t": {
-    "message": "Zooms aus Ihren Klicks."
+    "message": "Zooms aus deinen Klicks."
   },
   "films.default.note.frame": {
-    "message": "{t} Hintergrundbild, Rand, Schatten, abgerundete Ecken und etwas Bewegungsunschärfe sind aktiv, bevor Sie irgendetwas anfassen."
+    "message": "{t} Hintergrundbild, Rand, Schatten, abgerundete Ecken und etwas Bewegungsunschärfe sind aktiv, bevor du irgendetwas anfasst."
   },
   "films.default.note.frame.t": {
     "message": "Ein fertiger Rahmen."
@@ -874,10 +874,10 @@
     "message": "Tiefe, nicht nur Zoom."
   },
   "films.depth.lead": {
-    "message": "Neigen Sie den Bildschirm oder {orbit} beim Zoomen, zeichnen Sie den Zeiger als {cursor} mit Schatten und setzen Sie die ganze Aufnahme {device}, vor einen Hintergrund, der sich bewegt."
+    "message": "Neige den Bildschirm oder {orbit} beim Zoomen, zeichne den Zeiger als {cursor} mit Schatten und setze die ganze Aufnahme {device}, vor einen Hintergrund, der sich bewegt."
   },
   "films.depth.lead.orbit": {
-    "message": "umkreisen Sie ihn"
+    "message": "umkreise ihn"
   },
   "films.depth.lead.cursor": {
     "message": "3D-Cursor"
@@ -919,10 +919,10 @@
     "message": "Kamera"
   },
   "films.camera.title": {
-    "message": "Ihre Kamera, Ihr Bildschirm oder beides."
+    "message": "Deine Kamera, dein Bildschirm oder beides."
   },
   "films.camera.lead": {
-    "message": "Eine Aufnahme mit Webcam kann {layouts} sein, und der Raum hinter Ihnen kann auf Ihrem eigenen Computer {blurred}, freigestellt oder ersetzt werden, ohne Greenscreen."
+    "message": "Eine Aufnahme mit Webcam kann {layouts} sein, und der Raum hinter dir kann auf deinem eigenen Computer {blurred}, freigestellt oder ersetzt werden, ohne Greenscreen."
   },
   "films.camera.lead.layouts": {
     "message": "Bild in Bild, nebeneinander, gestapelt oder im Vollbild"
@@ -937,13 +937,13 @@
     "message": "Vier Layouts."
   },
   "films.camera.note.full": {
-    "message": "{t} Geben Sie der Kamera einen Abschnitt der Zeitleiste: Sie wird zum Vollbild und gleitet dann zurück."
+    "message": "{t} Gib der Kamera einen Abschnitt der Zeitleiste: Sie wird zum Vollbild und gleitet dann zurück."
   },
   "films.camera.note.full.t": {
     "message": "Vollbild-Kamera."
   },
   "films.camera.note.background": {
-    "message": "{t} Ein Segmentierungsmodell trennt Sie auf Ihrem eigenen Computer vom Raum. Nichts wird hochgeladen."
+    "message": "{t} Ein Segmentierungsmodell trennt dich auf deinem eigenen Computer vom Raum. Nichts wird hochgeladen."
   },
   "films.camera.note.background.t": {
     "message": "Weichzeichnen, freistellen oder ersetzen."
diff --git a/website/i18n/es/code.json b/website/i18n/es/code.json
index 256e4cf8c..5e780ab24 100644
--- a/website/i18n/es/code.json
+++ b/website/i18n/es/code.json
@@ -327,7 +327,7 @@
     "message": "agente"
   },
   "showcase.agent.claim": {
-    "message": "O indica qué partes cortar."
+    "message": "Describe la edición. El agente la hace."
   },
   "showcase.agent.body": {
     "message": "El asistente de más arriba en esta página coloca zooms observando por dónde pasó tu cursor. El agente va más allá: lee la transcripción real y la línea de tiempo real, así que responde con códigos de tiempo que puedes ir a comprobar (qué tramos va a cortar y cuánto tiempo ahorra eso). Cada edición que hace es una edición normal que se puede deshacer, y necesita una clave de proveedor que tú proporcionas. No se ejecuta nada hasta que conectes una."
diff --git a/website/i18n/fr/code.json b/website/i18n/fr/code.json
index 1a8bb2064..ba51dc7dd 100644
--- a/website/i18n/fr/code.json
+++ b/website/i18n/fr/code.json
@@ -327,7 +327,7 @@
     "message": "agent"
   },
   "showcase.agent.claim": {
-    "message": "Ou dites-lui quoi couper."
+    "message": "Décrivez la modification. L'agent s'en charge."
   },
   "showcase.agent.body": {
     "message": "La baguette magique, plus haut sur cette page, place les zooms en observant où votre curseur est passé. L'agent va plus loin : il lit la vraie transcription et la vraie timeline, et répond donc avec des timecodes que vous pouvez aller vérifier, en indiquant quels passages il va couper et combien de temps cela fait gagner. Chaque modification qu'il fait est une modification ordinaire, annulable, et il a besoin d'une clé de fournisseur que vous apportez. Rien ne tourne tant que vous n'en avez pas connecté une."
diff --git a/website/i18n/ja/code.json b/website/i18n/ja/code.json
index 4baf292e2..9161ff413 100644
--- a/website/i18n/ja/code.json
+++ b/website/i18n/ja/code.json
@@ -282,7 +282,7 @@
     "message": "エージェント"
   },
   "showcase.agent.claim": {
-    "message": "または、カットする箇所を言葉で指示。"
+    "message": "編集内容を伝えるだけ。エージェントが実行します。"
   },
   "showcase.agent.body": {
     "message": "このページの上にあるウィザードは、カーソルの動きを見てズームを配置します。エージェントはさらに踏み込み、実際の文字起こしと実際のタイムラインを読み取ります。そのため、どの区間をカットし、それでどれだけ短くなるかを、確認できるタイムコード付きで答えます。エージェントの編集はどれも通常どおり元に戻せる操作で、あなたが用意したプロバイダーのキーが必要です。キーを接続するまで、何も実行されません。"
diff --git a/website/i18n/pt-BR/code.json b/website/i18n/pt-BR/code.json
index f5d4397b4..db43af098 100644
--- a/website/i18n/pt-BR/code.json
+++ b/website/i18n/pt-BR/code.json
@@ -282,7 +282,7 @@
     "message": "agente"
   },
   "showcase.agent.claim": {
-    "message": "Ou diga quais partes cortar."
+    "message": "Descreva a edição. O agente faz."
   },
   "showcase.agent.body": {
     "message": "A varinha mágica mais acima nesta página posiciona zooms observando por onde o seu cursor passou. O agente vai além: ele lê a transcrição real e a linha do tempo real, então responde com timecodes que você pode conferir — quais trechos vai cortar e quanto isso economiza. Cada edição que ele faz é uma edição comum, que pode ser desfeita, e ele precisa de uma chave de provedor fornecida por você. Nada roda até você conectar uma."
diff --git a/website/i18n/zh-CN/code.json b/website/i18n/zh-CN/code.json
index a5e7d5337..96fc0c01b 100644
--- a/website/i18n/zh-CN/code.json
+++ b/website/i18n/zh-CN/code.json
@@ -340,7 +340,7 @@
     "message": "AI 代理"
   },
   "showcase.agent.claim": {
-    "message": "或者，直接说要剪掉哪些部分。"
+    "message": "描述你要的修改，代理来完成。"
   },
   "showcase.agent.body": {
     "message": "本页上方的向导根据光标去过的位置放置缩放。AI 代理更进一步：它读取真实的转录文本和真实的时间轴，因此回答时会给出你可以去核对的时间码，说明要剪掉哪些片段、能省下多少时间。它做的每项编辑都是可撤销的普通编辑，并且需要你自己提供的提供方密钥。在你连接之前，什么都不会运行。"
diff --git a/website/i18n/zh-TW/code.json b/website/i18n/zh-TW/code.json
index 2382e7be3..c96f8c816 100644
--- a/website/i18n/zh-TW/code.json
+++ b/website/i18n/zh-TW/code.json
@@ -295,7 +295,7 @@
     "message": "代理"
   },
   "showcase.agent.claim": {
-    "message": "或者，直接說要剪掉哪些部分。"
+    "message": "描述你要的修改，代理來完成。"
   },
   "showcase.agent.body": {
     "message": "本頁上方的精靈會觀察游標移動到哪裡，據此放置縮放。代理則更進一步：它會讀取實際的逐字稿與實際的時間軸，因此回答時會附上你可以自行核對的時間碼，說明要剪掉哪些區段、能省下多少時間。它做的每一項編輯都是一般可復原的操作，而且需要你自備提供者的金鑰。在你連接之前，什麼都不會執行。"
diff --git a/website/src/components/Showcase/content.ts b/website/src/components/Showcase/content.ts
index fe40fafa0..d9db3710e 100644
--- a/website/src/components/Showcase/content.ts
+++ b/website/src/components/Showcase/content.ts
@@ -160,7 +160,10 @@ export function getFeatures(): Feature[] {
 		{
 			id: "agent",
 			kicker: translate({ id: "showcase.agent.kicker", message: "agent" }),
-			claim: translate({ id: "showcase.agent.claim", message: "Or say which parts to cut." }),
+			claim: translate({
+				id: "showcase.agent.claim",
+				message: "Describe the edit. The agent makes it.",
+			}),
 			body: translate({
 				id: "showcase.agent.body",
 				message:

From 7a801eca840060945e0f51ab6e024a5496c9dc06 Mon Sep 17 00:00:00 2001
From: Etienne Lescot <etiennelescot@gmail.com>
Date: Fri, 2 Oct 2026 13:57:14 +0200
Subject: [PATCH 7/8] fix(website): address the review of the demo loops

DemoLoop:
- one screen of loading lead in pixels: a percentage rootMargin resolves
  against the root's width, under a screen on a portrait phone
- no <source> before the play button when autoplay is off (reduced motion,
  Save-Data): preload="none" is only a hint
- follow prefers-reduced-motion while the page is open; turning it on stops
  a playing loop

Film stages:
- the WAI-ARIA tabs pattern: one Tab stop on the selected tab, arrows and
  Home/End to move, selection following focus
- focus inside a clip that ends, or on a tab, moves to the newly selected
  tab; focus left inside a fading layer moves off it before it unmounts
---
 website/src/components/DemoLoop/index.tsx | 42 +++++++++++----
 website/src/components/Films/index.tsx    | 65 +++++++++++++++++++++--
 2 files changed, 91 insertions(+), 16 deletions(-)

diff --git a/website/src/components/DemoLoop/index.tsx b/website/src/components/DemoLoop/index.tsx
index 324098b86..9258c7272 100644
--- a/website/src/components/DemoLoop/index.tsx
+++ b/website/src/components/DemoLoop/index.tsx
@@ -14,7 +14,9 @@
  *   - It plays only while at least half of it is on screen, and pauses when it
  *     leaves, so a page with ten loops decodes one or two at a time.
  *   - No autoplay for a reader who asked for reduced motion or for Save-Data:
- *     they get the poster and a play button, and the file only on that click.
+ *     they get the poster and a play button, and the sources are not even in
+ *     the DOM before that click. Turning reduced motion on while the page is
+ *     open stops a loop that was playing.
  *   - A visible pause button on every loop. A loop runs past five seconds and
  *     never stops, which WCAG 2.2.2 does not allow without one.
  *
@@ -48,9 +50,6 @@ type Props = {
 	onReady?: () => void;
 };
 
-/** Far enough ahead that the poster is there before the box is. */
-const NEAR = "100% 0px";
-
 function motionAllowed(): boolean {
 	try {
 		const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
@@ -70,20 +69,37 @@ export default function DemoLoop({ name, loop = true, onEnded, onProgress, onRea
 	// null until the reader decides; then their choice beats visibility.
 	const [wanted, setWanted] = useState<boolean | null>(null);
 	const visible = useRef(false);
-	const auto = useRef(true);
+	// State, not a ref: it decides whether the sources are in the DOM at all.
+	const [auto, setAuto] = useState(true);
+
+	// Follow the reader's motion setting, including a change made while the
+	// page is open: turning on reduced motion stops a loop that is playing.
+	useEffect(() => {
+		setAuto(motionAllowed());
+		let mq: MediaQueryList;
+		try {
+			mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+		} catch {
+			return;
+		}
+		const onChange = () => setAuto(motionAllowed());
+		mq.addEventListener("change", onChange);
+		return () => mq.removeEventListener("change", onChange);
+	}, []);
 
-	// Attach the sources once the box is near.
+	// Attach the poster (and pick the file) once the box is within one screen
+	// height. In pixels: a percentage rootMargin resolves against the root's
+	// width, which on a portrait phone is well under a screen of lead.
 	useEffect(() => {
 		const el = box.current;
 		if (!el) return;
-		auto.current = motionAllowed();
 		const io = new IntersectionObserver(
 			(entries) => {
 				if (!entries.some((e) => e.isIntersecting)) return;
 				io.disconnect();
 				setHeight(pickHeight(el.clientWidth, window.devicePixelRatio));
 			},
-			{ rootMargin: NEAR },
+			{ rootMargin: `${Math.round(window.innerHeight)}px 0px` },
 		);
 		io.observe(el);
 		return () => io.disconnect();
@@ -95,7 +111,7 @@ export default function DemoLoop({ name, loop = true, onEnded, onProgress, onRea
 		const v = video.current;
 		if (!el || !v || height === null) return;
 		const sync = () => {
-			const go = wanted ?? (auto.current && visible.current);
+			const go = wanted ?? (auto && visible.current);
 			if (go && visible.current) {
 				v.play().catch(() => setPlaying(false));
 			} else {
@@ -119,7 +135,7 @@ export default function DemoLoop({ name, loop = true, onEnded, onProgress, onRea
 			io.disconnect();
 			v.removeEventListener("loadeddata", sync);
 		};
-	}, [height, wanted]);
+	}, [height, wanted, auto]);
 
 	// Progress for a stage's tab bar, per frame rather than per `timeupdate`,
 	// which fires four times a second and would step the bar visibly.
@@ -151,7 +167,7 @@ export default function DemoLoop({ name, loop = true, onEnded, onProgress, onRea
 					muted
 					loop={loop}
 					playsInline
-					preload={height && auto.current ? "auto" : "none"}
+					preload={height && auto ? "auto" : "none"}
 					disablePictureInPicture
 					disableRemotePlayback
 					onPlay={() => setPlaying(true)}
@@ -159,7 +175,11 @@ export default function DemoLoop({ name, loop = true, onEnded, onProgress, onRea
 					onEnded={onEnded}
 					onLoadedData={onReady}
 				>
+					{/* Without autoplay (reduced motion, Save-Data) the sources wait for
+					    the play button: `preload="none"` is only a hint, and some engines
+					    fetch anyway once a source is there. */}
 					{height &&
+						(auto || wanted === true) &&
 						loopSources(name, height).map((s) => <source key={s.src} src={s.src} type={s.type} />)}
 				</video>
 				{height && (
diff --git a/website/src/components/Films/index.tsx b/website/src/components/Films/index.tsx
index 3c3199d3c..d0d0cfe5f 100644
--- a/website/src/components/Films/index.tsx
+++ b/website/src/components/Films/index.tsx
@@ -11,7 +11,7 @@
 
 import { translate } from "@docusaurus/Translate";
 import Heading from "@theme/Heading";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { type KeyboardEvent, useCallback, useEffect, useRef, useState } from "react";
 
 import DemoLoop from "../DemoLoop";
 import { type Block, getBlocks, getPair } from "./content";
@@ -23,6 +23,9 @@ function Stage({ block }: { block: Block }) {
 	const [prev, setPrev] = useState<number | null>(null);
 	const [fading, setFading] = useState(false);
 	const bars = useRef<(HTMLSpanElement | null)[]>([]);
+	const tabs = useRef<(HTMLButtonElement | null)[]>([]);
+	const panel = useRef<HTMLDivElement>(null);
+	const tablist = useRef<HTMLDivElement>(null);
 	const many = block.tabs.length > 1;
 
 	// Straight to the DOM: a state update per frame would re-render the block.
@@ -38,6 +41,40 @@ function Stage({ block }: { block: Block }) {
 		setIndex(i);
 	};
 
+	// A clip that ends hands over to the next. If focus was inside it (its pause
+	// button, which is about to fade out and unmount), it moves to the tab now
+	// selected rather than falling back to the page.
+	const advance = () => {
+		const next = (index + 1) % block.tabs.length;
+		// On a tab too: the selection moves, so the one Tab stop moves with it.
+		const hadFocus =
+			(panel.current?.contains(document.activeElement) ||
+				tablist.current?.contains(document.activeElement)) ??
+			false;
+		go(next);
+		if (hadFocus) requestAnimationFrame(() => tabs.current[next]?.focus());
+	};
+
+	// The WAI-ARIA tabs pattern: one Tab stop for the whole list (the selected
+	// tab), arrows and Home/End to move, selection following focus.
+	const onKeyDown = (e: KeyboardEvent) => {
+		const n = block.tabs.length;
+		const to =
+			e.key === "ArrowRight"
+				? (index + 1) % n
+				: e.key === "ArrowLeft"
+					? (index - 1 + n) % n
+					: e.key === "Home"
+						? 0
+						: e.key === "End"
+							? n - 1
+							: null;
+		if (to === null) return;
+		e.preventDefault();
+		go(to);
+		tabs.current[to]?.focus();
+	};
+
 	// Without a first frame (reduced motion fetches nothing until play), fade anyway.
 	useEffect(() => {
 		if (prev === null) return;
@@ -48,11 +85,17 @@ function Stage({ block }: { block: Block }) {
 	// Drop the outgoing layer once its fade (0.6 s in the CSS) is over. A timer,
 	// not transitionend: the layer's descendants transition too, and an event
 	// from any of them ended the fade early.
+	// Focus left inside it (a pause button) would fall back to the page with
+	// it, so it moves to the selected tab first.
 	useEffect(() => {
 		if (!fading || prev === null) return;
-		const t = window.setTimeout(() => setPrev(null), 700);
+		const t = window.setTimeout(() => {
+			const out = panel.current?.querySelector("[data-outgoing]");
+			if (out?.contains(document.activeElement)) tabs.current[index]?.focus();
+			setPrev(null);
+		}, 700);
 		return () => window.clearTimeout(t);
-	}, [fading, prev]);
+	}, [fading, prev, index]);
 
 	// Both layers are keyed by their loop, so the outgoing one keeps its last
 	// frame instead of remounting from the start.
@@ -65,7 +108,13 @@ function Stage({ block }: { block: Block }) {
 		<div className={styles.stage}>
 			<span className={styles.glow} />
 			{many && (
-				<div className={styles.tabs} role="tablist" aria-label={block.title}>
+				<div
+					ref={tablist}
+					className={styles.tabs}
+					role="tablist"
+					aria-label={block.title}
+					onKeyDown={onKeyDown}
+				>
 					{block.tabs.map((tab, i) => (
 						<button
 							key={tab.loop}
@@ -74,6 +123,10 @@ function Stage({ block }: { block: Block }) {
 							id={`${block.id}-tab-${i}`}
 							aria-selected={i === index}
 							aria-controls={`${block.id}-panel`}
+							tabIndex={i === index ? 0 : -1}
+							ref={(el) => {
+								tabs.current[i] = el;
+							}}
 							className={styles.tab}
 							onClick={() => go(i)}
 						>
@@ -90,6 +143,7 @@ function Stage({ block }: { block: Block }) {
 				</div>
 			)}
 			<div
+				ref={panel}
 				className={`${styles.frame} ${styles.layers}`}
 				id={`${block.id}-panel`}
 				role={many ? "tabpanel" : undefined}
@@ -100,12 +154,13 @@ function Stage({ block }: { block: Block }) {
 						key={block.tabs[i].loop}
 						className={`${styles.layer} ${out ? styles.outgoing : ""} ${out && fading ? styles.gone : ""}`}
 						aria-hidden={out || undefined}
+						data-outgoing={out || undefined}
 					>
 						<DemoLoop
 							name={block.tabs[i].loop}
 							loop={!many}
 							onProgress={!out && many ? onProgress : undefined}
-							onEnded={!out && many ? () => go((index + 1) % block.tabs.length) : undefined}
+							onEnded={!out && many ? advance : undefined}
 							onReady={!out ? () => setFading(true) : undefined}
 						/>
 					</div>

From f7ed157d14344cc4a528b1d92c56cc0f94aeb14b Mon Sep 17 00:00:00 2001
From: Etienne Lescot <etiennelescot@gmail.com>
Date: Fri, 2 Oct 2026 13:59:03 +0200
Subject: [PATCH 8/8] fix(website): give the recreation's lane hints their
 {{key}}

358c3383 made the timeline's empty-lane hints take the bound shortcut
through {{key}}. The recreation generator renders those hints and had no
value for it, so check:recreation threw. It only runs when website/
changes, which is why main never saw it.

The generator now fills {{key}} from the app's DEFAULT_SHORTCUTS through the
app's own formatBinding (shortcuts.ts loads as-is, like cursorThemes.ts), and
the hints' provenance entries say they are computed. The rendered text is
unchanged: Press A / S / C.
---
 website/scripts/gen-recreation.mjs            | 45 ++++++++++++++++---
 .../src/components/Recreation/generated.ts    |  6 +--
 2 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/website/scripts/gen-recreation.mjs b/website/scripts/gen-recreation.mjs
index 856005b3e..d5c4c1f58 100644
--- a/website/scripts/gen-recreation.mjs
+++ b/website/scripts/gen-recreation.mjs
@@ -113,6 +113,12 @@ const { buildClipSection, isSilenceWord, SILENCE_THRESHOLD_SEC } = await appModu
 const { CURSOR_THEMES, DEFAULT_CURSOR_THEME_ID, resolveCursorSprites } = await appModule(
 	"src/lib/cursor/cursorThemes.ts",
 );
+// The empty-lane hints take their key through {{key}} since the app learned to
+// show the bound shortcut (358c3383). The recreation shows a fresh install, so
+// the default bindings, formatted the way the app formats them. No import of
+// its own, so it loads as-is like cursorThemes.ts.
+const { DEFAULT_SHORTCUTS, formatBinding } = await appModule("src/lib/shortcuts.ts");
+const shortcutKey = (action) => ({ key: formatBinding(DEFAULT_SHORTCUTS[action], true) });
 
 // ── locale access that fails loudly ─────────────────────────────────────
 const locale = (ns) =>
@@ -406,11 +412,36 @@ const trimPills = trims.map((r) => ({
 }));
 
 const LANE_ORDER = [
-	{ id: "annotation", hintKey: "timeline:hints.pressAnnotation", pills: [] },
-	{ id: "speed", hintKey: "timeline:hints.pressSpeed", pills: [] },
-	{ id: "trim", hintKey: "timeline:hints.pressTrim", pills: trimPills },
-	{ id: "zoom", hintKey: "timeline:hints.pressZoom", pills: zoomPills },
-	{ id: "cameraFullscreen", hintKey: "timeline:hints.pressCameraFullscreen", pills: [] },
+	{
+		id: "annotation",
+		hintKey: "timeline:hints.pressAnnotation",
+		hintVars: shortcutKey("addAnnotation"),
+		pills: [],
+	},
+	{
+		id: "speed",
+		hintKey: "timeline:hints.pressSpeed",
+		hintVars: shortcutKey("addSpeed"),
+		pills: [],
+	},
+	{
+		id: "trim",
+		hintKey: "timeline:hints.pressTrim",
+		hintVars: shortcutKey("addTrim"),
+		pills: trimPills,
+	},
+	{
+		id: "zoom",
+		hintKey: "timeline:hints.pressZoom",
+		hintVars: shortcutKey("addZoom"),
+		pills: zoomPills,
+	},
+	{
+		id: "cameraFullscreen",
+		hintKey: "timeline:hints.pressCameraFullscreen",
+		hintVars: shortcutKey("addCameraFullscreen"),
+		pills: [],
+	},
 ];
 
 // Cross-check against the document rather than trusting the table above: a lane
@@ -433,7 +464,7 @@ for (const lane of LANE_ORDER) {
 
 const LANES = LANE_ORDER.map((lane) => ({
 	id: lane.id,
-	hint: lane.pills.length === 0 ? t(lane.hintKey) : null,
+	hint: lane.pills.length === 0 ? t(lane.hintKey, lane.hintVars) : null,
 	pills: lane.pills,
 }));
 const PILLS = LANES.flatMap((lane) => lane.pills);
@@ -1054,7 +1085,7 @@ const PROVENANCE = [
 	})),
 	...LANES.filter((l) => l.hint).map((l) => ({
 		shown: l.hint,
-		source: `timeline.json hints.press${l.id[0].toUpperCase()}${l.id.slice(1)} — rendered because the document holds no ${l.id} regions`,
+		source: `computed: timeline.json hints.press${l.id[0].toUpperCase()}${l.id.slice(1)} with {{key}} = the default binding (shortcuts.ts DEFAULT_SHORTCUTS, formatBinding) — rendered because the document holds no ${l.id} regions`,
 	})),
 	{
 		shown: RULER.variants[0].labels.map((l) => l.text).join(" "),
diff --git a/website/src/components/Recreation/generated.ts b/website/src/components/Recreation/generated.ts
index 49a910880..91b1e19e3 100644
--- a/website/src/components/Recreation/generated.ts
+++ b/website/src/components/Recreation/generated.ts
@@ -730,9 +730,9 @@ export const PROVENANCE: ProvenanceEntry[] = [
 	{ shown: "1.80×", source: "computed: effectiveZoomScale(zoomRanges depth 3).toFixed(2) + \"×\" from src/lib/ai-edition/timeline/zoom-scale.ts" },
 	{ shown: "0:02.2", source: "computed: formatSec(2.19 − 0) over trimRange trim_f52989cf-489c-47f5-a6c7-b95a7d71b399" },
 	{ shown: "0:04.9", source: "computed: formatSec(40.033 − 35.12) over trimRange trim_3bad6006-721a-4dd4-a218-091fa734a63e" },
-	{ shown: "Press A to add annotation", source: "timeline.json hints.pressAnnotation — rendered because the document holds no annotation regions" },
-	{ shown: "Press S to add speed", source: "timeline.json hints.pressSpeed — rendered because the document holds no speed regions" },
-	{ shown: "Press C to add a Full Camera segment", source: "timeline.json hints.pressCameraFullscreen — rendered because the document holds no cameraFullscreen regions" },
+	{ shown: "Press A to add annotation", source: "computed: timeline.json hints.pressAnnotation with {{key}} = the default binding (shortcuts.ts DEFAULT_SHORTCUTS, formatBinding) — rendered because the document holds no annotation regions" },
+	{ shown: "Press S to add speed", source: "computed: timeline.json hints.pressSpeed with {{key}} = the default binding (shortcuts.ts DEFAULT_SHORTCUTS, formatBinding) — rendered because the document holds no speed regions" },
+	{ shown: "Press C to add a Full Camera segment", source: "computed: timeline.json hints.pressCameraFullscreen with {{key}} = the default binding (shortcuts.ts DEFAULT_SHORTCUTS, formatBinding) — rendered because the document holds no cameraFullscreen regions" },
 	{ shown: "0:00 0:02 0:04 0:06 0:08 0:10 0:12 0:14 0:16 0:18 0:20 0:22 0:24 0:26 0:28 0:30 0:32 0:34 0:36 0:38 0:40", source: "computed: fmtTick lifted from V4Timeline.tsx over a 2s step, itself derived as the first TICK_STEPS_SEC entry clearing MIN_LABEL_GAP_PX 76 at 47.9604 px/s" },
 	{ shown: "0:40.0", source: "computed: formatSec(assets[0].durationSec = 40.033)" },
 	{ shown: "0:17.5", source: "computed: formatSec(zoomRanges[1].sourceStartSec = 17.5) — where the loop starts" },