Skip to content

Commit cffb311

Browse files
esokulluclaude
esokullu
and
claude
committed
assets: add social proof slide to webstore explainer
Seventh slide for the 2026 v2 gallery: "Built in the open." with 500+ stars / 20+ contributors / MIT stat blocks and a repo bar. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
1 parent 3035bcf commit cffb311

3 files changed

Lines changed: 81 additions & 2 deletions

File tree

‎assets/webstore-explainer-2026-2/07-social-proof.png‎

189 KB
Loading

‎assets/webstore-explainer-2026-2/README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,11 @@ Files (1280×800):
99
- 04-any-llm.png: Model picker, cropped to the provider dropdown
1010
- 05-plan-before-act.png: Plan review with Approve/Adjust before actions run
1111
- 06-launch-offer.png: WebBrain Cloud $5/mo (reg. $8), Save 35%
12+
- 07-social-proof.png: 500+ GitHub stars, 20+ contributors, MIT — repo bar with contributor avatars
1213

13-
Social proof slide intentionally skipped for now (too early per Emre). When ready, add a scene between 05 and 06 (e.g. GitHub stars, tokens/day).
14+
Star/contributor counts are hardcoded in `proofScene()`; bump them there when they go stale (544 stars at last render, 2026-07-29). The avatar initials are decorative, not real contributor handles.
15+
16+
Slide 07 is appended after the offer to keep the existing filenames stable. If proof-then-price reads better, swap the last two entries in the `scenes` array and rename the two PNGs.
1417

1518
Regenerate:
1619

‎assets/webstore-explainer-2026-2/render.mjs‎

Lines changed: 77 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,9 @@ const baseCss = `
5656
.provider { --bg1:#f6f8fb; --bg2:#eef8f1; --ink:#182033; --muted:#5b6574;
5757
--accent:#3e6ff4; --accent2:#28a96b; --border:rgba(25,38,68,0.13);
5858
--panel:rgba(255,255,255,0.9); --shadow:0 28px 70px rgba(24,52,90,0.19); }
59+
.proof { --bg1:#f7f6ff; --bg2:#eef4ff; --ink:#171a2b; --muted:#5a6274;
60+
--accent:#6e56cf; --accent2:#f0a52b; --border:rgba(30,34,64,0.13);
61+
--panel:rgba(255,255,255,0.9); --shadow:0 28px 70px rgba(38,34,78,0.18); }
5962
.content { position: relative; z-index: 1; width: 100%; height: 100%; padding: 44px 56px; }
6063
.brand { display: flex; align-items: center; gap: 13px; font-size: 22px; font-weight: 760; }
6164
.brand img { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 10px 24px rgba(0,0,0,0.13); }
@@ -317,7 +320,80 @@ function offerScene() {
317320
};
318321
}
319322

320-
const scenes = [hero(), actScene(), askScene(), modelsScene(), planScene(), offerScene()];
323+
/* ---------- 07 SOCIAL PROOF ---------- */
324+
function proofScene() {
325+
const icon = (paths, color) =>
326+
`<svg width="46" height="46" viewBox="0 0 24 24" fill="${color}" aria-hidden="true">${paths}</svg>`;
327+
const stats = [
328+
[icon('<path d="M12 2.2l2.95 5.98 6.6.96-4.78 4.66 1.13 6.57L12 17.27l-5.9 3.1 1.13-6.57L2.45 9.14l6.6-.96z"/>', 'var(--accent2)'),
329+
'500+', 'GitHub stars'],
330+
[icon('<path d="M9 11.5a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Zm7.2.3a3.1 3.1 0 1 0 0-6.2 3.1 3.1 0 0 0 0 6.2ZM9 13.2c-3.4 0-6.6 1.75-6.6 3.9V20h13.2v-2.9c0-2.15-3.2-3.9-6.6-3.9Zm7.2.2c-.62 0-1.2.05-1.74.14 1.2.94 1.94 2.11 1.94 3.56V20h5.2v-2.5c0-1.9-2.5-3.1-5.4-3.1Z"/>', 'var(--accent)'),
331+
'20+', 'contributors'],
332+
[icon('<path d="M12 2.4c.6 0 1.1.5 1.1 1.1v.9l6.4 1.2a1 1 0 0 1-.18 1.98l-.5-.02 2.6 5.9c0 1.9-1.75 3.15-3.6 3.15s-3.6-1.25-3.6-3.15l2.55-5.8-3.67-.68V18.6h3.3a1.1 1.1 0 1 1 0 2.2H7.6a1.1 1.1 0 1 1 0-2.2h3.3V6.81l-3.67.68 2.55 5.8c0 1.9-1.75 3.15-3.6 3.15s-3.6-1.25-3.6-3.15l2.6-5.9-.5.02a1 1 0 0 1-.18-1.98l6.4-1.2v-.9c0-.6.5-1.1 1.1-1.1Zm5.82 7.7-1.5 3.42h3l-1.5-3.42Zm-11.64 0-1.5 3.42h3l-1.5-3.42Z"/>', 'var(--accent)'),
333+
'MIT', 'licensed, free forever'],
334+
];
335+
// Decorative contributor avatars: initials over a fixed palette.
336+
const avatars = [
337+
['ES', '#6e56cf'], ['MK', '#e0644f'], ['AY', '#2b9f6b'], ['JR', '#2f6fe0'],
338+
['LP', '#c8478f'], ['DT', '#e08b2b'], ['SN', '#4a5568'], ['KV', '#0f9aa8'],
339+
['BW', '#8b5cf6'], ['RO', '#d14f6d'],
340+
];
341+
return {
342+
file: '07-social-proof.png',
343+
theme: 'proof',
344+
body: `
345+
<div style="display:flex; align-items:center; justify-content:space-between;">
346+
${brandRow()}
347+
<span class="eyebrow"><span class="dot"></span>Open source</span>
348+
</div>
349+
350+
<div style="text-align:center; margin-top:44px;">
351+
<h1 style="margin:0; font-size:64px;">Built in the open.</h1>
352+
</div>
353+
354+
<div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; width:1120px; margin:52px auto 0;">
355+
${stats.map(([glyph, value, label]) => `
356+
<div style="background:var(--panel); border:1px solid var(--border); border-radius:26px;
357+
padding:40px 24px 36px; text-align:center; box-shadow:var(--shadow);">
358+
<div style="height:46px; line-height:0;">${glyph}</div>
359+
<div style="margin-top:22px; font-size:82px; font-weight:850; line-height:1;">${value}</div>
360+
<div style="margin-top:14px; font-size:22px; font-weight:680; color:var(--muted);">${label}</div>
361+
</div>`).join('')}
362+
</div>
363+
364+
<div style="width:1120px; margin:44px auto 0; display:flex; align-items:center; justify-content:space-between;
365+
gap:24px; background:#171827; border:1px solid rgba(255,255,255,0.12); border-radius:22px;
366+
padding:22px 26px; color:#fff; box-shadow:0 24px 60px rgba(23,26,43,0.3);">
367+
<div style="display:flex; align-items:center; gap:14px; min-width:0;">
368+
<svg width="34" height="34" viewBox="0 0 16 16" fill="#ffffff" aria-hidden="true">
369+
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.4 7.4 0 0 1 2-.27c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/>
370+
</svg>
371+
<div style="min-width:0;">
372+
<div style="font-size:21px; font-weight:800;">github.com/webbrain-one/webbrain</div>
373+
<div style="font-size:15px; font-weight:640; color:#9ba3b8; margin-top:4px;">Star it, fork it, ship a PR.</div>
374+
</div>
375+
</div>
376+
<div style="display:flex; align-items:center; gap:18px;">
377+
<div style="display:flex; align-items:center;">
378+
${avatars.map(([initials, bg], i) => `
379+
<span style="width:44px; height:44px; border-radius:999px; background:${bg}; color:#fff;
380+
display:grid; place-items:center; font-size:15px; font-weight:800; letter-spacing:0.01em;
381+
border:2px solid #171827; margin-left:${i === 0 ? 0 : -12}px;">${initials}</span>`).join('')}
382+
<span style="height:44px; padding:0 14px; border-radius:999px; background:rgba(255,255,255,0.14);
383+
color:#e7eaf3; display:grid; place-items:center; font-size:15px; font-weight:800;
384+
border:2px solid #171827; margin-left:-12px;">+10</span>
385+
</div>
386+
<span style="display:inline-flex; align-items:center; gap:9px; height:46px; padding:0 20px; border-radius:12px;
387+
background:var(--accent2); color:#2b1c00; font-size:17px; font-weight:850; white-space:nowrap;">
388+
<svg width="18" height="18" viewBox="0 0 24 24" fill="#2b1c00" aria-hidden="true">
389+
<path d="M12 2.2l2.95 5.98 6.6.96-4.78 4.66 1.13 6.57L12 17.27l-5.9 3.1 1.13-6.57L2.45 9.14l6.6-.96z"/>
390+
</svg>Star</span>
391+
</div>
392+
</div>`,
393+
};
394+
}
395+
396+
const scenes = [hero(), actScene(), askScene(), modelsScene(), planScene(), offerScene(), proofScene()];
321397

322398
function html(scene) {
323399
return `<!doctype html><html><head><meta charset="utf-8">

0 commit comments

Comments
 (0)