From f82adfa701834b282d5e6d934eca3bb87d9e0341 Mon Sep 17 00:00:00 2001
From: aaronjmars <61592645+aaronjmars@users.noreply.github.com>
Date: Wed, 5 Aug 2026 13:41:48 -0400
Subject: [PATCH] docs(readme): AEON-style animated hero + pill buttons

Match the aeonfun/aeon README styling: an animated SVG header (rotating
sunburst, twinkling starfield, skewed italic wordmark, stat pills, moving
heartbeat pulse), cream-on-black pill buttons with animated icons, and the
same flat-square shields badge row.
---
 .github/README.md             | 23 ++++++---
 docs/assets/btn-bankr.svg     | 16 ++++++
 docs/assets/btn-npm.svg       | 16 ++++++
 docs/assets/btn-star.svg      | 13 +++++
 docs/assets/btn-x.svg         | 15 ++++++
 docs/assets/hero-animated.svg | 94 +++++++++++++++++++++++++++++++++++
 6 files changed, 169 insertions(+), 8 deletions(-)
 create mode 100644 docs/assets/btn-bankr.svg
 create mode 100644 docs/assets/btn-npm.svg
 create mode 100644 docs/assets/btn-star.svg
 create mode 100644 docs/assets/btn-x.svg
 create mode 100644 docs/assets/hero-animated.svg

diff --git a/.github/README.md b/.github/README.md
index da5d554..ed397c8 100644
--- a/.github/README.md
+++ b/.github/README.md
@@ -1,17 +1,24 @@
 <p align="center">
-  <img src="../opendia-extension/icons/icon-128.png" alt="OpenDia" width="120" />
+  <img src="../docs/assets/hero-animated.svg" alt="OpenDia — connect your browser to AI models. The open alternative to Dia / Perplexity Comet: 18 browser tools over MCP, works on any Chromium browser and Firefox, private and local-first." width="100%" />
 </p>
 
-<h1 align="center">OPENDIA</h1>
-
 <p align="center">
-  <a href="https://github.com/aeonfun/opendia/stargazers"><img src="https://img.shields.io/github/stars/aeonfun/opendia?style=flat-square&logo=github" alt="GitHub stars"></a>
-  <a href="https://github.com/aeonfun/opendia/network/members"><img src="https://img.shields.io/github/forks/aeonfun/opendia?style=flat-square&logo=github" alt="GitHub forks"></a>
-  <a href="https://www.npmjs.com/package/opendia"><img src="https://img.shields.io/npm/v/opendia?style=flat-square&logo=npm" alt="npm version"></a>
-  <a href="https://x.com/aeonframework"><img src="https://img.shields.io/badge/Follow-%40aeonframework-black?style=flat-square&logo=x&labelColor=000000" alt="Follow on X"></a>
-  <a href="https://bankr.bot/discover/0xbf8e8f0e8866a7052f948c16508644347c57aba3"><img src="https://img.shields.io/badge/Aeon%20on-Bankr-orange?style=flat-square&labelColor=1a1a2e" alt="Aeon on Bankr"></a>
+  <strong>Star us&nbsp;❤️&nbsp;→</strong>&nbsp;&nbsp;
+  <a href="https://github.com/aeonfun/opendia/stargazers"><img src="../docs/assets/btn-star.svg" alt="Star OpenDia on GitHub" height="34" align="absmiddle"></a>&nbsp;&nbsp;
+  <a href="https://www.npmjs.com/package/opendia"><img src="../docs/assets/btn-npm.svg" alt="opendia on npm" height="34" align="absmiddle"></a>&nbsp;&nbsp;
+  <a href="https://x.com/aeonframework"><img src="../docs/assets/btn-x.svg" alt="@aeonframework on X" height="34" align="absmiddle"></a>&nbsp;&nbsp;
+  <a href="https://bankr.bot/discover/0xbf8e8f0e8866a7052f948c16508644347c57aba3"><img src="../docs/assets/btn-bankr.svg" alt="$aeon on Bankr" height="34" align="absmiddle"></a>
 </p>
 
+<div align="center">
+
+[![stars](https://img.shields.io/github/stars/aeonfun/opendia?style=flat-square&label=stars&color=F4EFE1&labelColor=0d0c0a&logo=github&logoColor=F4EFE1)](https://github.com/aeonfun/opendia/stargazers)
+[![forks](https://img.shields.io/github/forks/aeonfun/opendia?style=flat-square&label=forks&color=F4EFE1&labelColor=0d0c0a&logo=github&logoColor=F4EFE1)](https://github.com/aeonfun/opendia/network/members)
+[![npm](https://img.shields.io/npm/v/opendia?style=flat-square&label=npm&color=F4EFE1&labelColor=0d0c0a&logo=npm&logoColor=F4EFE1)](https://www.npmjs.com/package/opendia)
+[![license](https://img.shields.io/badge/license-MIT-F4EFE1?style=flat-square&labelColor=0d0c0a)](../LICENSE)
+
+</div>
+
 <p align="center">
   <strong>The open alternative to Dia / Perplexity Comet.</strong><br>
   Connect your browser to AI models &mdash; no browser switching needed. Works seamlessly with Chrome, Firefox, and any Chromium browser. Private, local-first &amp; MCP focused.
diff --git a/docs/assets/btn-bankr.svg b/docs/assets/btn-bankr.svg
new file mode 100644
index 0000000..e186d18
--- /dev/null
+++ b/docs/assets/btn-bankr.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="118" height="40" viewBox="0 0 118 40" role="img" aria-label="$aeon on Bankr">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#1c1a15"/>
+      <stop offset="1" stop-color="#0d0c0a"/>
+    </linearGradient>
+    <style>@keyframes flip{0%,100%{transform:scaleX(1)}50%{transform:scaleX(0.16)}}.coin{transform-box:fill-box;transform-origin:center;animation:flip 2.8s ease-in-out infinite}</style>
+  </defs>
+  <rect x="0.5" y="0.5" width="117" height="39" rx="19.5" fill="url(#g)" stroke="#F4EFE1" stroke-opacity="0.5"/>
+  <rect x="2" y="1.5" width="114" height="15" rx="12" fill="#F4EFE1" opacity="0.05"/>
+  <g class="coin">
+    <circle cx="25" cy="20" r="8" fill="none" stroke="#F4EFE1" stroke-width="1.5"/>
+    <text x="25" y="24.5" text-anchor="middle" font-family="-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif" font-size="11" font-weight="800" fill="#F4EFE1">$</text>
+  </g>
+  <text x="42" y="25.5" font-family="-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif" font-size="15" font-weight="700" fill="#F4EFE1">$aeon</text>
+</svg>
diff --git a/docs/assets/btn-npm.svg b/docs/assets/btn-npm.svg
new file mode 100644
index 0000000..4eb51bc
--- /dev/null
+++ b/docs/assets/btn-npm.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="150" height="40" viewBox="0 0 150 40" role="img" aria-label="npx opendia">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#1c1a15"/>
+      <stop offset="1" stop-color="#0d0c0a"/>
+    </linearGradient>
+    <style>@keyframes pk{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}.pk{transform-box:fill-box;transform-origin:center;animation:pk 2.6s ease-in-out infinite}</style>
+  </defs>
+  <rect x="0.5" y="0.5" width="149" height="39" rx="19.5" fill="url(#g)" stroke="#F4EFE1" stroke-opacity="0.5"/>
+  <rect x="2" y="1.5" width="146" height="15" rx="12" fill="#F4EFE1" opacity="0.05"/>
+  <g class="pk">
+    <rect x="16.5" y="12" width="17" height="16" rx="2" fill="none" stroke="#F4EFE1" stroke-width="1.5"/>
+    <path d="M20 24.5V15.5h10v9h-2.5v-6.5h-2v6.5h-2v-6.5h-1v6.5z" fill="#F4EFE1"/>
+  </g>
+  <text x="42" y="25.5" font-family="ui-monospace,SFMono-Regular,Menlo,Consolas,monospace" font-size="14" font-weight="700" fill="#F4EFE1">npx opendia</text>
+</svg>
diff --git a/docs/assets/btn-star.svg b/docs/assets/btn-star.svg
new file mode 100644
index 0000000..22beba2
--- /dev/null
+++ b/docs/assets/btn-star.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="40" viewBox="0 0 96 40" role="img" aria-label="Star">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#1c1a15"/>
+      <stop offset="1" stop-color="#0d0c0a"/>
+    </linearGradient>
+    <style>@keyframes tw{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}.ic{transform-box:fill-box;transform-origin:center;animation:tw 2.4s ease-in-out infinite}</style>
+  </defs>
+  <rect x="0.5" y="0.5" width="95" height="39" rx="19.5" fill="url(#g)" stroke="#F4EFE1" stroke-opacity="0.5"/>
+  <rect x="2" y="1.5" width="92" height="15" rx="12" fill="#F4EFE1" opacity="0.05"/>
+  <path class="ic" d="M25 12.5l2.2 4.9 5.3.5-4 3.6 1.2 5.2-4.7-2.8-4.7 2.8 1.2-5.2-4-3.6 5.3-.5z" fill="#F4EFE1"/>
+  <text x="44" y="25.5" font-family="-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif" font-size="15" font-weight="700" fill="#F4EFE1">Star</text>
+</svg>
diff --git a/docs/assets/btn-x.svg b/docs/assets/btn-x.svg
new file mode 100644
index 0000000..50a82b8
--- /dev/null
+++ b/docs/assets/btn-x.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="196" height="40" viewBox="0 0 196 40" role="img" aria-label="@aeonframework on X">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#1c1a15"/>
+      <stop offset="1" stop-color="#0d0c0a"/>
+    </linearGradient>
+    <style>@keyframes xp{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}.xp{transform-box:fill-box;transform-origin:center;animation:xp 2.6s ease-in-out infinite}</style>
+  </defs>
+  <rect x="0.5" y="0.5" width="195" height="39" rx="19.5" fill="url(#g)" stroke="#F4EFE1" stroke-opacity="0.5"/>
+  <rect x="2" y="1.5" width="192" height="15" rx="12" fill="#F4EFE1" opacity="0.05"/>
+  <g class="xp"><g transform="translate(16,12) scale(0.667)" fill="#F4EFE1">
+    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
+  </g></g>
+  <text x="42" y="25.5" font-family="-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif" font-size="15" font-weight="700" fill="#F4EFE1">@aeonframework</text>
+</svg>
diff --git a/docs/assets/hero-animated.svg b/docs/assets/hero-animated.svg
new file mode 100644
index 0000000..ed5b854
--- /dev/null
+++ b/docs/assets/hero-animated.svg
@@ -0,0 +1,94 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 480" width="1600" height="480" role="img" aria-label="OPENDIA — connect your browser to AI models. The open alternative to Dia and Comet.">
+  <defs>
+    <pattern id="halftone" width="7" height="7" patternUnits="userSpaceOnUse">
+      <circle cx="1.4" cy="1.4" r="1.1" fill="#F4EFE1"/>
+    </pattern>
+    <radialGradient id="vig" cx="50%" cy="42%" r="66%">
+      <stop offset="0%" stop-color="#17150f"/>
+      <stop offset="60%" stop-color="#0d0c0a"/>
+      <stop offset="100%" stop-color="#060504"/>
+    </radialGradient>
+    <filter id="soft" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="2.2"/>
+    </filter>
+    <style>
+      @keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
+      .rays{transform-box:fill-box;transform-origin:center;animation:spin 70s linear infinite}
+    </style>
+  </defs>
+
+  <!-- background -->
+  <rect width="1600" height="480" fill="url(#vig)"/>
+  <rect width="1600" height="480" fill="url(#halftone)" opacity="0.10"/>
+
+  <!-- sunburst rays behind wordmark -->
+  <g class="rays" transform="translate(800,205)">
+    <g stroke="#F4EFE1" stroke-opacity="0.055" stroke-width="3">
+      <line x1="0" y1="0" x2="760" y2="0"/>
+      <line x1="0" y1="0" x2="658" y2="380"/>
+      <line x1="0" y1="0" x2="380" y2="658"/>
+      <line x1="0" y1="0" x2="0" y2="760"/>
+      <line x1="0" y1="0" x2="-380" y2="658"/>
+      <line x1="0" y1="0" x2="-658" y2="380"/>
+      <line x1="0" y1="0" x2="-760" y2="0"/>
+      <line x1="0" y1="0" x2="-658" y2="-380"/>
+      <line x1="0" y1="0" x2="-380" y2="-658"/>
+      <line x1="0" y1="0" x2="0" y2="-760"/>
+      <line x1="0" y1="0" x2="380" y2="-658"/>
+      <line x1="0" y1="0" x2="658" y2="-380"/>
+    </g>
+  </g>
+
+  <!-- twinkling starfield -->
+  <g fill="#F4EFE1">
+    <circle cx="150" cy="70" r="1.8"><animate attributeName="opacity" values="0.2;1;0.2" dur="3.1s" repeatCount="indefinite"/></circle>
+    <circle cx="470" cy="58" r="1.3"><animate attributeName="opacity" values="0.15;0.8;0.15" dur="4.3s" repeatCount="indefinite"/></circle>
+    <circle cx="300" cy="150" r="1.4"><animate attributeName="opacity" values="0.15;0.85;0.15" dur="5.0s" repeatCount="indefinite"/></circle>
+    <circle cx="120" cy="300" r="1.2"><animate attributeName="opacity" values="0.2;0.7;0.2" dur="4.6s" repeatCount="indefinite"/></circle>
+    <circle cx="240" cy="410" r="1.6"><animate attributeName="opacity" values="0.2;0.9;0.2" dur="3.7s" repeatCount="indefinite"/></circle>
+    <circle cx="620" cy="72" r="1.2"><animate attributeName="opacity" values="0.15;0.75;0.15" dur="4.8s" repeatCount="indefinite"/></circle>
+    <circle cx="980" cy="64" r="1.3"><animate attributeName="opacity" values="0.2;0.9;0.2" dur="3.6s" repeatCount="indefinite"/></circle>
+    <circle cx="1120" cy="82" r="1.5"><animate attributeName="opacity" values="0.2;0.95;0.2" dur="3.4s" repeatCount="indefinite"/></circle>
+    <circle cx="1300" cy="58" r="1.3"><animate attributeName="opacity" values="0.15;0.8;0.15" dur="4.1s" repeatCount="indefinite"/></circle>
+    <circle cx="1460" cy="90" r="1.2"><animate attributeName="opacity" values="0.15;0.7;0.15" dur="5.2s" repeatCount="indefinite"/></circle>
+    <circle cx="1380" cy="360" r="1.7"><animate attributeName="opacity" values="0.2;1;0.2" dur="3.9s" repeatCount="indefinite"/></circle>
+    <circle cx="1210" cy="420" r="1.4"><animate attributeName="opacity" values="0.2;0.85;0.2" dur="4.4s" repeatCount="indefinite"/></circle>
+  </g>
+
+  <!-- wordmark -->
+  <g transform="translate(800,232)">
+    <text x="0" y="0" text-anchor="middle" transform="skewX(-8)"
+      font-family="'Arial Black','Helvetica Neue',Helvetica,Arial,sans-serif" font-weight="900" font-style="italic"
+      font-size="120" letter-spacing="4" fill="#F4EFE1">OPENDIA</text>
+  </g>
+
+  <!-- tagline -->
+  <text x="800" y="304" text-anchor="middle"
+    font-family="'Arial Black','Helvetica Neue',Helvetica,Arial,sans-serif" font-weight="800" font-style="italic"
+    font-size="30" letter-spacing="1.5" fill="#F4EFE1" fill-opacity="0.92">Connect your browser to AI.</text>
+
+  <!-- stat bubbles -->
+  <g font-family="'Arial Black','Helvetica Neue',Helvetica,Arial,sans-serif" font-weight="800" font-style="italic" font-size="20" fill="#0d0c0a">
+    <g transform="translate(549,346)">
+      <rect x="0" y="0" width="138" height="42" rx="21" fill="#F4EFE1" stroke="#0d0c0a" stroke-width="2"/>
+      <text x="69" y="28" text-anchor="middle">18 tools</text>
+    </g>
+    <g transform="translate(702,346)">
+      <rect x="0" y="0" width="172" height="42" rx="21" fill="#F4EFE1" stroke="#0d0c0a" stroke-width="2"/>
+      <text x="86" y="28" text-anchor="middle">any browser</text>
+    </g>
+    <g transform="translate(889,346)">
+      <rect x="0" y="0" width="162" height="42" rx="21" fill="#F4EFE1" stroke="#0d0c0a" stroke-width="2"/>
+      <text x="81" y="28" text-anchor="middle">MCP native</text>
+    </g>
+  </g>
+
+  <!-- heartbeat pulse line -->
+  <path id="beat" d="M70 442 H438 l14 -22 l16 40 l20 -104 l18 132 l16 -46 H1530"
+    fill="none" stroke="#F4EFE1" stroke-opacity="0.55" stroke-width="2.4" stroke-linejoin="round" stroke-linecap="round"/>
+  <circle r="5.5" fill="#F4EFE1" filter="url(#soft)">
+    <animateMotion dur="3.4s" repeatCount="indefinite" rotate="auto">
+      <mpath href="#beat"/>
+    </animateMotion>
+  </circle>
+</svg>