diff --git a/README.md b/README.md index 865bd9f..b21b77e 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ Expressive, accessible React components for realtime voice agents. Connect Vapi,

- orb-ui — Voice agent UI that feels alive + orb-ui — Voice agent UI that feels alive

diff --git a/assets/social/README.md b/assets/social/README.md new file mode 100644 index 0000000..43fcf6a --- /dev/null +++ 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 new file mode 100644 index 0000000..f49fbd9 --- /dev/null +++ b/assets/social/design.html @@ -0,0 +1,72 @@ + + + + Orb UI social artwork — actual homepage orb + +
orb-ui
+

Voice agent UI
that feels
alive.

+

React components for voice agents.

+ The actual cloud orb rendered by orb-ui.com + diff --git a/assets/social/homepage-orb.png b/assets/social/homepage-orb.png new file mode 100644 index 0000000..e54e0b3 Binary files /dev/null and b/assets/social/homepage-orb.png differ diff --git a/assets/social/homepage-social.png b/assets/social/homepage-social.png new file mode 100644 index 0000000..17ad4c0 Binary files /dev/null and b/assets/social/homepage-social.png differ diff --git a/demo/index.html b/demo/index.html index eb1314a..4916034 100644 --- 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." /> - - + + @@ -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." /> - + diff --git a/demo/public/og-image-v3.png b/demo/public/og-image-v3.png new file mode 100644 index 0000000..17ad4c0 Binary files /dev/null and b/demo/public/og-image-v3.png differ diff --git a/docs/docs.json b/docs/docs.json index 19f6f73..1ca6157 100644 --- 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": { diff --git a/scripts/generate-og-image.mjs b/scripts/generate-og-image.mjs index 972e98c..401a85d 100644 --- a/scripts/generate-og-image.mjs +++ b/scripts/generate-og-image.mjs @@ -1,415 +1,12 @@ -import { chromium } from '@playwright/test' -import { existsSync } from 'node:fs' +import { copyFile } from 'node:fs/promises' import { dirname, resolve } from 'node:path' import { fileURLToPath } from 'node:url' const root = resolve(dirname(fileURLToPath(import.meta.url)), '..') -const outputPath = resolve(root, 'demo/public/og-image-v2.jpg') -const browser = await chromium.launch({ - ...(existsSync(chromium.executablePath()) ? {} : { channel: 'chrome' }), - headless: true, -}) -const page = await browser.newPage({ - viewport: { width: 1200, height: 630 }, - deviceScaleFactor: 1, -}) - -await page.setContent(` - - - - - - - -
-
-
-
-
orb-ui
-
★Open source · MIT
-
- -
-
-
React voice agent UI
-

Voice agent UI
that feels alive.

-

Expressive themes, realtime voice states, and provider adapters that all end at one React component.

-
-
npm install orb-ui
-
Read the docs →
-
-
- Native paths - Vapi - ElevenLabs - LiveKit - Pipecat - OpenAI - Gemini -
-
- -
-
- Live voice surface - Signal active -
-
-
-
SimulationSpeaking0.72
-
- -
-
-
- - -`) - -await page.waitForFunction('document.fonts.status === "loaded"') -await page.screenshot({ - path: outputPath, - type: 'jpeg', - quality: 92, -}) - -await browser.close() +// Publish the approved artwork unchanged so the website and README stay in sync +// with the Experimental Software gallery. Editable sources live beside the PNG. +await copyFile( + resolve(root, 'assets/social/homepage-social.png'), + resolve(root, 'demo/public/og-image-v3.png'), +)