Skip to content

feat(website): track the demo loops, declare them as videos, keep them out of the page load #980

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
EtienneLescot merged 4 commits into from
Oct 2, 2026
Merged

feat(website): track the demo loops, declare them as videos, keep them out of the page load #980

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
38b1f82
feat(website): record the published demo loops, and check them in CI
EtienneLescot Oct 2, 2026
2c70d72
feat(website): declare each demo loop as a VideoObject where it is shown
EtienneLescot Oct 2, 2026
9638077
perf(website): paint a loop's poster without waiting for script, and …
EtienneLescot Oct 2, 2026
914b2c6
fix(website): make the loop tooling refuse what would corrupt a cut
EtienneLescot Oct 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .github/workflows/docs.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,14 @@ jobs:
- name: Check media budget
working-directory: website
run: npm run check:media
# The demo loops are served from R2 (media.getopenscreen.com), not git, so
# nothing above would notice a loop a page names that was never uploaded,
# or a cut folder holding the wrong files. media/loops.json records what
# scripts/media/publish-loops.mjs uploaded; this holds the code to it and
# asks the CDN for every recorded file, paced under the zone's rate limit.
- name: Check demo loops
working-directory: website
run: npm run check:loops -- --live
# The recreation's data is generated from the app's own source and a
# vendored project document. It is committed, so it can go stale in either
# direction — a locale key moves, a timeline constant changes — and the
Expand Down
112 changes: 65 additions & 47 deletions website/i18n/code.source.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,53 +72,6 @@
"home.install.note.windows": "Windows",
"home.install.note.mac": "Mac",
"home.install.note.linux": "Linux",
"editor.skipLink": "Skip the editor — go to downloads",
"editor.title": "Five things you will actually do",
"demoLoop.pause": "Pause video",
"demoLoop.play": "Play video",
"demoLoop.classic-zoom": "A task board recorded in OpenScreen. The view zooms in on a checklist item and a Ship button as they are clicked, then pulls back to the whole board.",
"demoLoop.3d-camera": "The same recording seen through the 3D camera, which tilts the screen and orbits around it while it follows the cursor.",
"demoLoop.3d-cursors": "One recorded pointer, redrawn in five cursor styles one after another while the recording keeps playing.",
"demoLoop.automatic-subtitles": "A narrated recording with captions under it, switching from English to French, Spanish and Korean.",
"demoLoop.caption-styles": "One caption shown in five styles: a plain caption, a bold yellow one, a handwritten one, a monospaced one, and one showing a single word at a time.",
"demoLoop.edit-by-transcript": "In the editor's transcript, a sentence is selected and deleted, and the matching cut appears on the timeline.",
"demoLoop.tighten-pauses": "Two clicks on the silence markers in the transcript, and both pauses are cut from the timeline.",
"demoLoop.background-picker": "The editor's background picker going through wallpapers, a gradient and a solid color, then turning on the animated Aurora background.",
"demoLoop.every-format": "The same recording exported in 16:9, then square, then vertical, with the framing following the cursor.",
"demoLoop.sensitive-data-mask": "A sign-in form being filled in. The email and password fields stay blurred while they are typed.",
"demoLoop.camera-blur": "A square webcam vignette over a screen recording. The view moves in on it while the room behind the speaker blurs, then pulls back.",
"demoLoop.every-layout": "One recording with a webcam, cycling through the layouts: picture in picture, side by side, stacked, full camera, then screen only.",
"demoLoop.device-frames": "The same playing recording framed in turn as a browser window, a phone, a laptop and a desktop monitor.",
"demoLoop.animated-backgrounds": "A recording on a plain background, then on a blurred photo background that moves slowly behind it.",
"demoLoop.beautiful-by-default": "A raw screen capture, then the same take as OpenScreen opens it, already zoomed, framed and with a restyled cursor, then in several looks.",
"demoLoop.simpler-editor": "The OpenScreen editor. One click on a background thumbnail restyles the whole video, then the side panel switches to the transcript.",
"demoLoop.edit-like-a-doc": "Text selected in the transcript is deleted like text in a document, and the video is cut to match.",
"demoLoop.ask-the-agent": "A request typed into the editor's chat panel, and the edits the agent makes appearing on the timeline.",
"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.",
Expand Down Expand Up @@ -168,6 +121,46 @@
"films.ship.blur": "{t} Smooth or mosaic, as a rectangle, an oval or a freehand shape, over an email, a key or a password.",
"films.ship.blur.t": "Blur regions.",
"films.label": "More of the app, in motion",
"editor.skipLink": "Skip the editor — go to downloads",
"editor.title": "Five things you will actually do",
"demoLoop.pause": "Pause video",
"demoLoop.play": "Play video",
"demoLoop.classic-zoom": "A task board recorded in OpenScreen. The view zooms in on a checklist item and a Ship button as they are clicked, then pulls back to the whole board.",
"demoLoop.3d-camera": "The same recording seen through the 3D camera, which tilts the screen and orbits around it while it follows the cursor.",
"demoLoop.3d-cursors": "One recorded pointer, redrawn in five cursor styles one after another while the recording keeps playing.",
"demoLoop.automatic-subtitles": "A narrated recording with captions under it, switching from English to French, Spanish and Korean.",
"demoLoop.caption-styles": "One caption shown in five styles: a plain caption, a bold yellow one, a handwritten one, a monospaced one, and one showing a single word at a time.",
"demoLoop.edit-by-transcript": "In the editor's transcript, a sentence is selected and deleted, and the matching cut appears on the timeline.",
"demoLoop.tighten-pauses": "Two clicks on the silence markers in the transcript, and both pauses are cut from the timeline.",
"demoLoop.background-picker": "The editor's background picker going through wallpapers, a gradient and a solid color, then turning on the animated Aurora background.",
"demoLoop.every-format": "The same recording exported in 16:9, then square, then vertical, with the framing following the cursor.",
"demoLoop.sensitive-data-mask": "A sign-in form being filled in. The email and password fields stay blurred while they are typed.",
"demoLoop.camera-blur": "A square webcam vignette over a screen recording. The view moves in on it while the room behind the speaker blurs, then pulls back.",
"demoLoop.every-layout": "One recording with a webcam, cycling through the layouts: picture in picture, side by side, stacked, full camera, then screen only.",
"demoLoop.device-frames": "The same playing recording framed in turn as a browser window, a phone, a laptop and a desktop monitor.",
"demoLoop.animated-backgrounds": "A recording on a plain background, then on a blurred photo background that moves slowly behind it.",
"demoLoop.beautiful-by-default": "A raw screen capture, then the same take as OpenScreen opens it, already zoomed, framed and with a restyled cursor, then in several looks.",
"demoLoop.simpler-editor": "The OpenScreen editor. One click on a background thumbnail restyles the whole video, then the side panel switches to the transcript.",
"demoLoop.edit-like-a-doc": "Text selected in the transcript is deleted like text in a document, and the video is cut to match.",
"demoLoop.ask-the-agent": "A request typed into the editor's chat panel, and the edits the agent makes appearing on the timeline.",
"demoLoop.title.classic-zoom": "Automatic zoom on clicks",
"demoLoop.title.3d-camera": "A 3D camera orbiting the screen",
"demoLoop.title.3d-cursors": "Cursor packs, drawn in 3D",
"demoLoop.title.automatic-subtitles": "Captions translated into other languages",
"demoLoop.title.caption-styles": "Five caption styles",
"demoLoop.title.edit-by-transcript": "Cutting video by deleting text in the transcript",
"demoLoop.title.tighten-pauses": "Cutting silences from the transcript",
"demoLoop.title.background-picker": "Changing the background behind a recording",
"demoLoop.title.every-format": "One recording in 16:9, 1:1 and 9:16",
"demoLoop.title.sensitive-data-mask": "Blurring an email address and a password",
"demoLoop.title.camera-blur": "Webcam background blur",
"demoLoop.title.every-layout": "Webcam layouts",
"demoLoop.title.device-frames": "Device frames",
"demoLoop.title.animated-backgrounds": "Animated backgrounds",
"demoLoop.title.beautiful-by-default": "From a raw screen capture to a finished demo",
"demoLoop.title.simpler-editor": "The OpenScreen editor",
"demoLoop.title.edit-like-a-doc": "Editing a video like a document",
"demoLoop.title.ask-the-agent": "Asking the editor's agent for an edit",
"recreation.style.kicker": "Style",
"recreation.style.title": "Swap the background",
"recreation.style.sub": "Image, color or gradient behind your recording — no re-shoot.",
Expand All @@ -183,6 +176,31 @@
"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.",
"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.",
"footer.brand.description": "A free, open-source screen recorder and editor. Community-maintained continuation, MIT licensed.",
"footer.product.title": "Product",
"footer.product.download": "Download",
Expand Down
72 changes: 72 additions & 0 deletions website/i18n/de/code.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -988,5 +988,77 @@
},
"films.camera.tab.blur": {
"message": "Hintergrundunschärfe"
},
"demoLoop.title.classic-zoom": {
"message": "Automatischer Zoom auf Klicks",
"description": "The name of a short silent video of the app, given to search engines (schema.org VideoObject)."
},
"demoLoop.title.3d-camera": {
"message": "Eine 3D-Kamera, die den Bildschirm umkreist",
"description": "The name of a short silent video of the app, given to search engines (schema.org VideoObject)."
},
"demoLoop.title.3d-cursors": {
"message": "Cursor-Pakete, in 3D gezeichnet",
"description": "The name of a short silent video of the app, given to search engines (schema.org VideoObject)."
},
"demoLoop.title.automatic-subtitles": {
"message": "Untertitel, in andere Sprachen übersetzt",
"description": "The name of a short silent video of the app, given to search engines (schema.org VideoObject)."
},
"demoLoop.title.caption-styles": {
"message": "Fünf Untertitelstile",
"description": "The name of a short silent video of the app, given to search engines (schema.org VideoObject)."
},
"demoLoop.title.edit-by-transcript": {
"message": "Video schneiden, indem man Text im Transkript löscht",
"description": "The name of a short silent video of the app, given to search engines (schema.org VideoObject)."
},
"demoLoop.title.tighten-pauses": {
"message": "Stille aus dem Transkript schneiden",
"description": "The name of a short silent video of the app, given to search engines (schema.org VideoObject)."
},
"demoLoop.title.background-picker": {
"message": "Den Hintergrund einer Aufnahme wechseln",
"description": "The name of a short silent video of the app, given to search engines (schema.org VideoObject)."
},
"demoLoop.title.every-format": {
"message": "Eine Aufnahme in 16:9, 1:1 und 9:16",
"description": "The name of a short silent video of the app, given to search engines (schema.org VideoObject)."
},
"demoLoop.title.sensitive-data-mask": {
"message": "Eine E-Mail-Adresse und ein Passwort unscharf machen",
"description": "The name of a short silent video of the app, given to search engines (schema.org VideoObject)."
},
"demoLoop.title.camera-blur": {
"message": "Webcam-Hintergrundunschärfe",
"description": "The name of a short silent video of the app, given to search engines (schema.org VideoObject)."
},
"demoLoop.title.every-layout": {
"message": "Webcam-Layouts",
"description": "The name of a short silent video of the app, given to search engines (schema.org VideoObject)."
},
"demoLoop.title.device-frames": {
"message": "Geräterahmen",
"description": "The name of a short silent video of the app, given to search engines (schema.org VideoObject)."
},
"demoLoop.title.animated-backgrounds": {
"message": "Animierte Hintergründe",
"description": "The name of a short silent video of the app, given to search engines (schema.org VideoObject)."
},
"demoLoop.title.beautiful-by-default": {
"message": "Von der Rohaufnahme zur fertigen Demo",
"description": "The name of a short silent video of the app, given to search engines (schema.org VideoObject)."
},
"demoLoop.title.simpler-editor": {
"message": "Der OpenScreen-Editor",
"description": "The name of a short silent video of the app, given to search engines (schema.org VideoObject)."
},
"demoLoop.title.edit-like-a-doc": {
"message": "Ein Video wie ein Dokument bearbeiten",
"description": "The name of a short silent video of the app, given to search engines (schema.org VideoObject)."
},
"demoLoop.title.ask-the-agent": {
"message": "Den Agenten des Editors um eine Änderung bitten",
"description": "The name of a short silent video of the app, given to search engines (schema.org VideoObject)."
}
}
Loading
Loading