refactor(website): one clip player, and give the showcase its aria-labels (#835)

The same video markup had reached three call sites — `page.tsx`,
`DemoShowcase.tsx`, and `SolutionDemoBlock.tsx` — identical down to the inline
styles. `DemoClip` already gave them a common shape, so the duplication bought
nothing. `ClipPlayer` collapses all three, with an `overlay` slot for the one
caller that draws a launch button over the video.

Making `DemoShowcase` use it required its `DemoMedia` to satisfy `DemoClip`,
which surfaced a real gap the production type-check caught: those two clips had
no `caption`, so the showcase's `<video>` had been shipping with no accessible
name at all while every other clip on the page had one. Rather than invent
captions locally, the showcase now spreads `LANGGRAPH_CLIP` and a new
`AG_UI_CLIP` from `demo-media.ts`.

That also makes an earlier comment true. `LANGGRAPH_CLIP` claimed to exist so
the showcase and the switcher could not drift, but only the switcher consumed
it; the comment had to be corrected to admit the showcase still hardcoded its
own copies. Both now read from one place, so the original claim holds and the
caveat is gone.

Built homepage unchanged in shape — 5 tablists, 5 `<video>` (one active pane
per widget), 0 iframes — and every mounted video now carries its caption as an
`aria-label`.

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

Author: blove

apps/website/src/app/page.tsx

@@ -3,6 +3,7 @@ import { EcosystemStrip } from '../components/landing/EcosystemStrip';
 import { Differentiator } from '../components/landing/Differentiator';
 import { FeatureBlock } from '../components/landing/FeatureBlock';
 import { BrowserFrame } from '../components/ui/BrowserFrame';
+import { ClipPlayer } from '../components/ui/ClipPlayer';
 import { DemoShowcase } from '../components/landing/DemoShowcase';
 import { MediumSwitcher } from '../components/landing/MediumSwitcher';
 import type { MediumPane } from '../components/landing/MediumSwitcher';
@@ -45,24 +46,7 @@ async function buildPanes(media: SectionMedia, clipUrl: string): Promise<MediumP
       id: 'video',
       key: 'video',
       label: 'Video',
-      content: (
-        <BrowserFrame url={clipUrl} elevation="lg">
-          <div style={{ position: 'relative', width: '100%', aspectRatio: '16 / 10', background: '#15161f' }}>
-            <video
-              autoPlay
-              muted
-              loop
-              playsInline
-              poster={clip.poster}
-              aria-label={clip.caption}
-              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
-            >
-              <source src={clip.videoWebm} type="video/webm" />
-              <source src={clip.videoMp4} type="video/mp4" />
-            </video>
-          </div>
-        </BrowserFrame>
-      ),
+      content: <ClipPlayer clip={clip} url={clipUrl} />,
     });
   }
 

apps/website/src/components/landing/DemoShowcase.tsx

@@ -1,31 +1,28 @@
 'use client';
 import { useState } from 'react';
 import { tokens } from '@threadplane/design-tokens';
-import { BrowserFrame } from '../ui/BrowserFrame';
+import { ClipPlayer } from '../ui/ClipPlayer';
 import { TabGroup } from '../ui/TabGroup';
 import { Button } from '../ui/Button';
 import { DemoCtaPair } from './DemoCtaPair';
 import { DemoModal } from './DemoModal';
 import { trackCtaClick } from '../../lib/analytics/client';
 import { DEMOS } from '../../lib/demos';
-import { DEMO_CDN } from '../../lib/demo-media';
+import { AG_UI_CLIP, LANGGRAPH_CLIP, type DemoClip } from '../../lib/demo-media';
 
 type TabKey = (typeof DEMOS)[number]['key'];
 
-interface DemoMedia {
+/** A runtime tab: the shared clip plus how this section labels and links it. */
+interface DemoMedia extends DemoClip {
   key: TabKey;
   tabLabel: string;
-  url: string;
-  videoMp4: string;
-  videoWebm: string;
-  poster: string;
   href: string;
 }
 
 
 const MEDIA: DemoMedia[] = [
-  { key: 'langgraph', tabLabel: 'LangGraph', url: 'demo.threadplane.ai', videoMp4: `${DEMO_CDN}/langgraph-demo.mp4`, videoWebm: `${DEMO_CDN}/langgraph-demo.webm`, poster: `${DEMO_CDN}/langgraph-demo-poster.webp`, href: DEMOS.find((d) => d.key === 'langgraph')!.href },
-  { key: 'ag-ui', tabLabel: 'AG-UI', url: 'ag-ui.threadplane.ai', videoMp4: `${DEMO_CDN}/ag-ui-demo.mp4`, videoWebm: `${DEMO_CDN}/ag-ui-demo.webm`, poster: `${DEMO_CDN}/ag-ui-demo-poster.webp`, href: DEMOS.find((d) => d.key === 'ag-ui')!.href },
+  { ...LANGGRAPH_CLIP, key: 'langgraph', tabLabel: 'LangGraph', href: DEMOS.find((d) => d.key === 'langgraph')!.href },
+  { ...AG_UI_CLIP, key: 'ag-ui', tabLabel: 'AG-UI', href: DEMOS.find((d) => d.key === 'ag-ui')!.href },
 ];
 
 export function DemoShowcase() {
@@ -61,21 +58,17 @@ export function DemoShowcase() {
           id: m.key,
           label: m.tabLabel,
           content: (
-            <BrowserFrame url={m.url} elevation="lg">
-              <div style={{ position: 'relative', width: '100%', aspectRatio: '16 / 10', background: '#15161f' }}>
-                <video autoPlay muted loop playsInline poster={m.poster}
-                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}>
-                  <source src={m.videoWebm} type="video/webm" />
-                  <source src={m.videoMp4} type="video/mp4" />
-                </video>
+            <ClipPlayer
+              clip={m}
+              overlay={
                 <button onClick={() => launch(m)} aria-label={`Launch ${m.tabLabel} live demo`}
                   style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 10,
                     background: 'linear-gradient(180deg, rgba(16,18,32,.15), rgba(16,18,32,.45))', border: 'none', cursor: 'pointer' }}>
                   <span style={{ width: 56, height: 56, borderRadius: '50%', background: 'rgba(255,255,255,.95)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#15161f', fontSize: 22 }}>&#9654;</span>
                   <span style={{ fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 13, color: '#fff', background: 'rgba(0,0,0,.5)', padding: '8px 14px', borderRadius: 8 }}>Launch live demo</span>
                 </button>
-              </div>
-            </BrowserFrame>
+              }
+            />
           ),
         }))}
         onSelect={(pane) => setActive(pane.id as TabKey)}

apps/website/src/components/solutions/SolutionDemoBlock.tsx

@@ -3,7 +3,7 @@ import { tokens } from '@threadplane/design-tokens';
 import { Container } from '../ui/Container';
 import { Section } from '../ui/Section';
 import { Eyebrow } from '../ui/Eyebrow';
-import { BrowserFrame } from '../ui/BrowserFrame';
+import { ClipPlayer } from '../ui/ClipPlayer';
 import type { DemoClip } from '../../lib/demo-media';
 
 /**
@@ -53,27 +53,7 @@ export function SolutionDemoBlock({ clip, accent }: { clip: DemoClip; accent: st
             {clip.caption}
           </p>
 
-          <BrowserFrame url={clip.url} elevation="lg">
-            <div style={{ position: 'relative', width: '100%', aspectRatio: '16 / 10', background: '#15161f' }}>
-              {/*
-                Silent, decorative loop. `aria-label` rather than captions: there
-                is no audio track and no narration to caption, and the prose
-                above already states what the clip shows.
-              */}
-              <video
-                autoPlay
-                muted
-                loop
-                playsInline
-                poster={clip.poster}
-                aria-label={clip.caption}
-                style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
-              >
-                <source src={clip.videoWebm} type="video/webm" />
-                <source src={clip.videoMp4} type="video/mp4" />
-              </video>
-            </div>
-          </BrowserFrame>
+          <ClipPlayer clip={clip} />
 
           <p
             style={{

apps/website/src/components/ui/ClipPlayer.tsx

@@ -0,0 +1,57 @@
+// SPDX-License-Identifier: MIT
+import type { ReactNode } from 'react';
+import { BrowserFrame } from './BrowserFrame';
+import type { DemoClip } from '../../lib/demo-media';
+
+interface ClipPlayerProps {
+  clip: DemoClip;
+  /**
+   * Overlay drawn on top of the video — the homepage showcase puts its
+   * "Launch live demo" button here. Absent everywhere else.
+   */
+  overlay?: ReactNode;
+  /** Address-bar text, when it should differ from the clip's own. */
+  url?: string;
+}
+
+/**
+ * A recorded clip in a browser frame.
+ *
+ * Extracted after the same markup reached three call sites — the homepage
+ * sections, the homepage demo showcase, and the solutions pages — identical
+ * down to the inline styles. `DemoClip` already gave them a common shape, so
+ * the duplication bought nothing.
+ *
+ * Silent and decorative: no audio track, no narration, so `aria-label` carries
+ * the description and there is nothing for captions to caption. Callers mount
+ * this only when its pane is active, which is what keeps a page with several
+ * clips from fetching all of them at once.
+ */
+export function ClipPlayer({ clip, overlay, url }: ClipPlayerProps) {
+  return (
+    <BrowserFrame url={url ?? clip.url} elevation="lg">
+      <div
+        style={{
+          position: 'relative',
+          width: '100%',
+          aspectRatio: '16 / 10',
+          background: '#15161f',
+        }}
+      >
+        <video
+          autoPlay
+          muted
+          loop
+          playsInline
+          poster={clip.poster}
+          aria-label={clip.caption}
+          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+        >
+          <source src={clip.videoWebm} type="video/webm" />
+          <source src={clip.videoMp4} type="video/mp4" />
+        </video>
+        {overlay}
+      </div>
+    </BrowserFrame>
+  );
+}

apps/website/src/lib/demo-media.ts

@@ -41,8 +41,8 @@ export const HITL_CLIP: DemoClip = {
 
 /**
  * The LangGraph streaming demo, recorded on the canonical demo shell. Exported
- * so the section switcher does not add another hardcoded copy of these URLs.
- * `DemoShowcase` still declares its own; consolidating it is tracked separately.
+ * Shared by the homepage showcase and the section switcher, so a recut or a
+ * store move changes one place rather than three.
  */
 export const LANGGRAPH_CLIP: DemoClip = {
   caption: 'Tokens stream into the Angular surface as the agent produces them.',
@@ -52,6 +52,18 @@ export const LANGGRAPH_CLIP: DemoClip = {
   poster: `${DEMO_CDN}/langgraph-demo-poster.webp`,
 };
 
+/**
+ * The AG-UI runtime demo. Paired with `LANGGRAPH_CLIP` so the homepage showcase
+ * can state "same front end, two runtimes" from one place.
+ */
+export const AG_UI_CLIP: DemoClip = {
+  caption: 'The same Threadplane chat surface, running against an AG-UI backend.',
+  url: 'ag-ui.threadplane.ai',
+  videoMp4: `${DEMO_CDN}/ag-ui-demo.mp4`,
+  videoWebm: `${DEMO_CDN}/ag-ui-demo.webm`,
+  poster: `${DEMO_CDN}/ag-ui-demo-poster.webp`,
+};
+
 /**
  * Generative UI: the agent emits a json-render spec and the demo mounts it as
  * real Angular components. Recorded by