diff --git a/website/i18n/code.source.json b/website/i18n/code.source.json index 8b735b7f9..dbf9b7f21 100644 --- a/website/i18n/code.source.json +++ b/website/i18n/code.source.json @@ -37,12 +37,19 @@ "download.preRelease.title": "Want to test what is coming next?", "download.preRelease.body": "Release candidates ship between stable versions, alongside older releases, checksums, and full release notes.", "download.preRelease.cta": "Browse all releases", + "home.agents.copied": "Copied", + "home.agents.copy": "Copy", "home.meta.title": "Free open-source screen recorder & video editor", "home.meta.description": "Turn screen recordings into polished demos with automatic zooms, styled backgrounds and an editable cursor. Free and open source for Windows, macOS and Linux. No watermark.", "home.hero.title": "Beautiful demos on the first take.", "home.hero.tagline": "Automatic zooms, smooth cursor movement, and a frame that looks finished. Record, adjust, share.", "home.hero.reassurance": "Free and open source. No watermark. No account.", "home.features.platforms.title": "Windows, macOS, Linux", + "home.agents.kicker": "For coding agents", + "home.agents.title": "Your coding agent ships the feature with its video.", + "home.agents.summary": "OpenScreen's MCP server gives an agent the whole job: it records the app, edits the take with the editor's own tools, exports the MP4 and checks it frame by frame. Paste this into Claude Code and the video of your change lands in the pull request.", + "home.agents.foot": "It installs OpenScreen if it is missing, once you agree. Codex, Cursor and any other MCP client work too: {docs}.", + "home.agents.foot.docs": "Set it up by hand", "home.features.kicker": "Also true", "home.features.title": "Free, local, cross-platform: three things a screenshot can't show.", "home.features.summary": "OpenScreen is a free, open-source screen recorder and video editor for Windows, macOS, and Linux: a raw capture goes in and a finished demo comes out, in the category {screenStudio} defined. It is MIT licensed, with no watermark and no account, and it continues the {originalProject}, which its creator archived after v1.5.0.", @@ -108,12 +115,6 @@ "demoLoop.title.ask-the-agent": "Asking the editor's agent for an edit", "editor.skipLink": "Skip the editor — go to downloads", "editor.title": "Five things you will actually do", - "download.cta.mac": "Download for Mac", - "download.cta.windows": "Download for Windows", - "download.cta.linux": "Download for Linux", - "home.hero.download": "Download", - "download.cta.chooseMac": "Choose your Mac", - "download.cta.otherVersions": "Other versions", "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.", @@ -163,6 +164,9 @@ "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", + "announcement.v2.link": "See what's new", + "announcement.v2.title": "OpenScreen v2 is here", + "announcement.productHunt.rank": "#5 Product of the Day", "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.", @@ -188,9 +192,12 @@ "showcase.agent.link.docs": "AI editing docs", "showcase.agent.link.feature": "How automatic zooms work", "showcase.title": "Recorder, captions, agent, encoder.", - "announcement.v2.link": "See what's new", - "announcement.v2.title": "OpenScreen v2 is here", - "announcement.productHunt.rank": "#5 Product of the Day", + "download.cta.mac": "Download for Mac", + "download.cta.windows": "Download for Windows", + "download.cta.linux": "Download for Linux", + "home.hero.download": "Download", + "download.cta.chooseMac": "Choose your Mac", + "download.cta.otherVersions": "Other versions", "recreation.style.kicker": "Style", "recreation.style.title": "Swap the background", "recreation.style.sub": "Image, color or gradient behind your recording — no re-shoot.", diff --git a/website/i18n/de/code.json b/website/i18n/de/code.json index d8f1a00ba..28b883957 100644 --- a/website/i18n/de/code.json +++ b/website/i18n/de/code.json @@ -1085,5 +1085,27 @@ "announcement.productHunt.rank": { "message": "#5 Produkt des Tages", "description": "The launch's rank on Product Hunt (October 11, 2026). Keep the #5." + }, + "home.agents.copied": { + "message": "Kopiert" + }, + "home.agents.copy": { + "message": "Kopieren" + }, + "home.agents.kicker": { + "message": "Für Coding-Agenten" + }, + "home.agents.title": { + "message": "Dein Coding-Agent liefert das Feature mit seinem Video." + }, + "home.agents.summary": { + "message": "Der MCP-Server von OpenScreen gibt einem Agenten die ganze Arbeit: Er nimmt die App auf, schneidet den Take mit den Werkzeugen des Editors, exportiert das MP4 und prüft es Bild für Bild. Füge das in Claude Code ein, und das Video deiner Änderung landet im Pull Request." + }, + "home.agents.foot": { + "message": "Er installiert OpenScreen, falls es fehlt, sobald du zustimmst. Codex, Cursor und jeder andere MCP-Client funktionieren auch: {docs}.", + "description": "{docs} links to the AI editing docs." + }, + "home.agents.foot.docs": { + "message": "manuelle Einrichtung" } } diff --git a/website/i18n/es/code.json b/website/i18n/es/code.json index c971d68c9..84340b1ce 100644 --- a/website/i18n/es/code.json +++ b/website/i18n/es/code.json @@ -1085,5 +1085,27 @@ "announcement.productHunt.rank": { "message": "#5 Producto del día", "description": "The launch's rank on Product Hunt (October 11, 2026). Keep the #5." + }, + "home.agents.copied": { + "message": "Copiado" + }, + "home.agents.copy": { + "message": "Copiar" + }, + "home.agents.kicker": { + "message": "Para agentes de programación" + }, + "home.agents.title": { + "message": "Tu agente de programación entrega la función con su video." + }, + "home.agents.summary": { + "message": "El servidor MCP de OpenScreen le da a un agente todo el trabajo: graba la app, edita la toma con las herramientas del editor, exporta el MP4 y lo revisa fotograma a fotograma. Pega esto en Claude Code y el video de tu cambio llega a la pull request." + }, + "home.agents.foot": { + "message": "Instala OpenScreen si falta, una vez que aceptas. Codex, Cursor y cualquier otro cliente MCP también funcionan: {docs}.", + "description": "{docs} links to the AI editing docs." + }, + "home.agents.foot.docs": { + "message": "configuración manual" } } diff --git a/website/i18n/fr/code.json b/website/i18n/fr/code.json index aaa54d4f0..25cb8d35b 100644 --- a/website/i18n/fr/code.json +++ b/website/i18n/fr/code.json @@ -1085,5 +1085,27 @@ "announcement.productHunt.rank": { "message": "#5 Produit du jour", "description": "The launch's rank on Product Hunt (October 11, 2026). Keep the #5." + }, + "home.agents.copied": { + "message": "Copié" + }, + "home.agents.copy": { + "message": "Copier" + }, + "home.agents.kicker": { + "message": "Pour les agents de code" + }, + "home.agents.title": { + "message": "Votre agent de code livre la fonctionnalité avec sa vidéo." + }, + "home.agents.summary": { + "message": "Le serveur MCP d'OpenScreen confie tout le travail à un agent : il enregistre l'application, monte la prise avec les outils de l'éditeur, exporte le MP4 et le vérifie image par image. Collez ceci dans Claude Code, et la vidéo de votre modification arrive dans la pull request." + }, + "home.agents.foot": { + "message": "Il installe OpenScreen s'il manque, une fois que vous avez accepté. Codex, Cursor et tout autre client MCP fonctionnent aussi : {docs}.", + "description": "{docs} links to the AI editing docs." + }, + "home.agents.foot.docs": { + "message": "configuration manuelle" } } diff --git a/website/i18n/ja/code.json b/website/i18n/ja/code.json index 05b9d5f4d..cb0d88203 100644 --- a/website/i18n/ja/code.json +++ b/website/i18n/ja/code.json @@ -1085,5 +1085,27 @@ "announcement.productHunt.rank": { "message": "本日のプロダクト 第5位", "description": "The launch's rank on Product Hunt (October 11, 2026). Keep the #5." + }, + "home.agents.copied": { + "message": "コピーしました" + }, + "home.agents.copy": { + "message": "コピー" + }, + "home.agents.kicker": { + "message": "コーディングエージェント向け" + }, + "home.agents.title": { + "message": "コーディングエージェントが、機能と一緒にその動画も届けます。" + }, + "home.agents.summary": { + "message": "OpenScreen の MCP サーバーを使えば、エージェントがすべてを担います。アプリを録画し、エディターと同じツールでテイクを編集し、MP4 をエクスポートして、1 フレームずつ確認します。これを Claude Code に貼り付ければ、変更の動画がプルリクエストに届きます。" + }, + "home.agents.foot": { + "message": "OpenScreen がなければ、あなたの同意を得てからインストールします。Codex、Cursor など、ほかの MCP クライアントでも使えます：{docs}。", + "description": "{docs} links to the AI editing docs." + }, + "home.agents.foot.docs": { + "message": "手動で設定する" } } diff --git a/website/i18n/pt-BR/code.json b/website/i18n/pt-BR/code.json index 4c400f6a6..652c48832 100644 --- a/website/i18n/pt-BR/code.json +++ b/website/i18n/pt-BR/code.json @@ -1085,5 +1085,27 @@ "announcement.productHunt.rank": { "message": "#5 Produto do dia", "description": "The launch's rank on Product Hunt (October 11, 2026). Keep the #5." + }, + "home.agents.copied": { + "message": "Copiado" + }, + "home.agents.copy": { + "message": "Copiar" + }, + "home.agents.kicker": { + "message": "Para agentes de programação" + }, + "home.agents.title": { + "message": "Seu agente de programação entrega o recurso com o vídeo dele." + }, + "home.agents.summary": { + "message": "O servidor MCP do OpenScreen dá a um agente o trabalho inteiro: ele grava o app, edita a tomada com as ferramentas do próprio editor, exporta o MP4 e confere quadro a quadro. Cole isto no Claude Code e o vídeo da sua mudança chega ao pull request." + }, + "home.agents.foot": { + "message": "Ele instala o OpenScreen se estiver faltando, depois que você concordar. Codex, Cursor e qualquer outro cliente MCP também funcionam: {docs}.", + "description": "{docs} links to the AI editing docs." + }, + "home.agents.foot.docs": { + "message": "configuração manual" } } diff --git a/website/i18n/zh-CN/code.json b/website/i18n/zh-CN/code.json index 18739b2db..ba0d407e8 100644 --- a/website/i18n/zh-CN/code.json +++ b/website/i18n/zh-CN/code.json @@ -1085,5 +1085,27 @@ "announcement.productHunt.rank": { "message": "今日产品第 5 名", "description": "The launch's rank on Product Hunt (October 11, 2026). Keep the #5." + }, + "home.agents.copied": { + "message": "已复制" + }, + "home.agents.copy": { + "message": "复制" + }, + "home.agents.kicker": { + "message": "面向编程 AI 代理" + }, + "home.agents.title": { + "message": "你的编程 AI 代理交付功能时，连视频一起交付。" + }, + "home.agents.summary": { + "message": "OpenScreen 的 MCP 服务器把整件事交给 AI 代理：录制应用、用编辑器自己的工具剪辑录制内容、导出 MP4，并逐帧检查。把这段话粘贴到 Claude Code 中，你这次改动的视频就会出现在拉取请求里。" + }, + "home.agents.foot": { + "message": "如果尚未安装 OpenScreen，它会在你同意后安装。Codex、Cursor 和其他任何 MCP 客户端也可以使用：{docs}。", + "description": "{docs} links to the AI editing docs." + }, + "home.agents.foot.docs": { + "message": "手动设置" } } diff --git a/website/i18n/zh-TW/code.json b/website/i18n/zh-TW/code.json index 604df088a..dfe7f5a54 100644 --- a/website/i18n/zh-TW/code.json +++ b/website/i18n/zh-TW/code.json @@ -1085,5 +1085,27 @@ "announcement.productHunt.rank": { "message": "今日產品第 5 名", "description": "The launch's rank on Product Hunt (October 11, 2026). Keep the #5." + }, + "home.agents.copied": { + "message": "已複製" + }, + "home.agents.copy": { + "message": "複製" + }, + "home.agents.kicker": { + "message": "給程式設計代理" + }, + "home.agents.title": { + "message": "你的程式設計代理交付功能時，連影片一起交付。" + }, + "home.agents.summary": { + "message": "OpenScreen 的 MCP 伺服器把整件工作交給代理：錄製應用程式、用編輯器本身的工具剪輯錄影、匯出 MP4，並逐格檢查。把這段話貼到 Claude Code，你這次變更的影片就會出現在拉取請求中。" + }, + "home.agents.foot": { + "message": "如果尚未安裝 OpenScreen，它會在你同意後安裝。Codex、Cursor 和其他任何 MCP 用戶端也都能使用：{docs}。", + "description": "{docs} links to the AI editing docs." + }, + "home.agents.foot.docs": { + "message": "手動設定" } } diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css index c12eaf595..f669f79b2 100644 --- a/website/src/pages/index.module.css +++ b/website/src/pages/index.module.css @@ -2,6 +2,7 @@ which swaps under [data-theme="light"]; nothing may be a literal. */ .hero, +.agents, .features, .quickStart { background: var(--os-bg); @@ -133,6 +134,54 @@ color: var(--os-fg-emphasis) !important; } +/* ---- coding agents ---- + One prompt, in the install panes' chrome: what the reader does here is paste a + line, the same act as typing an install command below. */ + +.agents { + padding: 140px 28px 0; +} + +.agentsInner { + max-width: 1080px; + margin: 0 auto; + text-align: center; +} + +.agentPrompt { + max-width: 760px; + margin: 44px auto 0; +} + +/* One click takes the whole prompt, so it copies by hand where the clipboard is denied. */ +.agentPrompt pre { + user-select: all; +} + +.copyButton { + display: inline-flex; + align-items: center; + gap: 5px; + margin-left: auto; + padding: 2px 9px; + border-radius: 999px; + border: 1px solid var(--os-border-soft); + background: transparent; + font: inherit; + font-size: 11.5px; + color: var(--os-fg-2); + cursor: pointer; +} + +.copyButton:hover { + border-color: var(--os-accent); + color: var(--os-accent); +} + +.paneFoot a { + color: var(--os-accent); +} + /* ---- coda ---- Three claims that are not events: a licence, an absence of network traffic, a list of platforms. Everything that *is* an event — the editor, the recorder, diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index c802ce10d..d70704173 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -4,7 +4,8 @@ import Translate, { translate } from "@docusaurus/Translate"; import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import Heading from "@theme/Heading"; import Layout from "@theme/Layout"; -import { Apple, AppWindow, CircleCheck, TerminalSquare } from "lucide-react"; +import { Apple, AppWindow, Bot, Check, CircleCheck, Copy, TerminalSquare } from "lucide-react"; +import { useState } from "react"; import AppLanguages from "../components/AppLanguages"; import Editor from "../components/Editor"; @@ -17,6 +18,41 @@ import type { AppLanguage } from "../lib/release"; import { jsonLd, softwareApplicationLd } from "../lib/structured-data"; import styles from "./index.module.css"; +const AGENT_PROMPT = + "Install the OpenScreen demo skill with `npx skills add getopenscreen/openscreen --skill openscreen-demo -a claude-code`, then follow it to add a video of this change to the PR."; + +function CopyButton({ text }: { text: string }) { + const [copied, setCopied] = useState(false); + return ( + + ); +} + export default function Home() { const { siteConfig } = useDocusaurusContext(); const languages = (siteConfig.customFields?.appLanguages ?? []) as AppLanguage[]; @@ -80,6 +116,54 @@ export default function Home() { {/* The claims the editor cannot make on its own. */} +
+
+
+ For coding agents +
+ + + Your coding agent ships the feature with its video. + + +

+ + OpenScreen's MCP server gives an agent the whole job: it records the app, edits the + take with the editor's own tools, exports the MP4 and checks it frame by frame. Paste + this into Claude Code and the video of your change lands in the pull request. + +

+ +
+
+ + Claude Code + +
+ {/* The prompt stays in English in every locale: it is what the reader pastes, and + the README carries the same line. */} + 
{AGENT_PROMPT}
+

+ + Set it up by hand + + ), + }} + > + { + "It installs OpenScreen if it is missing, once you agree. Codex, Cursor and any other MCP client work too: {docs}." + } + +

+
+
+
+