vrr/opendia
2
0
Fork 0
mirror of https://github.com/aaronjmars/opendia.git synced 2026-10-19 10:13:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs(readme): AEON-style animated hero + pill buttons

Browse source 
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.
This commit is contained in:
aaronjmars 2026-08-05 13:41:48 -04:00
parent 03a51f636e
commit f82adfa701
6 changed files with 169 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

23
.github/README.md vendored
View file

@ -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.

16
docs/assets/btn-bankr.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

16
docs/assets/btn-npm.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

13
docs/assets/btn-star.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 975 B

15
docs/assets/btn-x.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

94
docs/assets/hero-animated.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 5.3 KiB