openchrome-mcp 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,180 @@
+<p align="center">
+  <img src="assets/mascot.png" alt="OpenChrome Raptor" width="180">
+</p>
+
+<h1 align="center">OpenChrome</h1>
+
+<p align="center">
+  <b>Smart. Fast. Parallel.</b><br>
+  Browser automation MCP server that uses your real Chrome.
+</p>
+
+<p align="center">
+  <a href="https://github.com/shaun0927/openchrome/releases"><img src="https://img.shields.io/github/v/release/shaun0927/openchrome" alt="release"></a>
+  <a href="https://www.npmjs.com/package/openchrome-mcp"><img src="https://img.shields.io/npm/v/openchrome-mcp" alt="npm"></a>
+  <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="MIT"></a>
+</p>
+
+<p align="center">
+  <img src="assets/demo.svg" alt="Traditional vs OpenChrome" width="100%">
+</p>
+
+---
+
+## What is OpenChrome?
+
+Imagine **20+ parallel Playwright sessions** — but already logged in to everything, invisible to bot detection, and sharing one Chrome process at 300MB. That's OpenChrome.
+
+Search across 20 sites simultaneously. Crawl authenticated dashboards in seconds. Debug production UIs with real user sessions. Connect to [OpenClaw](https://github.com/openclaw/openclaw) and give your AI agent browser superpowers across Telegram, Discord, or any chat platform.
+
+```
+You: oc compare "AirPods Pro" prices across Amazon, eBay, Walmart,
+     Best Buy, Target, Costco, B&H, Newegg — find the lowest
+
+AI:  [8 parallel workers, all sites simultaneously]
+     Best Buy:  $179 ← lowest (sale)
+     Amazon:    $189
+     Costco:    $194 (members)
+     ...
+     Time: 2.8s | All prices from live pages, already logged in.
+```
+
+| | Traditional | OpenChrome |
+|---|:---:|:---:|
+| **5-site task** | ~250s (login each) | **~3s** (parallel) |
+| **Memory** | ~2.5 GB (5 browsers) | **~300 MB** (1 Chrome) |
+| **Auth** | Every time | **Never** |
+| **Bot detection** | Flagged | **Invisible** |
+
+---
+
+## Quick Start
+
+```bash
+npx openchrome-mcp setup
+```
+
+That's it. Say `oc` to your AI agent.
+
+<details>
+<summary>Manual config</summary>
+
+**Claude Code:**
+```bash
+claude mcp add openchrome -- npx -y openchrome-mcp serve --auto-launch
+```
+
+**VS Code / Copilot** (`.vscode/mcp.json`):
+```json
+{
+  "servers": {
+    "openchrome": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "openchrome-mcp", "serve", "--auto-launch"]
+    }
+  }
+}
+```
+
+**Cursor / Windsurf / Other MCP clients:**
+```json
+{
+  "mcpServers": {
+    "openchrome": {
+      "command": "npx",
+      "args": ["-y", "openchrome-mcp", "serve", "--auto-launch"]
+    }
+  }
+}
+```
+
+</details>
+
+---
+
+## How It Works
+
+```
+Traditional:  [blank browser] → login → 2FA → wait → task → close  (per site)
+OpenChrome:   [your Chrome]   → task                                 (done)
+```
+
+OpenChrome connects to your running Chrome via CDP. You're already logged in. Workers run in parallel with isolated contexts (separate cookies, sessions). One Chrome process, 20+ simultaneous sessions, ~300MB total.
+
+---
+
+## Examples
+
+**Parallel monitoring:**
+```
+oc screenshot AWS billing, GCP console, Stripe, and Datadog — all at once
+→ 4 workers, 3.1s, already authenticated everywhere
+```
+
+**Multi-account:**
+```
+oc check orders on personal and business Amazon accounts simultaneously
+→ 2 workers, isolated sessions, same site different accounts
+```
+
+**Competitive intelligence:**
+```
+oc compare prices for "AirPods Pro" across Amazon, eBay, Walmart, Best Buy
+→ 4 workers, 4 sites, 2.4s, works past bot detection
+```
+
+---
+
+## 47 Tools
+
+| Category | Tools |
+|----------|-------|
+| **Navigate & Interact** | `navigate`, `click_element`, `fill_form`, `wait_and_click`, `find`, `computer` |
+| **Read & Extract** | `read_page`, `page_content`, `javascript_tool`, `selector_query`, `xpath_query` |
+| **Environment** | `emulate_device`, `geolocation`, `user_agent`, `network` |
+| **Storage & Debug** | `cookies`, `storage`, `console_capture`, `performance_metrics`, `request_intercept` |
+| **Parallel Workflows** | `workflow_init`, `workflow_collect`, `worker_create`, `batch_execute` |
+| **Memory** | `memory_record`, `memory_query`, `memory_validate` |
+
+<details>
+<summary>Full tool list (47)</summary>
+
+`navigate` `computer` `read_page` `find` `click_element` `wait_and_click` `form_input` `fill_form` `javascript_tool` `page_reload` `page_content` `page_pdf` `wait_for` `user_agent` `geolocation` `emulate_device` `network` `selector_query` `xpath_query` `cookies` `storage` `console_capture` `performance_metrics` `request_intercept` `drag_drop` `file_upload` `http_auth` `worker_create` `worker_list` `worker_update` `worker_complete` `worker_delete` `tabs_create_mcp` `tabs_context_mcp` `tabs_close` `workflow_init` `workflow_status` `workflow_collect` `workflow_collect_partial` `workflow_cleanup` `execute_plan` `batch_execute` `lightweight_scroll` `memory_record` `memory_query` `memory_validate` `oc_stop`
+
+</details>
+
+---
+
+## CLI
+
+```bash
+oc setup                    # Auto-configure
+oc serve --auto-launch      # Start server
+oc serve --headless-shell   # Headless mode
+oc doctor                   # Diagnose issues
+```
+
+---
+
+## Cross-Platform
+
+| Platform | Status |
+|----------|--------|
+| **macOS** | Full support |
+| **Windows** | Full support (taskkill process cleanup) |
+| **Linux** | Full support (Snap paths, `CHROME_PATH` env, `--no-sandbox` for CI) |
+
+---
+
+## Development
+
+```bash
+git clone https://github.com/shaun0927/openchrome.git
+cd openchrome
+npm install && npm run build && npm test
+```
+
+## License
+
+MIT

package/assets/demo.svg

@@ -0,0 +1,278 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 480">
+  <defs>
+    <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#0d1117"/>
+      <stop offset="100%" style="stop-color:#161b22"/>
+    </linearGradient>
+    <linearGradient id="successGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#00b894"/>
+      <stop offset="100%" style="stop-color:#00cec9"/>
+    </linearGradient>
+    <linearGradient id="authGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#e17055"/>
+      <stop offset="100%" style="stop-color:#e74c3c"/>
+    </linearGradient>
+    <linearGradient id="taskGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#636e72"/>
+      <stop offset="100%" style="stop-color:#74b9ff"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Background -->
+  <rect width="800" height="480" fill="url(#bgGrad)" rx="12"/>
+
+  <!-- Title -->
+  <text x="400" y="30" text-anchor="middle" fill="#fff" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="bold">
+    Playwright MCP vs OpenChrome — 5 Authenticated Sites
+  </text>
+  <text x="400" y="48" text-anchor="middle" fill="#636e72" font-family="system-ui" font-size="11">
+    AWS Billing + Stripe Dashboard + Vercel Usage + GitHub Actions + Slack Messages
+  </text>
+
+  <!-- ═══════════════════════════════════════════════════════ -->
+  <!-- LEFT SIDE: Playwright MCP (Sequential + Auth overhead) -->
+  <!-- ═══════════════════════════════════════════════════════ -->
+  <g transform="translate(20, 65)">
+    <!-- Header -->
+    <rect x="0" y="0" width="370" height="24" rx="6" fill="#2d3436"/>
+    <circle cx="14" cy="12" r="4" fill="#e74c3c"/>
+    <circle cx="28" cy="12" r="4" fill="#f39c12"/>
+    <circle cx="42" cy="12" r="4" fill="#27ae60"/>
+    <text x="185" y="16" text-anchor="middle" fill="#b2bec3" font-family="monospace" font-size="10" font-weight="bold">Playwright MCP</text>
+
+    <!-- Terminal body -->
+    <rect x="0" y="24" width="370" height="340" fill="#0d1117" rx="0"/>
+    <rect x="0" y="354" width="370" height="10" rx="0" ry="6" fill="#2d3436"/>
+
+    <!-- Legend -->
+    <rect x="10" y="32" width="8" height="8" fill="url(#authGrad)" rx="1"/>
+    <text x="22" y="40" fill="#e17055" font-family="monospace" font-size="9">Login (30-60s each)</text>
+    <rect x="160" y="32" width="8" height="8" fill="url(#taskGrad)" rx="1"/>
+    <text x="172" y="40" fill="#74b9ff" font-family="monospace" font-size="9">Task (~3s each)</text>
+
+    <!-- Site 1: AWS — auth then task, sequential -->
+    <text x="10" y="62" fill="#b2bec3" font-family="monospace" font-size="10">AWS Billing</text>
+    <!-- Auth bar (long) -->
+    <rect x="90" y="53" width="0" height="10" rx="2" fill="url(#authGrad)">
+      <animate attributeName="width" values="0;0;30;60;90;120;150;180;180;180;180;180;180;180;180;180;180;180;180;180" dur="20s" repeatCount="indefinite"/>
+    </rect>
+    <text x="92" y="62" fill="#fff" font-family="monospace" font-size="8" opacity="0.8">
+      <tspan>login...</tspan>
+      <animate attributeName="opacity" values="0;0;0.8;0.8;0.8;0.8;0.8;0;0;0;0;0;0;0;0;0;0;0;0;0" dur="20s" repeatCount="indefinite"/>
+    </text>
+    <!-- Task bar (short) -->
+    <rect x="272" y="53" width="0" height="10" rx="2" fill="url(#taskGrad)">
+      <animate attributeName="width" values="0;0;0;0;0;0;0;0;15;15;15;15;15;15;15;15;15;15;15;15" dur="20s" repeatCount="indefinite"/>
+    </rect>
+    <text x="295" y="62" fill="#00b894" font-family="monospace" font-size="9">
+      <tspan>ok</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;1;1;1;1;1;1;1;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+    </text>
+
+    <!-- Site 2: Stripe — starts after AWS finishes -->
+    <text x="10" y="86" fill="#b2bec3" font-family="monospace" font-size="10">
+      <tspan>Stripe</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;1;1;1;1;1;1;1;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+    </text>
+    <rect x="90" y="77" width="0" height="10" rx="2" fill="url(#authGrad)">
+      <animate attributeName="width" values="0;0;0;0;0;0;0;0;0;0;30;60;90;120;150;150;150;150;150;150" dur="20s" repeatCount="indefinite"/>
+    </rect>
+    <text x="92" y="86" fill="#fff" font-family="monospace" font-size="8">
+      <tspan>login...</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;0;0.8;0.8;0.8;0.8;0;0;0;0;0;0" dur="20s" repeatCount="indefinite"/>
+    </text>
+    <rect x="242" y="77" width="0" height="10" rx="2" fill="url(#taskGrad)">
+      <animate attributeName="width" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;15;15;15;15;15" dur="20s" repeatCount="indefinite"/>
+    </rect>
+    <text x="265" y="86" fill="#00b894" font-family="monospace" font-size="9">
+      <tspan>ok</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+    </text>
+
+    <!-- Site 3: Vercel — waiting... -->
+    <text x="10" y="110" fill="#b2bec3" font-family="monospace" font-size="10">
+      <tspan>Vercel</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+    </text>
+    <rect x="90" y="101" width="0" height="10" rx="2" fill="url(#authGrad)">
+      <animate attributeName="width" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;30;60;90" dur="20s" repeatCount="indefinite"/>
+    </rect>
+    <text x="92" y="110" fill="#fff" font-family="monospace" font-size="8">
+      <tspan>login...</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0.8;0.8;0.8" dur="20s" repeatCount="indefinite"/>
+    </text>
+
+    <!-- Site 4: GitHub — not started yet -->
+    <text x="10" y="134" fill="#636e72" font-family="monospace" font-size="10">
+      <tspan>GitHub</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0.5" dur="20s" repeatCount="indefinite"/>
+    </text>
+
+    <!-- Site 5: Slack — not started yet -->
+    <text x="10" y="158" fill="#636e72" font-family="monospace" font-size="10">
+      <tspan>Slack</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0" dur="20s" repeatCount="indefinite"/>
+    </text>
+
+    <!-- Waiting dots -->
+    <text x="90" y="134" fill="#636e72" font-family="monospace" font-size="10">
+      <tspan>waiting...</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0.5" dur="20s" repeatCount="indefinite"/>
+    </text>
+    <text x="90" y="158" fill="#636e72" font-family="monospace" font-size="10">
+      <tspan>waiting...</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0.5" dur="20s" repeatCount="indefinite"/>
+    </text>
+
+    <!-- Memory usage (climbing) -->
+    <g>
+      <animate attributeName="opacity" values="0;0;0;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+      <rect x="10" y="185" width="350" height="48" rx="4" fill="#1a1a1a"/>
+      <text x="20" y="201" fill="#e74c3c" font-family="monospace" font-size="9" font-weight="bold">Memory Usage</text>
+      <!-- Memory bar growing -->
+      <rect x="20" y="210" width="0" height="14" rx="2" fill="#e74c3c" opacity="0.6">
+        <animate attributeName="width" values="0;40;60;80;100;120;140;160;180;200;220;240;260;280;280;300;300;320;320;320" dur="20s" repeatCount="indefinite"/>
+      </rect>
+      <text x="20" y="220" fill="#fff" font-family="monospace" font-size="8">
+        <animate attributeName="textContent" values="200MB;400MB;600MB;800MB;1.0GB;1.2GB;1.4GB;1.6GB;1.8GB;2.0GB" dur="20s" repeatCount="indefinite"/>
+      </text>
+      <!-- Show text separately with animation -->
+      <text x="25" y="220" fill="#fff" font-family="monospace" font-size="8" font-weight="bold">
+        <tspan>2.5 GB</tspan>
+        <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;1;1" dur="20s" repeatCount="indefinite"/>
+      </text>
+      <text x="180" y="220" fill="#e17055" font-family="monospace" font-size="8">
+        <tspan>(5 browser processes)</tspan>
+        <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;1;1" dur="20s" repeatCount="indefinite"/>
+      </text>
+    </g>
+
+    <!-- Elapsed time (counting up) -->
+    <g>
+      <animate attributeName="opacity" values="0;0;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+      <text x="10" y="260" fill="#636e72" font-family="monospace" font-size="10">Elapsed:</text>
+      <text x="72" y="260" fill="#fdcb6e" font-family="monospace" font-size="10" font-weight="bold">
+        <tspan>still running...</tspan>
+        <animate attributeName="opacity" values="0;0;1;1;1;1;1;1;0.5;1;1;1;1;1;0.5;1;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+      </text>
+    </g>
+
+    <!-- Bottom status -->
+    <text x="185" y="310" text-anchor="middle" fill="#e74c3c" font-family="system-ui" font-size="12" font-weight="bold">
+      Sequential + Login per site
+    </text>
+    <text x="185" y="328" text-anchor="middle" fill="#636e72" font-family="monospace" font-size="10">
+      ~250s for 5 sites (50s auth x 5 + tasks)
+    </text>
+    <text x="185" y="346" text-anchor="middle" fill="#e17055" font-family="monospace" font-size="10">
+      ~500MB RAM per browser instance
+    </text>
+  </g>
+
+  <!-- ═══════════════════════════════════════════════ -->
+  <!-- RIGHT SIDE: OpenChrome (Parallel + Zero auth + Light) -->
+  <!-- ═══════════════════════════════════════════════ -->
+  <g transform="translate(410, 65)">
+    <!-- Header -->
+    <rect x="0" y="0" width="370" height="24" rx="6" fill="#2d3436"/>
+    <circle cx="14" cy="12" r="4" fill="#e74c3c"/>
+    <circle cx="28" cy="12" r="4" fill="#f39c12"/>
+    <circle cx="42" cy="12" r="4" fill="#27ae60"/>
+    <text x="185" y="16" text-anchor="middle" fill="#00b894" font-family="monospace" font-size="10" font-weight="bold">OpenChrome</text>
+
+    <!-- Terminal body -->
+    <rect x="0" y="24" width="370" height="340" fill="#0d1117"/>
+    <rect x="0" y="354" width="370" height="10" rx="0" ry="6" fill="#2d3436"/>
+
+    <!-- Legend -->
+    <text x="10" y="40" fill="#636e72" font-family="monospace" font-size="9">No login needed — already authenticated</text>
+
+    <!-- ALL 5 start simultaneously -->
+    <text x="10" y="62" fill="#a29bfe" font-family="monospace" font-size="10">AWS Billing</text>
+    <rect x="110" y="53" width="0" height="10" rx="2" fill="url(#successGrad)">
+      <animate attributeName="width" values="0;0;40;80;120;120;120;120;120;120;120;120;120;120;120;120;120;120;120;120" dur="20s" repeatCount="indefinite"/>
+    </rect>
+    <text x="235" y="62" fill="#00b894" font-family="monospace" font-size="9">
+      <tspan>done 2.8s</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+    </text>
+
+    <text x="10" y="82" fill="#a29bfe" font-family="monospace" font-size="10">Stripe</text>
+    <rect x="110" y="73" width="0" height="10" rx="2" fill="url(#successGrad)">
+      <animate attributeName="width" values="0;0;35;75;110;110;110;110;110;110;110;110;110;110;110;110;110;110;110;110" dur="20s" repeatCount="indefinite"/>
+    </rect>
+    <text x="225" y="82" fill="#00b894" font-family="monospace" font-size="9">
+      <tspan>done 2.5s</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+    </text>
+
+    <text x="10" y="102" fill="#a29bfe" font-family="monospace" font-size="10">Vercel</text>
+    <rect x="110" y="93" width="0" height="10" rx="2" fill="url(#successGrad)">
+      <animate attributeName="width" values="0;0;45;90;130;130;130;130;130;130;130;130;130;130;130;130;130;130;130;130" dur="20s" repeatCount="indefinite"/>
+    </rect>
+    <text x="245" y="102" fill="#00b894" font-family="monospace" font-size="9">
+      <tspan>done 3.1s</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+    </text>
+
+    <text x="10" y="122" fill="#a29bfe" font-family="monospace" font-size="10">GitHub</text>
+    <rect x="110" y="113" width="0" height="10" rx="2" fill="url(#successGrad)">
+      <animate attributeName="width" values="0;0;30;65;100;100;100;100;100;100;100;100;100;100;100;100;100;100;100;100" dur="20s" repeatCount="indefinite"/>
+    </rect>
+    <text x="215" y="122" fill="#00b894" font-family="monospace" font-size="9">
+      <tspan>done 2.3s</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+    </text>
+
+    <text x="10" y="142" fill="#a29bfe" font-family="monospace" font-size="10">Slack</text>
+    <rect x="110" y="133" width="0" height="10" rx="2" fill="url(#successGrad)">
+      <animate attributeName="width" values="0;0;38;78;115;115;115;115;115;115;115;115;115;115;115;115;115;115;115;115" dur="20s" repeatCount="indefinite"/>
+    </rect>
+    <text x="230" y="142" fill="#00b894" font-family="monospace" font-size="9">
+      <tspan>done 2.6s</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+    </text>
+
+    <!-- Result box appears fast -->
+    <g>
+      <animate attributeName="opacity" values="0;0;0;0;0;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+      <rect x="10" y="160" width="350" height="55" rx="6" fill="#0a2e0a" stroke="#00b894" stroke-width="1"/>
+      <text x="185" y="180" text-anchor="middle" fill="#00b894" font-family="system-ui" font-size="13" font-weight="bold">
+        All 5 sites done in 3.1s
+      </text>
+      <text x="185" y="200" text-anchor="middle" fill="#55efc4" font-family="monospace" font-size="11">
+        Zero logins. Zero waiting. All parallel.
+      </text>
+    </g>
+
+    <!-- Memory usage (small and stable) -->
+    <g>
+      <animate attributeName="opacity" values="0;0;0;0;0;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+      <rect x="10" y="230" width="350" height="48" rx="4" fill="#1a1a1a"/>
+      <text x="20" y="246" fill="#00b894" font-family="monospace" font-size="9" font-weight="bold">Memory Usage</text>
+      <rect x="20" y="255" width="60" height="14" rx="2" fill="#00b894" opacity="0.5"/>
+      <text x="25" y="265" fill="#fff" font-family="monospace" font-size="8" font-weight="bold">~300 MB</text>
+      <text x="100" y="265" fill="#55efc4" font-family="monospace" font-size="8">(1 Chrome + 5 lightweight contexts)</text>
+    </g>
+
+    <!-- Speed comparison callout -->
+    <g>
+      <animate attributeName="opacity" values="0;0;0;0;0;0;1;1;1;1;1;1;1;1;1;1;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+      <rect x="30" y="290" width="310" height="50" rx="8" fill="#0a2e0a" stroke="#00cec9" stroke-width="2"/>
+      <text x="185" y="313" text-anchor="middle" fill="#00cec9" font-family="system-ui" font-size="20" font-weight="bold">
+        80x faster
+      </text>
+      <text x="185" y="332" text-anchor="middle" fill="#81ecec" font-family="monospace" font-size="10">
+        3.1s vs ~250s  |  300MB vs 2.5GB
+      </text>
+    </g>
+  </g>
+
+  <!-- Bottom comparison bar -->
+  <g transform="translate(0, 440)">
+    <rect x="20" y="0" width="760" height="30" rx="6" fill="#161b22" stroke="#2d3436" stroke-width="1"/>
+    <text x="120" y="20" text-anchor="middle" fill="#e74c3c" font-family="monospace" font-size="10">Playwright: ~250s | 2.5GB</text>
+    <text x="400" y="20" text-anchor="middle" fill="#636e72" font-family="system-ui" font-size="11" font-weight="bold">vs</text>
+    <text x="650" y="20" text-anchor="middle" fill="#00b894" font-family="monospace" font-size="10">OpenChrome: ~3s | 300MB | already logged in</text>
+  </g>
+</svg>