exprmntl · alexanderqchen · Sep 21, 2026 · Sep 21, 2026
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ Expressive, accessible React components for realtime voice agents. Connect Vapi,
 
 <p align="center">
   <a href="https://orb-ui.com">
-    <img src="demo/public/og-image-v2.jpg" alt="orb-ui — Voice agent UI that feels alive" width="900" />
+    <img src="demo/public/og-image-v3.png" alt="orb-ui — Voice agent UI that feels alive" width="900" />
   </a>
 </p>
 

diff --git a/assets/social/README.md b/assets/social/README.md
@@ -0,0 +1,17 @@
+# Social artwork
+
+`homepage-social.png` is the approved 1200×630 image shared by orb-ui.com, the
+repository README, and the Experimental Software gallery.
+
+Run `pnpm generate:og` to copy this exact image to `demo/public/og-image-v3.png`.
+The homepage and docs use that URL for both Open Graph and Twitter cards. The
+versioned filename lets sharing services discover the updated artwork.
+
+`design.html` preserves the editable layout. Its `homepage-orb.png` is an unchanged
+capture of the actual orb-ui.com cloud-theme canvas, captured at retina resolution
+in manual speaking mode at volume 1 on September 20, 2026. The orb is not
+AI-generated; the surrounding typography and layout were composed in HTML/CSS.
+
+The approved PNG is preserved directly to avoid font-rendering differences when
+exporting on another machine. After approving a future layout change, replace the
+PNG, then run `pnpm generate:og` to synchronize the website export.
diff --git a/assets/social/design.html b/assets/social/design.html
@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+  <meta charset="utf-8" />
+  <title>Orb UI social artwork — actual homepage orb</title>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    html,
+    body {
+      margin: 0;
+      width: 1200px;
+      height: 630px;
+      overflow: hidden;
+      background: #090b0e;
+      color: #fff;
+      font-family: Arial, Helvetica, sans-serif;
+    }
+    .brand {
+      position: absolute;
+      top: 62px;
+      left: 72px;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      font-size: 33px;
+      font-weight: 700;
+      letter-spacing: -1.3px;
+    }
+    .dot {
+      width: 13px;
+      height: 13px;
+      border-radius: 50%;
+      background: #94ccff;
+    }
+    h1 {
+      position: absolute;
+      top: 197px;
+      left: 68px;
+      margin: 0;
+      font-size: 72px;
+      line-height: 0.99;
+      letter-spacing: -4px;
+      font-weight: 700;
+    }
+    h1 span {
+      color: #a9d4ff;
+    }
+    .subtitle {
+      position: absolute;
+      left: 72px;
+      top: 482px;
+      margin: 0;
+      font-size: 23px;
+      line-height: 1.4;
+      letter-spacing: -0.45px;
+      color: #b4bdca;
+    }
+    .orb {
+      position: absolute;
+      width: 420px;
+      height: 420px;
+      object-fit: contain;
+      left: 716px;
+      top: 106px;
+    }
+  </style>
+  <div class="brand"><span class="dot"></span>orb-ui</div>
+  <h1>Voice agent UI<br />that feels<br /><span>alive.</span></h1>
+  <p class="subtitle">React components for voice agents.</p>
+  <img class="orb" src="homepage-orb.png" alt="The actual cloud orb rendered by orb-ui.com" />
+</html>
diff --git a/assets/social/homepage-orb.png b/assets/social/homepage-orb.png
diff --git a/assets/social/homepage-social.png b/assets/social/homepage-social.png
diff --git a/demo/index.html b/demo/index.html
@@ -24,13 +24,13 @@
       property="og:description"
       content="React components for voice agent UIs. Add animated voice orbs, audio-reactive themes, and provider adapters for Vapi, ElevenLabs, and custom realtime voice AI apps."
     />
-    <meta property="og:image" content="https://orb-ui.com/og-image-v2.jpg" />
-    <meta property="og:image:type" content="image/jpeg" />
+    <meta property="og:image" content="https://orb-ui.com/og-image-v3.png" />
+    <meta property="og:image:type" content="image/png" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
     <meta
       property="og:image:alt"
-      content="orb-ui — Voice agent UI that feels alive, with a blue animated voice orb."
+      content="orb-ui — Voice agent UI that feels alive, with its blue cloud orb."
     />
 
     <!-- Twitter Card -->
@@ -40,10 +40,10 @@
       name="twitter:description"
       content="React components for voice agent UIs. Add animated voice orbs, audio-reactive themes, and provider adapters for Vapi, ElevenLabs, and custom realtime voice AI apps."
     />
-    <meta name="twitter:image" content="https://orb-ui.com/og-image-v2.jpg" />
+    <meta name="twitter:image" content="https://orb-ui.com/og-image-v3.png" />
     <meta
       name="twitter:image:alt"
-      content="orb-ui — Voice agent UI that feels alive, with a blue animated voice orb."
+      content="orb-ui — Voice agent UI that feels alive, with its blue cloud orb."
     />
 
     <!-- Additional SEO -->

diff --git a/demo/public/og-image-v3.png b/demo/public/og-image-v3.png
diff --git a/docs/docs.json b/docs/docs.json
@@ -48,10 +48,10 @@
   },
   "seo": {
     "metatags": {
-      "og:image": "https://orb-ui.com/og-image-v2.jpg",
-      "og:image:alt": "orb-ui — Voice agent UI that feels alive, with a blue animated voice orb.",
-      "twitter:image": "https://orb-ui.com/og-image-v2.jpg",
-      "twitter:image:alt": "orb-ui — Voice agent UI that feels alive, with a blue animated voice orb."
+      "og:image": "https://orb-ui.com/og-image-v3.png",
+      "og:image:alt": "orb-ui — Voice agent UI that feels alive, with its blue cloud orb.",
+      "twitter:image": "https://orb-ui.com/og-image-v3.png",
+      "twitter:image:alt": "orb-ui — Voice agent UI that feels alive, with its blue cloud orb."
     }
   },
   "integrations": {