|
| 1 | +<!doctype html> |
| 2 | +<!-- |
| 3 | + The social card (public/og.png): an agent workflow part way through, with the |
| 4 | + headline under it. After editing, regenerate from site/: |
| 5 | + "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless=new --hide-scrollbars \ |
| 6 | + --force-device-scale-factor=1 --window-size=1200,630 --virtual-time-budget=3000 \ |
| 7 | + --screenshot=public/og.png "file://$PWD/og/og.html" |
| 8 | +--> |
| 9 | +<html lang="en"> |
| 10 | +<head> |
| 11 | +<meta charset="utf-8" /> |
| 12 | +<title>Durable social card</title> |
| 13 | +<style> |
| 14 | + @font-face { font-family: Sora; font-weight: 100 800; src: url('../node_modules/@fontsource-variable/sora/files/sora-latin-wght-normal.woff2') format('woff2'); } |
| 15 | + @font-face { font-family: 'Geist Mono'; font-weight: 400; src: url('../node_modules/@fontsource/geist-mono/files/geist-mono-latin-400-normal.woff2') format('woff2'); } |
| 16 | + @font-face { font-family: 'Geist Mono'; font-weight: 500; src: url('../node_modules/@fontsource/geist-mono/files/geist-mono-latin-500-normal.woff2') format('woff2'); } |
| 17 | + :root { --night: #0a0f1e; --ink: #f3eef3; --dim: #8994ab; --teal: #2bb3a3; --amber: #ffc27a; --violet: #6997fc; --dawn: linear-gradient(90deg, #8fb0ff, #d6a6ff 55%, #ffb69a); } |
| 18 | + * { box-sizing: border-box; } |
| 19 | + html, body { margin: 0; width: 1200px; height: 630px; overflow: hidden; } |
| 20 | + body { |
| 21 | + position: relative; padding: 64px 72px; font-family: Sora, sans-serif; color: var(--ink); |
| 22 | + background: |
| 23 | + radial-gradient(640px 360px at 64% 34%, rgba(214, 166, 255, 0.16), transparent 70%), |
| 24 | + radial-gradient(520px 380px at 100% 110%, rgba(255, 182, 154, 0.26), transparent 70%), |
| 25 | + radial-gradient(600px 420px at 0% -20%, rgba(176, 201, 255, 0.18), transparent 70%), |
| 26 | + radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0) 0 0 / 26px 26px, |
| 27 | + var(--night); |
| 28 | + } |
| 29 | + header { display: flex; align-items: center; justify-content: space-between; } |
| 30 | + .brand { display: flex; align-items: center; gap: 14px; font-size: 30px; font-weight: 600; letter-spacing: -0.03em; } |
| 31 | + .wz { display: flex; align-items: center; gap: 10px; } |
| 32 | + .wz .word { filter: brightness(0) invert(1); opacity: 0.9; } |
| 33 | + |
| 34 | + /* plan → (search ‖ read_docs) → draft → review (waiting) → send. Positions are px in a 1056×220 box. */ |
| 35 | + .graph { position: absolute; left: 72px; top: 150px; width: 1056px; height: 220px; font: 500 19px 'Geist Mono', monospace; } |
| 36 | + .graph > * { position: absolute; } |
| 37 | + .start { left: 0; top: 100px; width: 20px; height: 20px; border-radius: 50%; background: var(--teal); } |
| 38 | + .e { top: 109px; height: 3px; border-radius: 2px; } |
| 39 | + .elbow { width: 25px; border: 0 solid; } |
| 40 | + .elbow.up { top: 47px; height: 65px; border-top-width: 3px; } |
| 41 | + .elbow.down { top: 109px; height: 64px; border-bottom-width: 3px; } |
| 42 | + .elbow.fan { border-left-width: 3px; } |
| 43 | + .elbow.fan.up { border-top-left-radius: 14px; } |
| 44 | + .elbow.fan.down { border-bottom-left-radius: 14px; } |
| 45 | + .elbow.join { border-right-width: 3px; } |
| 46 | + .elbow.join.up { border-top-right-radius: 14px; } |
| 47 | + .elbow.join.down { border-bottom-right-radius: 14px; } |
| 48 | + .n { |
| 49 | + height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 16px 0 12px; border-radius: 24px; |
| 50 | + background: #182a35; border: 2px solid rgba(43, 179, 163, 0.7); |
| 51 | + } |
| 52 | + .n > i { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--teal); display: grid; place-items: center; } |
| 53 | + .n > i svg { width: 13px; height: 13px; } |
| 54 | + .n.wait { background: #2b2328; border: 2px dashed var(--amber); box-shadow: 0 0 0 6px rgba(255, 194, 122, 0.12), 0 0 44px rgba(255, 194, 122, 0.4); } |
| 55 | + .n.next { color: var(--dim); background: #151d2d; border: 2px dashed #65718b; } |
| 56 | + .n.next > i { background: none; border: 2px dashed #65718b; } |
| 57 | + /* LLM steps carry a sparkle, as on the landing page's agent demo. */ |
| 58 | + .llm { position: absolute; right: -9px; top: -10px; width: 24px; height: 24px; border-radius: 50%; background: var(--violet); border: 2px solid var(--night); display: grid; place-items: center; } |
| 59 | + .says { left: 708px; top: 148px; width: 150px; text-align: center; font-weight: 400; font-size: 16px; color: var(--amber); } |
| 60 | + |
| 61 | + h1 { position: absolute; left: 72px; bottom: 60px; margin: 0; font-size: 62px; font-weight: 600; letter-spacing: -0.05em; line-height: 1.04; } |
| 62 | + h1 span { display: block; } |
| 63 | + h1 .tail { display: flex; align-items: center; gap: 14px; } |
| 64 | + h1 .tail span { padding-bottom: 0.08em; background: var(--dawn); -webkit-background-clip: text; background-clip: text; color: transparent; } |
| 65 | +</style> |
| 66 | +</head> |
| 67 | +<body> |
| 68 | + <svg width="0" height="0" style="position: absolute" aria-hidden="true"> |
| 69 | + <symbol id="check" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5" fill="none" stroke="#0a0f1e" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></symbol> |
| 70 | + <symbol id="sparkle" viewBox="0 0 24 24"><path fill="#fff" d="M9.94 15.5a2 2 0 0 0-1.44-1.44l-6.13-1.58a.5.5 0 0 1 0-.96L8.5 9.94A2 2 0 0 0 9.94 8.5l1.58-6.14a.5.5 0 0 1 .96 0L14.06 8.5a2 2 0 0 0 1.44 1.44l6.14 1.58a.5.5 0 0 1 0 .96l-6.14 1.58a2 2 0 0 0-1.44 1.44l-1.58 6.14a.5.5 0 0 1-.96 0z"/></symbol> |
| 71 | + </svg> |
| 72 | + |
| 73 | + <header> |
| 74 | + <div class="brand"> |
| 75 | + <svg width="44" height="44" viewBox="0 0 26 26" aria-hidden="true"><path d="M3 8H13" stroke="#637294" stroke-width="2" stroke-linecap="round"/><path d="M13 8C17 8 17 18 21 18H23" fill="none" stroke="#6997fc" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3"/><circle cx="13" cy="8" r="3.5" fill="#f2785b"/><circle cx="22" cy="18" r="3.5" fill="#2bb3a3"/></svg> |
| 76 | + Durable |
| 77 | + </div> |
| 78 | + <div class="wz"> |
| 79 | + <img src="../src/assets/wavezync-mark.png" width="34" height="31" alt="" /> |
| 80 | + <img class="word" src="../src/assets/wavezync-wordmark.png" width="115" height="22" alt="WaveZync" /> |
| 81 | + </div> |
| 82 | + </header> |
| 83 | + |
| 84 | + <div class="graph"> |
| 85 | + <span class="start"></span> |
| 86 | + <span class="e" style="left: 28px; width: 50px; background: linear-gradient(90deg, #8fb0ff, #9aaeff)"></span> |
| 87 | + <span class="n" style="left: 86px; top: 86px; width: 114px"><i><svg><use href="#check"/></svg></i>plan<span class="llm"><svg width="13" height="13"><use href="#sparkle"/></svg></span></span> |
| 88 | + |
| 89 | + <span class="e" style="left: 208px; width: 28px; border-radius: 0; background: #b6abff"></span> |
| 90 | + <span class="elbow fan up" style="left: 233px; border-color: #b6abff"></span> |
| 91 | + <span class="elbow fan down" style="left: 233px; border-color: #b6abff"></span> |
| 92 | + <span class="n" style="left: 266px; top: 24px; width: 170px"><i><svg><use href="#check"/></svg></i>search</span> |
| 93 | + <span class="n" style="left: 266px; top: 148px; width: 170px"><i><svg><use href="#check"/></svg></i>read_docs</span> |
| 94 | + <span class="elbow join up" style="left: 444px; border-color: #d6a6ff"></span> |
| 95 | + <span class="elbow join down" style="left: 444px; border-color: #d6a6ff"></span> |
| 96 | + <span class="e" style="left: 466px; width: 28px; border-radius: 0; background: #d6a6ff"></span> |
| 97 | + |
| 98 | + <span class="n" style="left: 502px; top: 86px; width: 132px"><i><svg><use href="#check"/></svg></i>draft<span class="llm"><svg width="13" height="13"><use href="#sparkle"/></svg></span></span> |
| 99 | + <span class="e" style="left: 642px; width: 58px; background: linear-gradient(90deg, #d6a6ff, #ffb69a)"></span> |
| 100 | + <span class="n wait" style="left: 708px; top: 86px; width: 150px"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#ffc27a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="flex: none"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>review</span> |
| 101 | + <span class="says">waiting for you</span> |
| 102 | + <span class="e" style="left: 866px; width: 54px; border-radius: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 8px, transparent 8px 16px)"></span> |
| 103 | + <span class="n next" style="left: 928px; top: 86px; width: 116px"><i></i>send</span> |
| 104 | + </div> |
| 105 | + |
| 106 | + <h1> |
| 107 | + <span>Resilient, Reliable, Resumable</span> |
| 108 | + <span class="tail"> |
| 109 | + <span>workflows for Elixir</span> |
| 110 | + <svg width="31" height="48" viewBox="0 0 160 245" aria-hidden="true"><path fill="#8847B9" d="M125.504 111.281c-5.677-5.353-12.253-10.842-19.865-16.313-18.3-13.152-27.443-29.06-31.812-43.468 0 0-5.16 8.602-9.827 17.602C56.481 83.602 49.5 107.5 51 127c2.354 5.818 5.048 9.821 8.206 15.883 4.608 8.849 9.872 16.481 15.487 23.062q2.679.37 5.332.557c23.224 1.637 44.394-7.179 51.691-23.619 5.937-13.377-6.212-31.602-6.212-31.602"/><path fill="#B88CD9" d="M159.896 161.988C156.513 88.578 87.14 100.885 87.14 0a152 152 0 0 0-15.563 11.124s-4.4 18.453 2.25 40.376c4.37 14.409 13.512 30.316 31.812 43.468 7.612 5.471 14.188 10.96 19.865 16.313 28.735 27.099 34.392 50.707 34.392 50.707"/><path fill="#6E2E9E" d="M71.577 11.124S53.649 28.173 40.105 59.99a174 174 0 0 0-3.576 9.112S38.626 96.416 51 127c-1.5-19.5 5.481-43.398 13-57.898 4.667-9 9.826-17.602 9.826-17.602-6.648-21.923-2.25-40.376-2.25-40.376"/><path fill="#B88CD9" d="M71.577 11.124c-21.02 17.105-36.483 38.81-47.545 60.844 0 0-4.218 20.93 1.717 48.915 0 0 .663-23.734 10.78-51.781a174 174 0 0 1 3.576-9.112C53.65 28.173 71.577 11.124 71.577 11.124"/><path fill="#8847B9" d="M24.032 71.968C6.572 106.745.076 142.345.001 161.988c0 0 14.733 24.636 53.497 32.921a120 120 0 0 0 15.4 2.237 132 132 0 0 1-5.031-5.074c-4.54-4.831-8.706-10.138-12.438-15.464-10.72-15.302-17.854-30.759-19.953-35.53-.463-.945-.643-1.494-.643-1.494-2.569-6.931-3.735-12.337-5.084-18.701-5.935-27.985-1.717-48.915-1.717-48.915"/><path fill="#6E2E9E" d="M110.056 194.096c36.101-8.969 49.84-32.108 49.84-32.108s-5.657-23.608-34.392-50.707c0 0 12.149 18.225 6.212 31.602-7.297 16.44-28.467 25.256-51.692 23.619a80 80 0 0 1-5.331-.557c11.201 13.13 23.797 22.076 35.363 28.151"/><path fill="#B88CD9" d="M160 165.169a120 120 0 0 0-.104-3.181s-13.739 23.139-49.84 32.108c20.82 10.936 38.302 12.573 38.302 12.573 7.387-12.093 11.642-26.301 11.642-41.5"/><path fill="#8847B9" d="M110.056 194.096c-8.678 2.156-18.649 3.493-30.031 3.493a138 138 0 0 1-11.127-.443c29.683 28.345 60.463 30.858 60.463 30.858a80.3 80.3 0 0 0 18.997-21.335s-17.482-1.637-38.302-12.573"/><path fill="#B88CD9" d="M68.898 197.146a120 120 0 0 1-15.4-2.237c.462 3.07.964 5.947 1.502 8.591 5.712 28.089 25.025 41.5 25.025 41.5 18.615 0 35.746-6.349 49.336-16.996 0 0-30.78-2.513-60.463-30.858"/><path fill="#A066CC" d="M.049 165.169C.049 209.258 35.855 245 80.025 245c0 0-19.313-13.411-25.025-41.5a171 171 0 0 1-1.502-8.591C14.734 186.624.001 161.988.001 161.988a80 80 0 0 0 .048 3.181"/><path fill="#531F7A" d="M80.025 197.589c11.382 0 21.353-1.337 30.031-3.493-11.566-6.075-24.162-15.021-35.363-28.151-5.615-6.581-10.879-14.213-15.487-23.062C56.048 136.821 53.354 132.818 51 127 38.626 96.416 36.529 69.102 36.529 69.102c-10.117 28.047-10.78 51.781-10.78 51.781 1.35 6.364 2.515 11.77 5.084 18.701 0 0 .218.528.643 1.494 2.099 4.771 9.233 20.228 19.953 35.53 3.732 5.326 7.898 10.633 12.438 15.464a132 132 0 0 0 5.031 5.074q.782.064 1.574.118c3.068.213 6.25.325 9.553.325"/></svg> |
| 111 | + </span> |
| 112 | + </h1> |
| 113 | +</body> |
| 114 | +</html> |
0 commit comments