skills/browser-use__browser-use
1
0
Fork 0
mirror of https://github.com/browser-use/browser-use.git synced 2026-09-14 19:59:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: embed driving demo and simplify the three Browser Use paths

Browse Source
This commit is contained in:
MagMueller
2026-09-09 12:05:07 -07:00
parent ac0e918bbf
commit 0acc9ce89b
10 changed files with 212 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/readme/README.md
+19 -28
View File
@@ -1,36 +1,27 @@
# README artwork and demo sources
# README diagram and demo sources
These assets reuse Browser Use's existing website and documentation artwork.
No demo footage was generated for this README.
## Product diagram
## Product artwork
`which-product-light.svg` and `which-product-dark.svg` are editable SVGs.
They are adapted from [the SDK product diagram](https://github.com/browser-use/sdk/blob/bfc0140801caf6a4c518c811f03674135efbd4aa/docs/cloud/images/which-product-light.svg),
introduced in [SDK PR #241](https://github.com/browser-use/sdk/pull/241).
Copied unchanged from the [Browser Use website](https://browser-use.com),
`browser-use/website` commit `f07970a`:
The README version shows three paths:
| Local file | Website source |
| --- | --- |
| `local-agent.jpg` | `/lander/plates/oss-14b77bfd.jpg` |
| `cloud-browsers.jpg` | `/lander/plates/browsers-8dd60aa0.jpg` |
| `hosted-agent.jpg` | `/lander/plates/agents-be1dd941.jpg` |
- Fully hosted cloud: OpenCode → Browser Use CLI → cloud browser.
- CLI: your existing agent → Browser Use CLI → local or cloud browser.
- Python library: your code → Browser Use agent → local or cloud browser.
## Product map
Keep the light and dark SVGs structurally identical when changing the diagram.
The SDK source remains the reference for the hosted stack; this README adds the
Python-library path and omits the Playwright branch.
The four `which-product-*.svg` files are copied unchanged from
[`browser-use/sdk`, `docs/cloud/images`](https://github.com/browser-use/sdk/tree/main/docs/cloud/images).
They were introduced in [SDK PR #241](https://github.com/browser-use/sdk/pull/241).
Keep the local/cloud routes and separate Profile Sync path aligned with the
[product guide](https://docs.browser-use.com/cloud/which-product).
## Driving-test demo
## Demo thumbnail
The inline GIF is converted from [Johannes Dittrich's public driving-test video](https://x.com/mathisdittrich/status/2078619618265141560).
It preserves the full 20.4-second recording at 960×540, 10 frames per second,
with an infinite loop. The source recording already obscures the contact fields.
No demo footage was generated.
| Local file | Published source |
| --- | --- |
| `driving-test.jpg` | [Johannes Dittrich's driving-test demo](https://x.com/mathisdittrich/status/2078619618265141560) |
The README links to the playable public recording. Keep the poster and
caption consistent with that recording when updating them.
`driving-test.jpg` is the 8-second frame of Johannes's public recording,
showing the appointment-location selection. The personal contact fields are
not in this frame.
The GIF is hosted as a [GitHub attachment](https://github.com/user-attachments/assets/135885e8-1141-4e10-b719-bf690ae7d260)
so cloning the repository does not download the animation.
static/readme/cloud-browsers.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 165 KiB

static/readme/driving-test.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 57 KiB

static/readme/hosted-agent.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 211 KiB

static/readme/local-agent.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 147 KiB

static/readme/which-product-dark-mobile.svg
-56
View File
@@ -1,56 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="360" height="704" viewBox="0 0 360 704" role="img" aria-labelledby="title desc">
<title id="title">Choose your agent, CLI and browser</title>
<desc id="desc">Both columns share three aligned rows: agent, CLI, browser. On your computer, choose Claude Code, Codex, OpenCode or Hermes Agent, then Playwright CLI or Browser Use CLI. Both CLIs can use real Chrome or the single Cloud Browser in our cloud. Hosted V4 runs OpenCode, Browser Use CLI and that Cloud Browser. Profile Sync copies selected cookies from real Chrome to a cloud profile; it is a separate, explicit step. Send a prompt through the V4 API and get a result back.</desc>
<defs><marker id="gray-arrow" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto"><path d="M0 0L7 3.5L0 7Z" fill="#A1A1AA"/></marker><marker id="orange-arrow" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto"><path d="M0 0L7 3.5L0 7Z" fill="#FFAA66"/></marker></defs>
<rect width="360" height="704" fill="#18181B"/><g font-family="Inter, ui-sans-serif, system-ui, sans-serif">
<rect x="196" y="10" width="156" height="686" rx="12" fill="#29211B" stroke="#835733" stroke-width="1.7"/>
<text x="90" y="39" fill="#FAFAFA" font-size="16" font-weight="750" text-anchor="middle">YOUR COMPUTER</text>
<text x="90" y="63" fill="#C0C0C8" font-size="16" font-weight="450" text-anchor="middle">Choose each part</text>
<text x="274" y="39" fill="#FAFAFA" font-size="16" font-weight="750" text-anchor="middle">OUR CLOUD</text>
<text x="274" y="63" fill="#FFAA66" font-size="16" font-weight="600" text-anchor="middle">Send a prompt.</text>
<text x="274" y="84" fill="#C0C0C8" font-size="16" font-weight="450" text-anchor="middle">Get a result.</text>
<rect x="8" y="95" width="166" height="128" rx="12" fill="#27272A" stroke="#A1A1AA" stroke-width="1.7"/>
<text x="91" y="119" fill="#C0C0C8" font-size="16" font-weight="700" text-anchor="middle">YOUR AGENT</text>
<text x="91" y="143" fill="#FAFAFA" font-size="16" font-weight="600" text-anchor="middle">Claude Code</text>
<text x="91" y="165" fill="#FAFAFA" font-size="16" font-weight="600" text-anchor="middle">Codex · OpenCode</text>
<text x="91" y="187" fill="#FAFAFA" font-size="16" font-weight="600" text-anchor="middle">Hermes Agent</text>
<rect x="208" y="95" width="132" height="128" rx="12" fill="#27272A" stroke="#A1A1AA" stroke-width="1.7"/>
<text x="274" y="166" fill="#FAFAFA" font-size="18" font-weight="750" text-anchor="middle">OpenCode</text>
<path d="M91 223V253" fill="none" stroke="#A1A1AA" stroke-width="2" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<path d="M274 223V253" fill="none" stroke="#A1A1AA" stroke-width="2" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<rect x="8" y="263" width="166" height="92" rx="12" fill="#3A281A" stroke="#FFAA66" stroke-width="1.7"/>
<text x="91" y="292" fill="#FAFAFA" font-size="16" font-weight="750" text-anchor="middle">Playwright CLI</text>
<text x="91" y="316" fill="#C0C0C8" font-size="16" font-weight="450" text-anchor="middle">or</text>
<text x="91" y="340" fill="#FAFAFA" font-size="16" font-weight="600" text-anchor="middle">Browser Use CLI</text>
<rect x="208" y="263" width="132" height="92" rx="12" fill="#3A281A" stroke="#FFAA66" stroke-width="1.7"/>
<text x="274" y="303" fill="#FAFAFA" font-size="16" font-weight="750" text-anchor="middle">Browser Use</text>
<text x="274" y="326" fill="#FAFAFA" font-size="16" font-weight="750" text-anchor="middle">CLI</text>
<path d="M50 355V379H132V355" fill="none" stroke="#A1A1AA" stroke-width="2" stroke-linejoin="round"/>
<path d="M50 379V406H87V425" fill="none" stroke="#A1A1AA" stroke-width="2" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<path d="M132 379H183V489H202" fill="none" stroke="#FFAA66" stroke-width="2" stroke-linejoin="round" marker-end="url(#orange-arrow)"/>
<path d="M274 355V425" fill="none" stroke="#FFAA66" stroke-width="2" marker-end="url(#orange-arrow)"/>
<circle cx="50" cy="379" r="3" fill="#A1A1AA"/>
<circle cx="132" cy="379" r="3" fill="#FFAA66"/>
<rect x="18" y="435" width="138" height="108" rx="12" fill="#18181B" stroke="#A1A1AA" stroke-width="1.7"/>
<path d="M18 462H156" fill="none" stroke="#A1A1AA" stroke-width="2" stroke-linejoin="round"/>
<circle cx="32" cy="449" r="2.6" fill="#A1A1AA"/>
<circle cx="42" cy="449" r="2.6" fill="#A1A1AA"/>
<circle cx="52" cy="449" r="2.6" fill="#A1A1AA"/>
<text x="87" y="491" fill="#FAFAFA" font-size="16" font-weight="750" text-anchor="middle">Real Chrome</text>
<text x="87" y="514" fill="#C0C0C8" font-size="16" font-weight="450" text-anchor="middle">your tabs,</text>
<text x="87" y="532" fill="#C0C0C8" font-size="16" font-weight="450" text-anchor="middle">cookies, logins</text>
<rect x="208" y="435" width="132" height="108" rx="12" fill="#3A281A" stroke="#FFAA66" stroke-width="1.7"/>
<path d="M208 462H340" fill="none" stroke="#FFAA66" stroke-width="2" stroke-linejoin="round"/>
<circle cx="222" cy="449" r="2.6" fill="#FFAA66"/>
<circle cx="232" cy="449" r="2.6" fill="#FFAA66"/>
<circle cx="242" cy="449" r="2.6" fill="#FFAA66"/>
<text x="274" y="491" fill="#FAFAFA" font-size="16" font-weight="750" text-anchor="middle">Cloud Browser</text>
<text x="274" y="514" fill="#C0C0C8" font-size="16" font-weight="450" text-anchor="middle">profiles, stealth,</text>
<text x="274" y="532" fill="#C0C0C8" font-size="16" font-weight="450" text-anchor="middle">proxies</text>
<path d="M87 543V573H274V553" fill="none" stroke="#A1A1AA" stroke-width="2" stroke-dasharray="6 5" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<rect x="80" y="580" width="204" height="26" rx="4" fill="#18181B"/>
<text x="182" y="599" fill="#C0C0C8" font-size="16" font-weight="600" text-anchor="middle">Profile Sync · cookies</text>
<text x="89" y="651" fill="#C0C0C8" font-size="16" font-weight="600" text-anchor="middle">Both CLIs.</text>
<text x="89" y="673" fill="#C0C0C8" font-size="16" font-weight="600" text-anchor="middle">Either browser.</text>
<text x="274" y="651" fill="#FFAA66" font-size="16" font-weight="600" text-anchor="middle">Hosted V4 API</text>
</g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 6.0 KiB

static/readme/which-product-dark.svg
+86 -51
View File
@@ -1,51 +1,86 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="674" viewBox="0 0 1200 674" role="img" aria-labelledby="title desc">
<title id="title">Choose your agent, CLI and browser</title>
<desc id="desc">Both columns share three aligned rows: agent, CLI, browser. On your computer, choose Claude Code, Codex, OpenCode or Hermes Agent, then Playwright CLI or Browser Use CLI. Both CLIs can use real Chrome or the single Cloud Browser in our cloud. Hosted V4 runs OpenCode, Browser Use CLI and that Cloud Browser. Profile Sync copies selected cookies from real Chrome to a cloud profile; it is a separate, explicit step. Send a prompt through the V4 API and get a result back.</desc>
<defs><marker id="gray-arrow" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto"><path d="M0 0L7 3.5L0 7Z" fill="#A1A1AA"/></marker><marker id="orange-arrow" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto"><path d="M0 0L7 3.5L0 7Z" fill="#FFAA66"/></marker></defs>
<rect width="1200" height="674" fill="#18181B"/><g font-family="Inter, ui-sans-serif, system-ui, sans-serif">
<rect x="648" y="18" width="524" height="620" rx="17" fill="#29211B" stroke="#835733" stroke-width="2.5"/>
<text x="298" y="62" fill="#FAFAFA" font-size="25" font-weight="750" text-anchor="middle">YOUR COMPUTER</text>
<text x="298" y="91" fill="#C0C0C8" font-size="17" font-weight="450" text-anchor="middle">Choose each part</text>
<text x="910" y="62" fill="#FAFAFA" font-size="25" font-weight="750" text-anchor="middle">OUR CLOUD</text>
<text x="910" y="91" fill="#C0C0C8" font-size="17" font-weight="450" text-anchor="middle">Send a prompt, get a result</text>
<rect x="48" y="128" width="500" height="96" rx="17" fill="#27272A" stroke="#A1A1AA" stroke-width="2.5"/>
<text x="298" y="161" fill="#C0C0C8" font-size="14" font-weight="700" text-anchor="middle">YOUR AGENT</text>
<text x="298" y="195" fill="#FAFAFA" font-size="18" font-weight="600" text-anchor="middle">Claude Code · Codex · OpenCode · Hermes Agent</text>
<rect x="784" y="128" width="252" height="96" rx="17" fill="#27272A" stroke="#A1A1AA" stroke-width="2.5"/>
<text x="910" y="184" fill="#FAFAFA" font-size="23" font-weight="750" text-anchor="middle">OpenCode</text>
<path d="M298 224V245H167V270" fill="none" stroke="#A1A1AA" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<path d="M298 245H429V270" fill="none" stroke="#A1A1AA" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<path d="M910 224V270" fill="none" stroke="#A1A1AA" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<rect x="48" y="280" width="238" height="78" rx="17" fill="#27272A" stroke="#A1A1AA" stroke-width="2.5"/>
<text x="167" y="327" fill="#FAFAFA" font-size="21" font-weight="750" text-anchor="middle">Playwright CLI</text>
<rect x="310" y="280" width="238" height="78" rx="17" fill="#3A281A" stroke="#FFAA66" stroke-width="2.5"/>
<text x="429" y="327" fill="#FAFAFA" font-size="21" font-weight="750" text-anchor="middle">Browser Use CLI</text>
<rect x="784" y="280" width="252" height="78" rx="17" fill="#3A281A" stroke="#FFAA66" stroke-width="2.5"/>
<text x="910" y="327" fill="#FAFAFA" font-size="21" font-weight="750" text-anchor="middle">Browser Use CLI</text>
<path d="M167 358V395H429V358" fill="none" stroke="#A1A1AA" stroke-width="2.5" stroke-linejoin="round"/>
<path d="M167 395V444" fill="none" stroke="#A1A1AA" stroke-width="2.5" marker-end="url(#gray-arrow)"/>
<path d="M429 395V425H746V520H772" fill="none" stroke="#FFAA66" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#orange-arrow)"/>
<path d="M910 358V444" fill="none" stroke="#FFAA66" stroke-width="2.5" marker-end="url(#orange-arrow)"/>
<circle cx="167" cy="395" r="4" fill="#A1A1AA"/>
<circle cx="429" cy="395" r="4" fill="#FFAA66"/>
<text x="125" y="423" fill="#C0C0C8" font-size="14" font-weight="750" text-anchor="middle">LOCAL</text>
<text x="585" y="413" fill="#FFAA66" font-size="14" font-weight="750" text-anchor="middle">CLOUD</text>
<rect x="41" y="454" width="252" height="124" rx="17" fill="#18181B" stroke="#A1A1AA" stroke-width="2.5"/>
<path d="M41 481H293" fill="none" stroke="#A1A1AA" stroke-width="2.5" stroke-linejoin="round"/>
<circle cx="55" cy="468" r="2.6" fill="#A1A1AA"/>
<circle cx="65" cy="468" r="2.6" fill="#A1A1AA"/>
<circle cx="75" cy="468" r="2.6" fill="#A1A1AA"/>
<text x="167" y="525" fill="#FAFAFA" font-size="24" font-weight="750" text-anchor="middle">Real Chrome</text>
<text x="167" y="553" fill="#C0C0C8" font-size="16" font-weight="450" text-anchor="middle">your tabs · cookies · logins</text>
<rect x="784" y="454" width="252" height="124" rx="17" fill="#3A281A" stroke="#FFAA66" stroke-width="2.5"/>
<path d="M784 481H1036" fill="none" stroke="#FFAA66" stroke-width="2.5" stroke-linejoin="round"/>
<circle cx="798" cy="468" r="2.6" fill="#FFAA66"/>
<circle cx="808" cy="468" r="2.6" fill="#FFAA66"/>
<circle cx="818" cy="468" r="2.6" fill="#FFAA66"/>
<text x="910" y="525" fill="#FAFAFA" font-size="24" font-weight="750" text-anchor="middle">Cloud Browser</text>
<text x="910" y="553" fill="#C0C0C8" font-size="16" font-weight="450" text-anchor="middle">profiles · stealth · proxies</text>
<path d="M305 561H772" fill="none" stroke="#A1A1AA" stroke-width="2.2" stroke-dasharray="7 6" marker-end="url(#gray-arrow)"/>
<text x="538" y="587" fill="#C0C0C8" font-size="16" font-weight="600" text-anchor="middle">Profile Sync · cookies</text>
<text x="910" y="613" fill="#FFAA66" font-size="17" font-weight="600" text-anchor="middle">Hosted V4 API</text>
<text x="298" y="625" fill="#C0C0C8" font-size="17" font-weight="500" text-anchor="middle">Either CLI can control either browser.</text>
</g></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="690" viewBox="0 0 1440 690" role="img" aria-labelledby="title desc">
<title id="title">Three ways to use Browser Use</title>
<desc id="desc">Fully hosted cloud runs our OpenCode agent, Browser Use CLI, and a cloud browser through the V4 API. The CLI connects your existing agent, including Claude Code, Codex, OpenCode, Hermes, or Pi, to a local or cloud browser. The Python library runs the Browser Use agent directly, without the CLI, and also connects to a local or cloud browser.</desc>
<defs>
<marker id="arrow" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0 0L8 4L0 8Z" fill="#92929C"/></marker>
<marker id="cloud-arrow" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0 0L8 4L0 8Z" fill="#FFAB66"/></marker>
</defs>
<rect width="1440" height="690" fill="#18181B"/>
<g font-family="Inter, ui-sans-serif, system-ui, sans-serif">
<rect x="16" y="16" width="448" height="658" rx="22" fill="#302419" stroke="#785432" stroke-width="2"/>
<rect x="488" y="16" width="936" height="658" rx="22" fill="#202023" stroke="#92929C" stroke-width="2"/>
<text x="240" y="55" text-anchor="middle" fill="#FFAB66" font-size="18" font-weight="700">RUN BY BROWSER USE</text>
<text x="956" y="55" text-anchor="middle" fill="#BDBDC5" font-size="18" font-weight="700">ON YOUR COMPUTER</text>
<path d="M956 85V650" stroke="#92929C" stroke-opacity="0.35"/>
<text x="240" y="109" text-anchor="middle" fill="#FAFAFA" font-size="32" font-weight="750">Fully hosted cloud</text>
<text x="720" y="109" text-anchor="middle" fill="#FAFAFA" font-size="32" font-weight="750">CLI</text>
<text x="1192" y="109" text-anchor="middle" fill="#FAFAFA" font-size="32" font-weight="750">Python library</text>
<text x="240" y="140" text-anchor="middle" fill="#BDBDC5" font-size="20" font-weight="450">Send a task through the API</text>
<text x="720" y="140" text-anchor="middle" fill="#BDBDC5" font-size="20" font-weight="450">Use your existing agent</text>
<text x="1192" y="140" text-anchor="middle" fill="#BDBDC5" font-size="20" font-weight="450">Run your own automation</text>
<rect x="64" y="184" width="352" height="112" rx="16" fill="#29292E" stroke="#92929C" stroke-width="2"/>
<text x="240" y="219" text-anchor="middle" fill="#BDBDC5" font-size="18" font-weight="700">OUR AGENT</text>
<text x="240" y="260" text-anchor="middle" fill="#FAFAFA" font-size="29" font-weight="750">OpenCode</text>
<rect x="520" y="184" width="400" height="112" rx="16" fill="#29292E" stroke="#92929C" stroke-width="2"/>
<text x="720" y="214" text-anchor="middle" fill="#BDBDC5" font-size="18" font-weight="700">YOUR AGENT</text>
<text x="720" y="247" text-anchor="middle" fill="#FAFAFA" font-size="24" font-weight="600">Claude Code · Codex</text>
<text x="720" y="278" text-anchor="middle" fill="#FAFAFA" font-size="24" font-weight="600">OpenCode · Hermes · Pi</text>
<rect x="992" y="184" width="400" height="112" rx="16" fill="#29292E" stroke="#92929C" stroke-width="2"/>
<text x="1192" y="219" text-anchor="middle" fill="#BDBDC5" font-size="18" font-weight="700">YOUR CODE</text>
<text x="1192" y="260" text-anchor="middle" fill="#FAFAFA" font-size="29" font-weight="750">Python library</text>
<path d="M240 296V336" fill="none" stroke="#92929C" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#arrow)"/>
<path d="M720 296V336" fill="none" stroke="#92929C" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#arrow)"/>
<path d="M1192 296V336" fill="none" stroke="#92929C" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#arrow)"/>
<rect x="64" y="350" width="352" height="78" rx="16" fill="#302419" stroke="#FFAB66" stroke-width="2"/>
<text x="240.0" y="397" text-anchor="middle" fill="#FAFAFA" font-size="28" font-weight="750">Browser Use CLI</text>
<rect x="520" y="350" width="400" height="78" rx="16" fill="#302419" stroke="#FFAB66" stroke-width="2"/>
<text x="720.0" y="397" text-anchor="middle" fill="#FAFAFA" font-size="28" font-weight="750">Browser Use CLI</text>
<rect x="992" y="350" width="400" height="78" rx="16" fill="#302419" stroke="#FFAB66" stroke-width="2"/>
<text x="1192.0" y="397" text-anchor="middle" fill="#FAFAFA" font-size="28" font-weight="750">Browser Use agent</text>
<path d="M240 428V498" fill="none" stroke="#FFAB66" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#cloud-arrow)"/>
<rect x="64" y="512" width="352" height="112" rx="16" fill="#302419" stroke="#FFAB66" stroke-width="2"/>
<path d="M64 538H416" stroke="#FFAB66" stroke-width="2"/>
<circle cx="78" cy="525" r="2.5" fill="#FFAB66"/>
<circle cx="88" cy="525" r="2.5" fill="#FFAB66"/>
<circle cx="98" cy="525" r="2.5" fill="#FFAB66"/>
<text x="240.0" y="575" text-anchor="middle" fill="#FAFAFA" font-size="23" font-weight="600">Cloud browser</text>
<text x="240.0" y="602" text-anchor="middle" fill="#BDBDC5" font-size="18" font-weight="450">stealth · profiles</text>
<text x="240" y="653" text-anchor="middle" fill="#FFAB66" font-size="20" font-weight="600">Hosted V4 API</text>
<path d="M720 428V458H615V498" fill="none" stroke="#92929C" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#arrow)"/>
<path d="M720 458H825V498" fill="none" stroke="#FFAB66" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#cloud-arrow)"/>
<text x="615" y="653" text-anchor="middle" fill="#BDBDC5" font-size="16" font-weight="700">LOCAL</text>
<text x="825" y="653" text-anchor="middle" fill="#FFAB66" font-size="16" font-weight="700">CLOUD</text>
<rect x="520" y="512" width="190" height="112" rx="16" fill="#29292E" stroke="#92929C" stroke-width="2"/>
<path d="M520 538H710" stroke="#92929C" stroke-width="2"/>
<circle cx="534" cy="525" r="2.5" fill="#92929C"/>
<circle cx="544" cy="525" r="2.5" fill="#92929C"/>
<circle cx="554" cy="525" r="2.5" fill="#92929C"/>
<text x="615.0" y="575" text-anchor="middle" fill="#FAFAFA" font-size="23" font-weight="600">Real Chrome</text>
<text x="615.0" y="602" text-anchor="middle" fill="#BDBDC5" font-size="18" font-weight="450">tabs · logins</text>
<rect x="730" y="512" width="190" height="112" rx="16" fill="#302419" stroke="#FFAB66" stroke-width="2"/>
<path d="M730 538H920" stroke="#FFAB66" stroke-width="2"/>
<circle cx="744" cy="525" r="2.5" fill="#FFAB66"/>
<circle cx="754" cy="525" r="2.5" fill="#FFAB66"/>
<circle cx="764" cy="525" r="2.5" fill="#FFAB66"/>
<text x="825.0" y="575" text-anchor="middle" fill="#FAFAFA" font-size="23" font-weight="600">Cloud browser</text>
<text x="825.0" y="602" text-anchor="middle" fill="#BDBDC5" font-size="18" font-weight="450">stealth · profiles</text>
<path d="M1192 428V458H1087V498" fill="none" stroke="#92929C" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#arrow)"/>
<path d="M1192 458H1297V498" fill="none" stroke="#FFAB66" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#cloud-arrow)"/>
<text x="1087" y="653" text-anchor="middle" fill="#BDBDC5" font-size="16" font-weight="700">LOCAL</text>
<text x="1297" y="653" text-anchor="middle" fill="#FFAB66" font-size="16" font-weight="700">CLOUD</text>
<rect x="992" y="512" width="190" height="112" rx="16" fill="#29292E" stroke="#92929C" stroke-width="2"/>
<path d="M992 538H1182" stroke="#92929C" stroke-width="2"/>
<circle cx="1006" cy="525" r="2.5" fill="#92929C"/>
<circle cx="1016" cy="525" r="2.5" fill="#92929C"/>
<circle cx="1026" cy="525" r="2.5" fill="#92929C"/>
<text x="1087.0" y="575" text-anchor="middle" fill="#FAFAFA" font-size="23" font-weight="600">Real Chrome</text>
<text x="1087.0" y="602" text-anchor="middle" fill="#BDBDC5" font-size="18" font-weight="450">tabs · logins</text>
<rect x="1202" y="512" width="190" height="112" rx="16" fill="#302419" stroke="#FFAB66" stroke-width="2"/>
<path d="M1202 538H1392" stroke="#FFAB66" stroke-width="2"/>
<circle cx="1216" cy="525" r="2.5" fill="#FFAB66"/>
<circle cx="1226" cy="525" r="2.5" fill="#FFAB66"/>
<circle cx="1236" cy="525" r="2.5" fill="#FFAB66"/>
<text x="1297.0" y="575" text-anchor="middle" fill="#FAFAFA" font-size="23" font-weight="600">Cloud browser</text>
<text x="1297.0" y="602" text-anchor="middle" fill="#BDBDC5" font-size="18" font-weight="450">stealth · profiles</text>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB

static/readme/which-product-light-mobile.svg
-56
View File
@@ -1,56 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="360" height="704" viewBox="0 0 360 704" role="img" aria-labelledby="title desc">
<title id="title">Choose your agent, CLI and browser</title>
<desc id="desc">Both columns share three aligned rows: agent, CLI, browser. On your computer, choose Claude Code, Codex, OpenCode or Hermes Agent, then Playwright CLI or Browser Use CLI. Both CLIs can use real Chrome or the single Cloud Browser in our cloud. Hosted V4 runs OpenCode, Browser Use CLI and that Cloud Browser. Profile Sync copies selected cookies from real Chrome to a cloud profile; it is a separate, explicit step. Send a prompt through the V4 API and get a result back.</desc>
<defs><marker id="gray-arrow" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto"><path d="M0 0L7 3.5L0 7Z" fill="#71717A"/></marker><marker id="orange-arrow" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto"><path d="M0 0L7 3.5L0 7Z" fill="#C94D00"/></marker></defs>
<rect width="360" height="704" fill="#FFFFFF"/><g font-family="Inter, ui-sans-serif, system-ui, sans-serif">
<rect x="196" y="10" width="156" height="686" rx="12" fill="#FFF7ED" stroke="#F2C99E" stroke-width="1.7"/>
<text x="90" y="39" fill="#242428" font-size="16" font-weight="750" text-anchor="middle">YOUR COMPUTER</text>
<text x="90" y="63" fill="#606068" font-size="16" font-weight="450" text-anchor="middle">Choose each part</text>
<text x="274" y="39" fill="#242428" font-size="16" font-weight="750" text-anchor="middle">OUR CLOUD</text>
<text x="274" y="63" fill="#C94D00" font-size="16" font-weight="600" text-anchor="middle">Send a prompt.</text>
<text x="274" y="84" fill="#606068" font-size="16" font-weight="450" text-anchor="middle">Get a result.</text>
<rect x="8" y="95" width="166" height="128" rx="12" fill="#F4F4F5" stroke="#71717A" stroke-width="1.7"/>
<text x="91" y="119" fill="#606068" font-size="16" font-weight="700" text-anchor="middle">YOUR AGENT</text>
<text x="91" y="143" fill="#242428" font-size="16" font-weight="600" text-anchor="middle">Claude Code</text>
<text x="91" y="165" fill="#242428" font-size="16" font-weight="600" text-anchor="middle">Codex · OpenCode</text>
<text x="91" y="187" fill="#242428" font-size="16" font-weight="600" text-anchor="middle">Hermes Agent</text>
<rect x="208" y="95" width="132" height="128" rx="12" fill="#F4F4F5" stroke="#71717A" stroke-width="1.7"/>
<text x="274" y="166" fill="#242428" font-size="18" font-weight="750" text-anchor="middle">OpenCode</text>
<path d="M91 223V253" fill="none" stroke="#71717A" stroke-width="2" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<path d="M274 223V253" fill="none" stroke="#71717A" stroke-width="2" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<rect x="8" y="263" width="166" height="92" rx="12" fill="#FFF0DF" stroke="#C94D00" stroke-width="1.7"/>
<text x="91" y="292" fill="#242428" font-size="16" font-weight="750" text-anchor="middle">Playwright CLI</text>
<text x="91" y="316" fill="#606068" font-size="16" font-weight="450" text-anchor="middle">or</text>
<text x="91" y="340" fill="#242428" font-size="16" font-weight="600" text-anchor="middle">Browser Use CLI</text>
<rect x="208" y="263" width="132" height="92" rx="12" fill="#FFF0DF" stroke="#C94D00" stroke-width="1.7"/>
<text x="274" y="303" fill="#242428" font-size="16" font-weight="750" text-anchor="middle">Browser Use</text>
<text x="274" y="326" fill="#242428" font-size="16" font-weight="750" text-anchor="middle">CLI</text>
<path d="M50 355V379H132V355" fill="none" stroke="#71717A" stroke-width="2" stroke-linejoin="round"/>
<path d="M50 379V406H87V425" fill="none" stroke="#71717A" stroke-width="2" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<path d="M132 379H183V489H202" fill="none" stroke="#C94D00" stroke-width="2" stroke-linejoin="round" marker-end="url(#orange-arrow)"/>
<path d="M274 355V425" fill="none" stroke="#C94D00" stroke-width="2" marker-end="url(#orange-arrow)"/>
<circle cx="50" cy="379" r="3" fill="#71717A"/>
<circle cx="132" cy="379" r="3" fill="#C94D00"/>
<rect x="18" y="435" width="138" height="108" rx="12" fill="#FFFFFF" stroke="#71717A" stroke-width="1.7"/>
<path d="M18 462H156" fill="none" stroke="#71717A" stroke-width="2" stroke-linejoin="round"/>
<circle cx="32" cy="449" r="2.6" fill="#71717A"/>
<circle cx="42" cy="449" r="2.6" fill="#71717A"/>
<circle cx="52" cy="449" r="2.6" fill="#71717A"/>
<text x="87" y="491" fill="#242428" font-size="16" font-weight="750" text-anchor="middle">Real Chrome</text>
<text x="87" y="514" fill="#606068" font-size="16" font-weight="450" text-anchor="middle">your tabs,</text>
<text x="87" y="532" fill="#606068" font-size="16" font-weight="450" text-anchor="middle">cookies, logins</text>
<rect x="208" y="435" width="132" height="108" rx="12" fill="#FFF0DF" stroke="#C94D00" stroke-width="1.7"/>
<path d="M208 462H340" fill="none" stroke="#C94D00" stroke-width="2" stroke-linejoin="round"/>
<circle cx="222" cy="449" r="2.6" fill="#C94D00"/>
<circle cx="232" cy="449" r="2.6" fill="#C94D00"/>
<circle cx="242" cy="449" r="2.6" fill="#C94D00"/>
<text x="274" y="491" fill="#242428" font-size="16" font-weight="750" text-anchor="middle">Cloud Browser</text>
<text x="274" y="514" fill="#606068" font-size="16" font-weight="450" text-anchor="middle">profiles, stealth,</text>
<text x="274" y="532" fill="#606068" font-size="16" font-weight="450" text-anchor="middle">proxies</text>
<path d="M87 543V573H274V553" fill="none" stroke="#71717A" stroke-width="2" stroke-dasharray="6 5" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<rect x="80" y="580" width="204" height="26" rx="4" fill="#FFFFFF"/>
<text x="182" y="599" fill="#606068" font-size="16" font-weight="600" text-anchor="middle">Profile Sync · cookies</text>
<text x="89" y="651" fill="#606068" font-size="16" font-weight="600" text-anchor="middle">Both CLIs.</text>
<text x="89" y="673" fill="#606068" font-size="16" font-weight="600" text-anchor="middle">Either browser.</text>
<text x="274" y="651" fill="#C94D00" font-size="16" font-weight="600" text-anchor="middle">Hosted V4 API</text>
</g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 6.0 KiB

static/readme/which-product-light.svg
+86 -51
View File
@@ -1,51 +1,86 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="674" viewBox="0 0 1200 674" role="img" aria-labelledby="title desc">
<title id="title">Choose your agent, CLI and browser</title>
<desc id="desc">Both columns share three aligned rows: agent, CLI, browser. On your computer, choose Claude Code, Codex, OpenCode or Hermes Agent, then Playwright CLI or Browser Use CLI. Both CLIs can use real Chrome or the single Cloud Browser in our cloud. Hosted V4 runs OpenCode, Browser Use CLI and that Cloud Browser. Profile Sync copies selected cookies from real Chrome to a cloud profile; it is a separate, explicit step. Send a prompt through the V4 API and get a result back.</desc>
<defs><marker id="gray-arrow" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto"><path d="M0 0L7 3.5L0 7Z" fill="#71717A"/></marker><marker id="orange-arrow" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto"><path d="M0 0L7 3.5L0 7Z" fill="#C94D00"/></marker></defs>
<rect width="1200" height="674" fill="#FFFFFF"/><g font-family="Inter, ui-sans-serif, system-ui, sans-serif">
<rect x="648" y="18" width="524" height="620" rx="17" fill="#FFF7ED" stroke="#F2C99E" stroke-width="2.5"/>
<text x="298" y="62" fill="#242428" font-size="25" font-weight="750" text-anchor="middle">YOUR COMPUTER</text>
<text x="298" y="91" fill="#606068" font-size="17" font-weight="450" text-anchor="middle">Choose each part</text>
<text x="910" y="62" fill="#242428" font-size="25" font-weight="750" text-anchor="middle">OUR CLOUD</text>
<text x="910" y="91" fill="#606068" font-size="17" font-weight="450" text-anchor="middle">Send a prompt, get a result</text>
<rect x="48" y="128" width="500" height="96" rx="17" fill="#F4F4F5" stroke="#71717A" stroke-width="2.5"/>
<text x="298" y="161" fill="#606068" font-size="14" font-weight="700" text-anchor="middle">YOUR AGENT</text>
<text x="298" y="195" fill="#242428" font-size="18" font-weight="600" text-anchor="middle">Claude Code · Codex · OpenCode · Hermes Agent</text>
<rect x="784" y="128" width="252" height="96" rx="17" fill="#F4F4F5" stroke="#71717A" stroke-width="2.5"/>
<text x="910" y="184" fill="#242428" font-size="23" font-weight="750" text-anchor="middle">OpenCode</text>
<path d="M298 224V245H167V270" fill="none" stroke="#71717A" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<path d="M298 245H429V270" fill="none" stroke="#71717A" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<path d="M910 224V270" fill="none" stroke="#71717A" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<rect x="48" y="280" width="238" height="78" rx="17" fill="#F4F4F5" stroke="#71717A" stroke-width="2.5"/>
<text x="167" y="327" fill="#242428" font-size="21" font-weight="750" text-anchor="middle">Playwright CLI</text>
<rect x="310" y="280" width="238" height="78" rx="17" fill="#FFF0DF" stroke="#C94D00" stroke-width="2.5"/>
<text x="429" y="327" fill="#242428" font-size="21" font-weight="750" text-anchor="middle">Browser Use CLI</text>
<rect x="784" y="280" width="252" height="78" rx="17" fill="#FFF0DF" stroke="#C94D00" stroke-width="2.5"/>
<text x="910" y="327" fill="#242428" font-size="21" font-weight="750" text-anchor="middle">Browser Use CLI</text>
<path d="M167 358V395H429V358" fill="none" stroke="#71717A" stroke-width="2.5" stroke-linejoin="round"/>
<path d="M167 395V444" fill="none" stroke="#71717A" stroke-width="2.5" marker-end="url(#gray-arrow)"/>
<path d="M429 395V425H746V520H772" fill="none" stroke="#C94D00" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#orange-arrow)"/>
<path d="M910 358V444" fill="none" stroke="#C94D00" stroke-width="2.5" marker-end="url(#orange-arrow)"/>
<circle cx="167" cy="395" r="4" fill="#71717A"/>
<circle cx="429" cy="395" r="4" fill="#C94D00"/>
<text x="125" y="423" fill="#606068" font-size="14" font-weight="750" text-anchor="middle">LOCAL</text>
<text x="585" y="413" fill="#C94D00" font-size="14" font-weight="750" text-anchor="middle">CLOUD</text>
<rect x="41" y="454" width="252" height="124" rx="17" fill="#FFFFFF" stroke="#71717A" stroke-width="2.5"/>
<path d="M41 481H293" fill="none" stroke="#71717A" stroke-width="2.5" stroke-linejoin="round"/>
<circle cx="55" cy="468" r="2.6" fill="#71717A"/>
<circle cx="65" cy="468" r="2.6" fill="#71717A"/>
<circle cx="75" cy="468" r="2.6" fill="#71717A"/>
<text x="167" y="525" fill="#242428" font-size="24" font-weight="750" text-anchor="middle">Real Chrome</text>
<text x="167" y="553" fill="#606068" font-size="16" font-weight="450" text-anchor="middle">your tabs · cookies · logins</text>
<rect x="784" y="454" width="252" height="124" rx="17" fill="#FFF0DF" stroke="#C94D00" stroke-width="2.5"/>
<path d="M784 481H1036" fill="none" stroke="#C94D00" stroke-width="2.5" stroke-linejoin="round"/>
<circle cx="798" cy="468" r="2.6" fill="#C94D00"/>
<circle cx="808" cy="468" r="2.6" fill="#C94D00"/>
<circle cx="818" cy="468" r="2.6" fill="#C94D00"/>
<text x="910" y="525" fill="#242428" font-size="24" font-weight="750" text-anchor="middle">Cloud Browser</text>
<text x="910" y="553" fill="#606068" font-size="16" font-weight="450" text-anchor="middle">profiles · stealth · proxies</text>
<path d="M305 561H772" fill="none" stroke="#71717A" stroke-width="2.2" stroke-dasharray="7 6" marker-end="url(#gray-arrow)"/>
<text x="538" y="587" fill="#606068" font-size="16" font-weight="600" text-anchor="middle">Profile Sync · cookies</text>
<text x="910" y="613" fill="#C94D00" font-size="17" font-weight="600" text-anchor="middle">Hosted V4 API</text>
<text x="298" y="625" fill="#606068" font-size="17" font-weight="500" text-anchor="middle">Either CLI can control either browser.</text>
</g></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="690" viewBox="0 0 1440 690" role="img" aria-labelledby="title desc">
<title id="title">Three ways to use Browser Use</title>
<desc id="desc">Fully hosted cloud runs our OpenCode agent, Browser Use CLI, and a cloud browser through the V4 API. The CLI connects your existing agent, including Claude Code, Codex, OpenCode, Hermes, or Pi, to a local or cloud browser. The Python library runs the Browser Use agent directly, without the CLI, and also connects to a local or cloud browser.</desc>
<defs>
<marker id="arrow" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0 0L8 4L0 8Z" fill="#8B8B94"/></marker>
<marker id="cloud-arrow" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0 0L8 4L0 8Z" fill="#C94D00"/></marker>
</defs>
<rect width="1440" height="690" fill="#FFFFFF"/>
<g font-family="Inter, ui-sans-serif, system-ui, sans-serif">
<rect x="16" y="16" width="448" height="658" rx="22" fill="#FFF4E8" stroke="#EDC5A1" stroke-width="2"/>
<rect x="488" y="16" width="936" height="658" rx="22" fill="#FAFAFA" stroke="#8B8B94" stroke-width="2"/>
<text x="240" y="55" text-anchor="middle" fill="#C94D00" font-size="18" font-weight="700">RUN BY BROWSER USE</text>
<text x="956" y="55" text-anchor="middle" fill="#606068" font-size="18" font-weight="700">ON YOUR COMPUTER</text>
<path d="M956 85V650" stroke="#8B8B94" stroke-opacity="0.35"/>
<text x="240" y="109" text-anchor="middle" fill="#242428" font-size="32" font-weight="750">Fully hosted cloud</text>
<text x="720" y="109" text-anchor="middle" fill="#242428" font-size="32" font-weight="750">CLI</text>
<text x="1192" y="109" text-anchor="middle" fill="#242428" font-size="32" font-weight="750">Python library</text>
<text x="240" y="140" text-anchor="middle" fill="#606068" font-size="20" font-weight="450">Send a task through the API</text>
<text x="720" y="140" text-anchor="middle" fill="#606068" font-size="20" font-weight="450">Use your existing agent</text>
<text x="1192" y="140" text-anchor="middle" fill="#606068" font-size="20" font-weight="450">Run your own automation</text>
<rect x="64" y="184" width="352" height="112" rx="16" fill="#F4F4F5" stroke="#8B8B94" stroke-width="2"/>
<text x="240" y="219" text-anchor="middle" fill="#606068" font-size="18" font-weight="700">OUR AGENT</text>
<text x="240" y="260" text-anchor="middle" fill="#242428" font-size="29" font-weight="750">OpenCode</text>
<rect x="520" y="184" width="400" height="112" rx="16" fill="#F4F4F5" stroke="#8B8B94" stroke-width="2"/>
<text x="720" y="214" text-anchor="middle" fill="#606068" font-size="18" font-weight="700">YOUR AGENT</text>
<text x="720" y="247" text-anchor="middle" fill="#242428" font-size="24" font-weight="600">Claude Code · Codex</text>
<text x="720" y="278" text-anchor="middle" fill="#242428" font-size="24" font-weight="600">OpenCode · Hermes · Pi</text>
<rect x="992" y="184" width="400" height="112" rx="16" fill="#F4F4F5" stroke="#8B8B94" stroke-width="2"/>
<text x="1192" y="219" text-anchor="middle" fill="#606068" font-size="18" font-weight="700">YOUR CODE</text>
<text x="1192" y="260" text-anchor="middle" fill="#242428" font-size="29" font-weight="750">Python library</text>
<path d="M240 296V336" fill="none" stroke="#8B8B94" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#arrow)"/>
<path d="M720 296V336" fill="none" stroke="#8B8B94" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#arrow)"/>
<path d="M1192 296V336" fill="none" stroke="#8B8B94" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#arrow)"/>
<rect x="64" y="350" width="352" height="78" rx="16" fill="#FFF4E8" stroke="#C94D00" stroke-width="2"/>
<text x="240.0" y="397" text-anchor="middle" fill="#242428" font-size="28" font-weight="750">Browser Use CLI</text>
<rect x="520" y="350" width="400" height="78" rx="16" fill="#FFF4E8" stroke="#C94D00" stroke-width="2"/>
<text x="720.0" y="397" text-anchor="middle" fill="#242428" font-size="28" font-weight="750">Browser Use CLI</text>
<rect x="992" y="350" width="400" height="78" rx="16" fill="#FFF4E8" stroke="#C94D00" stroke-width="2"/>
<text x="1192.0" y="397" text-anchor="middle" fill="#242428" font-size="28" font-weight="750">Browser Use agent</text>
<path d="M240 428V498" fill="none" stroke="#C94D00" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#cloud-arrow)"/>
<rect x="64" y="512" width="352" height="112" rx="16" fill="#FFF4E8" stroke="#C94D00" stroke-width="2"/>
<path d="M64 538H416" stroke="#C94D00" stroke-width="2"/>
<circle cx="78" cy="525" r="2.5" fill="#C94D00"/>
<circle cx="88" cy="525" r="2.5" fill="#C94D00"/>
<circle cx="98" cy="525" r="2.5" fill="#C94D00"/>
<text x="240.0" y="575" text-anchor="middle" fill="#242428" font-size="23" font-weight="600">Cloud browser</text>
<text x="240.0" y="602" text-anchor="middle" fill="#606068" font-size="18" font-weight="450">stealth · profiles</text>
<text x="240" y="653" text-anchor="middle" fill="#C94D00" font-size="20" font-weight="600">Hosted V4 API</text>
<path d="M720 428V458H615V498" fill="none" stroke="#8B8B94" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#arrow)"/>
<path d="M720 458H825V498" fill="none" stroke="#C94D00" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#cloud-arrow)"/>
<text x="615" y="653" text-anchor="middle" fill="#606068" font-size="16" font-weight="700">LOCAL</text>
<text x="825" y="653" text-anchor="middle" fill="#C94D00" font-size="16" font-weight="700">CLOUD</text>
<rect x="520" y="512" width="190" height="112" rx="16" fill="#F4F4F5" stroke="#8B8B94" stroke-width="2"/>
<path d="M520 538H710" stroke="#8B8B94" stroke-width="2"/>
<circle cx="534" cy="525" r="2.5" fill="#8B8B94"/>
<circle cx="544" cy="525" r="2.5" fill="#8B8B94"/>
<circle cx="554" cy="525" r="2.5" fill="#8B8B94"/>
<text x="615.0" y="575" text-anchor="middle" fill="#242428" font-size="23" font-weight="600">Real Chrome</text>
<text x="615.0" y="602" text-anchor="middle" fill="#606068" font-size="18" font-weight="450">tabs · logins</text>
<rect x="730" y="512" width="190" height="112" rx="16" fill="#FFF4E8" stroke="#C94D00" stroke-width="2"/>
<path d="M730 538H920" stroke="#C94D00" stroke-width="2"/>
<circle cx="744" cy="525" r="2.5" fill="#C94D00"/>
<circle cx="754" cy="525" r="2.5" fill="#C94D00"/>
<circle cx="764" cy="525" r="2.5" fill="#C94D00"/>
<text x="825.0" y="575" text-anchor="middle" fill="#242428" font-size="23" font-weight="600">Cloud browser</text>
<text x="825.0" y="602" text-anchor="middle" fill="#606068" font-size="18" font-weight="450">stealth · profiles</text>
<path d="M1192 428V458H1087V498" fill="none" stroke="#8B8B94" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#arrow)"/>
<path d="M1192 458H1297V498" fill="none" stroke="#C94D00" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#cloud-arrow)"/>
<text x="1087" y="653" text-anchor="middle" fill="#606068" font-size="16" font-weight="700">LOCAL</text>
<text x="1297" y="653" text-anchor="middle" fill="#C94D00" font-size="16" font-weight="700">CLOUD</text>
<rect x="992" y="512" width="190" height="112" rx="16" fill="#F4F4F5" stroke="#8B8B94" stroke-width="2"/>
<path d="M992 538H1182" stroke="#8B8B94" stroke-width="2"/>
<circle cx="1006" cy="525" r="2.5" fill="#8B8B94"/>
<circle cx="1016" cy="525" r="2.5" fill="#8B8B94"/>
<circle cx="1026" cy="525" r="2.5" fill="#8B8B94"/>
<text x="1087.0" y="575" text-anchor="middle" fill="#242428" font-size="23" font-weight="600">Real Chrome</text>
<text x="1087.0" y="602" text-anchor="middle" fill="#606068" font-size="18" font-weight="450">tabs · logins</text>
<rect x="1202" y="512" width="190" height="112" rx="16" fill="#FFF4E8" stroke="#C94D00" stroke-width="2"/>
<path d="M1202 538H1392" stroke="#C94D00" stroke-width="2"/>
<circle cx="1216" cy="525" r="2.5" fill="#C94D00"/>
<circle cx="1226" cy="525" r="2.5" fill="#C94D00"/>
<circle cx="1236" cy="525" r="2.5" fill="#C94D00"/>
<text x="1297.0" y="575" text-anchor="middle" fill="#242428" font-size="23" font-weight="600">Cloud browser</text>
<text x="1297.0" y="602" text-anchor="middle" fill="#606068" font-size="18" font-weight="450">stealth · profiles</text>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB