Skip to content

Connector Directory promo graphics #116

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

Closed
AnnaXWang wants to merge 1 commit into from
+276 −0
Closed

Connector Directory promo graphics #116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
132 changes: 132 additions & 0 deletions promo/explainer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{
--green:#81B300;--ink:#1C2024;--gray-11:#60646C;--gray-9:#8B8D98;
--gray-6:#E0E1E4;--gray-4:#ECEEEC;--gray-3:#F4F5F4;--bg:#FBFCFA;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:1600px;height:1000px;overflow:hidden;}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);position:relative;-webkit-font-smoothing:antialiased;}
.grid{position:absolute;inset:0;background-image:radial-gradient(var(--gray-6) 1.1px,transparent 1.1px);background-size:34px 34px;opacity:.45;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,0) 55%);mask-image:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,0) 55%);}
.wrap{position:relative;height:100%;display:flex;flex-direction:column;padding:76px 90px;}
.head{display:flex;align-items:flex-start;justify-content:space-between;}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:16px;color:var(--green);letter-spacing:.06em;text-transform:uppercase;font-weight:500;margin-bottom:14px;}
h1{font-weight:300;font-size:52px;line-height:1.05;letter-spacing:-.022em;}
h1 b{font-weight:600;}
.wordmark{height:28px;color:var(--ink);display:block;margin-top:6px;}

.flow{flex:1;display:flex;align-items:center;justify-content:center;gap:30px;margin-top:18px;}
.card{flex:1;align-self:stretch;background:#fff;border:1px solid var(--gray-6);border-radius:18px;box-shadow:0 30px 60px -42px rgba(28,32,36,.30);display:flex;flex-direction:column;overflow:hidden;}
.card .cap{font-family:'IBM Plex Mono',monospace;font-size:14px;letter-spacing:.04em;color:var(--gray-9);text-transform:uppercase;padding:22px 26px 0;}
.step{display:flex;align-items:center;gap:10px;padding:18px 26px 0;}
.num{width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:500;display:flex;align-items:center;justify-content:center;}
.steptitle{font-size:21px;font-weight:500;}
.cbody{padding:18px 26px 28px;flex:1;display:flex;flex-direction:column;}

/* step 1 prompt */
.bubble{background:var(--gray-3);border:1px solid var(--gray-4);border-radius:14px;padding:20px 22px;font-size:20px;line-height:1.5;font-weight:400;color:var(--ink);margin-top:6px;}
.you{margin-top:auto;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--gray-9);padding-top:18px;}

/* step 2 tools */
.tool{font-family:'IBM Plex Mono',monospace;font-size:15.5px;line-height:1.5;display:flex;align-items:center;gap:11px;padding:13px 0;border-bottom:1px dashed var(--gray-4);}
.tool:last-of-type{border-bottom:none;}
.check{width:20px;height:20px;border-radius:50%;background:rgba(129,179,0,.14);display:flex;align-items:center;justify-content:center;flex:0 0 20px;}
.check svg{width:11px;height:11px;}
.tname{color:var(--ink);font-weight:500;}
.targ{color:var(--gray-11);}
.runline{margin-top:16px;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--green);display:flex;align-items:center;gap:8px;}
.spin{width:9px;height:9px;border-radius:50%;background:var(--green);}

/* step 3 result */
table{width:100%;border-collapse:collapse;margin-top:6px;font-size:16px;}
th{font-family:'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-9);text-align:left;padding:0 8px 10px;font-weight:500;}
td{padding:10px 8px;border-top:1px solid var(--gray-4);color:var(--ink);}
td.r{color:var(--gray-9);font-family:'IBM Plex Mono',monospace;width:34px;}
td.p{text-align:right;font-family:'IBM Plex Mono',monospace;color:var(--green);width:64px;}
.outpills{display:flex;gap:10px;margin-top:auto;padding-top:20px;}
.op{font-family:'IBM Plex Mono',monospace;font-size:13.5px;border-radius:8px;padding:9px 12px;display:flex;align-items:center;gap:8px;}
.op.play{background:var(--green);color:#fff;}
.op.link{background:#fff;border:1px solid var(--gray-6);color:var(--ink);}
.op .pi{width:18px;height:18px;border-radius:5px;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;}
.op .pi svg{width:8px;height:8px;}

.arrow{flex:0 0 40px;display:flex;align-items:center;justify-content:center;color:var(--gray-9);}
.arrow svg{width:38px;height:38px;}

.foot{font-family:'IBM Plex Mono',monospace;font-size:15px;color:var(--gray-9);text-align:center;margin-top:14px;}
</style>
</head>
<body>
<div class="grid"></div>
<div class="wrap">
<div class="head">
<div>
<div class="eyebrow">how it works</div>
<h1>one prompt, a <b>real browser</b> does the work.</h1>
</div>
<svg class="wordmark" viewBox="0 0 293 62" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="kernel">
<path d="M10.2688 0C13.11 0 15.5238 1.00857 17.5092 3.026C19.5287 5.00923 20.5383 7.42016 20.5383 10.2582V15.2133C20.5383 15.8288 21.3214 16.0907 21.6916 15.5989L30.3457 4.10353C32.023 1.84673 34.2651 0.530157 37.072 0.154023C39.8788 -0.256213 42.4291 0.37633 44.7225 2.05177C46.9815 3.76141 48.2992 6.01818 48.6758 8.82191C49.0865 11.6258 48.4363 14.1567 46.7248 16.4135L37.8021 28.3134C37.4605 28.7689 37.4603 29.3953 37.8015 29.8511L49.2405 45.1364C50.952 47.3932 51.6029 49.9234 51.1921 52.7273C50.8156 55.5312 49.4973 57.7878 47.2382 59.4975C44.9448 61.1729 42.3946 61.8055 39.5878 61.3952C36.781 61.0191 34.5387 59.703 32.8614 57.4463L21.691 42.6613C21.3203 42.1707 20.5383 42.4327 20.5383 43.0477V51.291C20.5383 54.1291 19.5288 56.5571 17.5092 58.5746C15.5238 60.5578 13.11 61.5492 10.2688 61.5492C7.42785 61.5492 4.99731 60.5578 2.97778 58.5746C0.992451 56.5571 0 54.1291 0 51.291V10.2582C1.00387e-05 7.42014 0.992454 5.00923 2.97778 3.026C4.99731 1.00862 7.42785 7.63128e-05 10.2688 0Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M123.669 0.512785C129.352 0.51279 134.195 2.51344 138.2 6.51406C142.205 10.5147 144.208 15.3531 144.208 21.0292C144.208 26.7054 142.205 31.5443 138.2 35.545C138.055 35.6897 137.911 35.8308 137.766 35.9682C137.273 36.4355 137.183 37.1999 137.59 37.7432L143.13 45.1364C144.841 47.3931 145.491 49.9235 145.081 52.7273C144.704 55.5311 143.386 57.7878 141.127 59.4975C138.834 61.1729 136.284 61.8055 133.477 61.3952C130.67 61.0191 128.428 59.7029 126.751 57.4463L119.732 45.2209C119.405 44.6517 118.535 44.8836 118.535 45.5402V51.291C118.535 54.1291 117.525 56.5571 115.506 58.5746C113.52 60.5578 111.107 61.5492 108.266 61.5492C105.425 61.5492 102.994 60.5577 100.975 58.5746C98.9895 56.5571 97.9964 54.1291 97.9964 51.291V10.771C97.9964 7.93295 98.9895 5.522 100.975 3.53878C102.994 1.52148 105.425 0.512788 108.266 0.512785H123.669ZM120.854 16.6696C118.553 16.6696 116.687 18.5354 116.687 20.837C116.687 23.1386 118.553 25.0044 120.854 25.0044C123.156 25.0044 125.022 23.1386 125.022 20.837C125.022 18.5354 123.156 16.6696 120.854 16.6696Z" fill="currentColor"/>
<path d="M193.977 0C196.818 7.69741e-05 199.231 1.00879 201.216 3.026C203.235 5.00924 204.246 7.42012 204.246 10.2582V51.291C204.246 54.1291 203.235 56.5571 201.216 58.5746C199.231 60.5576 196.818 61.5492 193.977 61.5492C191.136 61.5492 188.722 60.5405 186.737 58.5232L169.426 38.8227C169.036 38.3786 168.304 38.6547 168.304 39.2459V51.291C168.304 54.1291 167.294 56.5571 165.274 58.5746C163.289 60.5577 160.875 61.5492 158.034 61.5492C155.193 61.5492 152.763 60.5578 150.743 58.5746C148.758 56.5571 147.765 54.1291 147.765 51.291V10.2582C147.765 7.42012 148.758 5.00924 150.743 3.026C152.763 1.00861 155.193 2.65509e-05 158.034 0C160.875 0 163.306 0.991526 165.325 2.97465L182.584 22.6709C182.974 23.1159 183.707 22.84 183.707 22.2482V10.2582C183.707 7.42012 184.7 5.00924 186.686 3.026C188.705 1.00873 191.136 0 193.977 0Z" fill="currentColor"/>
<path d="M84.684 0.512785C87.525 0.512866 89.9385 1.52142 91.9238 3.53878C93.9433 5.522 94.9529 7.93295 94.9529 10.771C94.9529 13.609 93.9433 16.0371 91.9238 18.0545C89.9385 20.0377 87.525 21.0291 84.684 21.0292H75.6968C74.9887 21.0292 74.4146 21.6034 74.4146 22.3115C74.4146 23.0196 74.9887 23.5937 75.6968 23.5938H82.1164C84.1017 23.5938 85.7108 24.2949 86.943 25.6969C88.1753 27.0988 88.7913 28.7914 88.7913 30.7746C88.7913 32.7578 88.1753 34.4505 86.943 35.8524C85.7108 37.2543 84.1017 37.9555 82.1164 37.9555H75.6968C74.9887 37.9555 74.4146 38.5296 74.4146 39.2378C74.4146 39.9459 74.9887 40.52 75.6968 40.52H84.684C87.525 40.5201 89.9385 41.5287 91.9238 43.546C93.9433 45.5293 94.9529 47.9402 94.9529 50.7782C94.9529 53.6163 93.9433 56.0444 91.9238 58.0618C89.9385 60.045 87.525 61.0364 84.684 61.0365H64.1451C61.3041 61.0364 58.8736 60.045 56.854 58.0618C54.8687 56.0444 53.8763 53.6163 53.8762 50.7782V10.771C53.8763 7.93295 54.8687 5.522 56.854 3.53878C58.8736 1.52143 61.3041 0.512847 64.1451 0.512785H84.684Z" fill="currentColor"/>
<path d="M238.61 0.512785C241.451 0.512785 243.865 1.52145 245.85 3.53878C247.87 5.522 248.879 7.93294 248.879 10.771C248.879 13.6091 247.87 16.0371 245.85 18.0545C243.865 20.0378 241.451 21.0292 238.61 21.0292H229.624C228.916 21.0292 228.342 21.6034 228.341 22.3115C228.341 23.0197 228.916 23.5938 229.624 23.5938H236.043C238.029 23.5938 239.637 24.295 240.869 25.6969C242.102 27.0988 242.718 28.7914 242.718 30.7746C242.718 32.7578 242.102 34.4504 240.869 35.8524C239.637 37.2542 238.029 37.9554 236.043 37.9555H229.623C228.915 37.9557 228.341 38.5297 228.341 39.2378C228.342 39.9458 228.915 40.5199 229.623 40.52H238.61C241.451 40.52 243.865 41.5286 245.85 43.546C247.87 45.5293 248.879 47.9402 248.879 50.7782C248.879 53.6163 247.87 56.0444 245.85 58.0618C243.865 60.0449 241.451 61.0365 238.61 61.0365H218.072C215.231 61.0364 212.801 60.0449 210.781 58.0618C208.796 56.0444 207.803 53.6163 207.803 50.7782V10.771C207.803 7.93294 208.796 5.522 210.781 3.53878C212.801 1.52146 215.231 0.512799 218.072 0.512785H238.61Z" fill="currentColor"/>
<path d="M262.192 0C265.033 0 267.447 1.00871 269.432 3.026C271.452 5.00924 272.462 7.42012 272.462 10.2582V39.2378C272.462 39.9459 273.036 40.52 273.744 40.52H282.731C285.572 40.5201 287.986 41.5287 289.971 43.546C291.99 45.5293 293 47.9402 293 50.7782C293 53.6163 291.99 56.0444 289.971 58.0618C287.986 60.045 285.572 61.0364 282.731 61.0365H262.192C259.351 61.0364 256.921 60.0448 254.902 58.0618C252.916 56.0444 251.923 53.6163 251.923 50.7782V10.2582C251.923 7.42012 252.916 5.00924 254.902 3.026C256.921 1.0088 259.351 7.16251e-05 262.192 0Z" fill="currentColor"/>
<path d="M285.036 0C289.434 0 293 3.56173 293 7.95537C293 12.3491 289.434 15.9107 285.036 15.9107C280.638 15.9107 277.072 12.349 277.072 7.95537C277.072 3.56178 280.638 8.45042e-05 285.036 0Z" fill="currentColor"/>
</svg>
</div>

<div class="flow">
<!-- step 1 -->
<div class="card">
<div class="step"><span class="num">1</span><span class="steptitle">you ask</span></div>
<div class="cbody">
<div class="bubble">"Open news.ycombinator.com, return the top 5 posts as a table — and give me a replay."</div>
<div class="you">— in any MCP client</div>
</div>
</div>

<div class="arrow"><svg viewBox="0 0 24 24" fill="none"><path d="M4 12h15M13 6l6 6-6 6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></div>

<!-- step 2 -->
<div class="card">
<div class="step"><span class="num">2</span><span class="steptitle">Kernel runs it</span></div>
<div class="cbody">
<div class="tool"><span class="check"><svg viewBox="0 0 12 12" fill="none"><path d="M2 6.5l2.6 2.6L10 3" stroke="#81B300" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="tname">manage_browsers</span><span class="targ">create · stealth</span></div>
<div class="tool"><span class="check"><svg viewBox="0 0 12 12" fill="none"><path d="M2 6.5l2.6 2.6L10 3" stroke="#81B300" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="tname">execute_playwright_code</span><span class="targ">scrape</span></div>
<div class="tool"><span class="check"><svg viewBox="0 0 12 12" fill="none"><path d="M2 6.5l2.6 2.6L10 3" stroke="#81B300" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="tname">computer_action</span><span class="targ">screenshot</span></div>
<div class="runline"><span class="spin"></span>isolated cloud VM · live view streaming</div>
</div>
</div>

<div class="arrow"><svg viewBox="0 0 24 24" fill="none"><path d="M4 12h15M13 6l6 6-6 6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></div>

<!-- step 3 -->
<div class="card">
<div class="step"><span class="num">3</span><span class="steptitle">you get</span></div>
<div class="cbody">
<table>
<thead><tr><th>#</th><th>post</th><th>pts</th></tr></thead>
<tbody>
<tr><td class="r">1</td><td>Show HN: I built a cloud browser</td><td class="p">412</td></tr>
<tr><td class="r">2</td><td>The case for remote browsers</td><td class="p">389</td></tr>
<tr><td class="r">3</td><td>Playwright at scale</td><td class="p">274</td></tr>
<tr><td class="r">4</td><td>Beating bot detection in 2026</td><td class="p">256</td></tr>
<tr><td class="r">5</td><td>Agents that browse the web</td><td class="p">198</td></tr>
</tbody>
</table>
<div class="outpills">
<span class="op play"><span class="pi"><svg viewBox="0 0 10 10" fill="none"><path d="M2 1l6 4-6 4z" fill="#fff"/></svg></span>replay.mp4</span>
<span class="op link">live view ↗</span>
</div>
</div>
</div>
</div>

<div class="foot">Kernel · cloud-browser MCP · mcp.onkernel.com/mcp</div>
</div>
</body>
</html>
Loading
Loading