copy(website): tagline is "The open-source thread-plane for agents." (#1040)

* copy(website): tagline is "The open-source thread plane for enterprise agents."

The hero H1, <title>, meta description, OG/Twitter defaults, OG image alt,
About page, root and library READMEs, and the gtm docs all move from
"The AI agent UI framework for Angular." to the new tagline. The site
description becomes the 159-character sentence that follows it everywhere.
The hero eyebrow drops "Open-source" so the hero does not say it twice.
Tests that pinned the old strings pin the new ones.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

* copy(website): tagline is "The open-source thread-plane for agents." on three lines

Drops "enterprise" (gtm.md already lists it as reading sales-first) and
hyphenates thread-plane. HERO_H1_LINES breaks the H1 where it is meant to
break; a spec asserts the lines rejoin to HERO_H1, and both the hero and the
OG card render from the lines. The description drops "enterprise" to match.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

* test(website): repoint the two hero e2e guards at the new tagline

The H1 no longer names Angular, so the guard that the hero says which
framework this is moves to the eyebrow above it. The three-line H1 also
leaves the demo stage short of the 25% visibility threshold that mounts the
frame at the default viewport, so the desktop mount test scrolls it into
view first, as the mobile sibling already does.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>

Author: blove

README.md

@@ -1,13 +1,13 @@
 <p align="center">
   <img
     src="https://threadplane.ai/assets/hero.svg"
-    alt="Threadplane — the AI agent UI framework for Angular"
+    alt="Threadplane — the open-source thread-plane for agents"
     width="100%"
   />
 </p>
 
 <p align="center">
-  <em>The AI agent UI framework for Angular.</em>
+  <em>The open-source thread-plane for agents.</em>
 </p>
 
 <p align="center">
@@ -33,8 +33,8 @@
 
 ---
 
-**Threadplane is the open-source Angular AI agent UI framework.** Chat, durable
-threads, human approvals, tool progress, subagents, and generative UI — built on
+**Threadplane is the open-source thread-plane for agents.** Chat, durable
+threads, persistence, human approvals, tool progress, subagents, and generative UI — built on
 Angular Signals and dependency injection, for Angular 20–22. Your backend stays
 where it is: Threadplane adapts a LangGraph or AG-UI agent into a runtime-neutral
 `Agent` contract that the UI consumes, and renders generated UI with the design

apps/website/e2e/home-hero.spec.ts

@@ -24,6 +24,11 @@ test.describe('homepage hero', () => {
     await page.goto('/');
     const demo = page.locator('[data-hero-demo]');
     await expect(demo.locator('img')).toHaveAttribute('src', '/screenshots/hero-walkthrough-poster.webp');
+    // The frame mounts on a 25%-visibility threshold, and the three-line H1
+    // leaves the stage short of that at the default viewport. Scroll it in, as
+    // the mobile sibling below already does, so this asserts the mount and not
+    // the fold position.
+    await demo.scrollIntoViewIfNeeded();
     await expect(demo.locator('iframe')).toHaveAttribute('src', 'https://demo.threadplane.ai/hero');
   });
 

apps/website/e2e/website.spec.ts

@@ -21,9 +21,10 @@ async function expectNoHorizontalOverflow(
 test('landing page renders hero headline', async ({ page }) => {
   await page.goto('/');
   await expect(page.locator('#hero-heading')).toBeVisible();
-  await expect(page.locator('#hero-heading')).toHaveText('The AI agent UI framework for Angular.');
-  const headline = await page.locator('#hero-heading').textContent();
-  expect(headline?.toLowerCase()).toContain('angular');
+  await expect(page.locator('#hero-heading')).toHaveText('The open-source thread-plane for agents.');
+  // The tagline stopped naming Angular on 2026-09-06, so the guard that the
+  // hero says which framework this is moved to the eyebrow directly above it.
+  await expect(page.locator('.hero-eyebrow')).toContainText('Angular');
 });
 
 test('landing page renders the dark proof band', async ({ page }) => {

apps/website/src/app/opengraph-image.tsx

@@ -32,7 +32,7 @@
  * If either changes, re-resolve them here.
  */
 import { ImageResponse } from 'next/og';
-import { HERO_H1, HERO_SUBHEAD, POSITIONING_PROOF_POINTS, PRIMARY_TAGLINE } from '../lib/positioning';
+import { HERO_H1_LINES, HERO_SUBHEAD, POSITIONING_PROOF_POINTS, PRIMARY_TAGLINE } from '../lib/positioning';
 import { loadCardFonts } from './og-font';
 
 // Node runtime (not edge) so we can read the bundled Garamond TTF off disk.
@@ -159,6 +159,8 @@ export default async function OpenGraphImage() {
           <div
             style={{
               display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
               marginTop: 34,
               fontSize: 52,
               fontWeight: 600,
@@ -167,7 +169,9 @@ export default async function OpenGraphImage() {
               color: TOKENS.textPrimary,
             }}
           >
-            {HERO_H1}
+            {HERO_H1_LINES.map((line) => (
+              <div key={line} style={{ display: 'flex' }}>{line}</div>
+            ))}
           </div>
 
           {/* What you get. Wrapped to two lines on purpose — see the header. */}

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

@@ -8,7 +8,7 @@ import { Button } from '../ui/Button';
 import { trackCtaClick } from '../../lib/analytics/client';
 import {
   HERO_EYEBROW,
-  HERO_H1,
+  HERO_H1_LINES,
   HERO_PRIMARY_LABEL,
   HERO_SECONDARY_HREF,
   HERO_SECONDARY_LABEL,
@@ -31,7 +31,14 @@ export function Hero() {
       <Container>
         <div className="hero-stack">
           <Eyebrow tone="accent" className="hero-eyebrow">{HERO_EYEBROW}</Eyebrow>
-          <h1 id="hero-heading" className="hero-heading">{HERO_H1}</h1>
+          <h1 id="hero-heading" className="hero-heading">
+            {HERO_H1_LINES.map((line, i) => (
+              <React.Fragment key={line}>
+                {i > 0 ? ' ' : ''}
+                <span className="hero-heading-line">{line}</span>
+              </React.Fragment>
+            ))}
+          </h1>
           <p className="hero-subhead">
             {HERO_SUBHEAD_SEGMENTS.map((segment) =>
               segment.highlight ? (

apps/website/src/lib/positioning.spec.ts

@@ -10,6 +10,7 @@ import {
   formatAngularRange,
   HERO_EYEBROW,
   HERO_H1,
+  HERO_H1_LINES,
   HERO_PRIMARY_LABEL,
   HERO_SECONDARY_HREF,
   HERO_SECONDARY_LABEL,
@@ -46,16 +47,21 @@ function parses(code: string): boolean {
 
 describe('positioning: hero copy', () => {
   it('names the exact category in eyebrow, H1, title and description', () => {
-    expect(HERO_EYEBROW).toBe('Open-source · Angular · LangGraph & AG-UI');
-    expect(HERO_H1).toBe('The AI agent UI framework for Angular.');
+    expect(HERO_EYEBROW).toBe('Angular · LangGraph & AG-UI');
+    expect(HERO_H1).toBe('The open-source thread-plane for agents.');
     expect(HERO_SUBHEAD).toBe('Chat, threads, approvals, and generative UI on Signals and DI. Your backend stays where it is.');
-    expect(HOME_TITLE).toBe('Threadplane — Angular AI Agent UI Framework');
+    expect(HOME_TITLE).toBe('Threadplane — The open-source thread-plane for agents');
     expect(HOME_DESCRIPTION).toBe(
-      'Open-source Angular AI agent UI framework for LangGraph and AG-UI: chat, durable threads, human approvals, and generative UI with Signals and DI.',
+      'The open-source thread-plane for agents: chat, durable threads, persistence, human approvals, and generative UI for Angular, on LangGraph and AG-UI.',
     );
     expect(HOME_DESCRIPTION.length).toBeLessThanOrEqual(160);
   });
 
+  it('H1 lines join back to HERO_H1 on three lines', () => {
+    expect(HERO_H1_LINES).toHaveLength(3);
+    expect(HERO_H1_LINES.join(' ')).toBe(HERO_H1);
+  });
+
   it('subhead segments join back to HERO_SUBHEAD, with exactly one highlight', () => {
     // The segments exist only so Hero.tsx can marker-highlight one phrase.
     // If they ever stop reassembling the source-of-truth string, the rendered

apps/website/src/lib/positioning.ts

@@ -2,8 +2,15 @@
 import { WEBSITE_SUPPORTED_ANGULAR_MAJORS } from '../components/pricing/angular-support.mjs';
 import type { StageBeat } from './stage-beats';
 
-export const HERO_EYEBROW = 'Open-source · Angular · LangGraph & AG-UI';
-export const HERO_H1 = 'The AI agent UI framework for Angular.';
+export const HERO_EYEBROW = 'Angular · LangGraph & AG-UI';
+export const HERO_H1 = 'The open-source thread-plane for agents.';
+/**
+ * The H1 broken where it is meant to break: three lines, one thought each.
+ * HERO_H1 stays the single source of truth — positioning.spec.ts asserts the
+ * lines join back to it with single spaces, so the rendered heading, the
+ * <title> and the social card cannot drift apart.
+ */
+export const HERO_H1_LINES: readonly string[] = ['The open-source', 'thread-plane', 'for agents.'];
 export const HERO_SUBHEAD =
   'Chat, threads, approvals, and generative UI on Signals and DI. Your backend stays where it is.';
 
@@ -28,13 +35,13 @@ export const HERO_SECONDARY_LABEL = 'See it running in the docs →';
 export const HERO_SECONDARY_HREF = '/docs/chat/guides/generative-ui?mode=run';
 
 /** Kept for layout.tsx default title and the OG image alt. */
-export const PRIMARY_TAGLINE = 'Threadplane — Angular AI Agent UI Framework';
+export const PRIMARY_TAGLINE = 'Threadplane — The open-source thread-plane for agents';
 export const HOME_TITLE = PRIMARY_TAGLINE;
 export const HOME_DESCRIPTION =
-  'Open-source Angular AI agent UI framework for LangGraph and AG-UI: chat, durable threads, human approvals, and generative UI with Signals and DI.';
+  'The open-source thread-plane for agents: chat, durable threads, persistence, human approvals, and generative UI for Angular, on LangGraph and AG-UI.';
 /** Longer form used by layout.tsx OG/Twitter defaults and the About page. */
 export const LONG_SUBHEAD =
-  'Threadplane is the open-source Angular AI agent UI framework: signal-native chat, durable threads, human approvals, tool progress, subagents, and generative UI for LangGraph and AG-UI backends — without replacing your backend or design system.';
+  'Threadplane is the open-source thread-plane for agents: signal-native chat, durable threads, persistence, human approvals, tool progress, subagents, and generative UI for Angular, on LangGraph and AG-UI — without replacing your backend or design system.';
 
 // ── Trust line (values verified by positioning.spec.ts + angular-support-copy.spec.ts) ──
 export function formatAngularRange(majors: readonly number[]): string {

apps/website/src/lib/site-metadata.spec.ts

@@ -18,8 +18,8 @@ import { resolveWebsiteDir } from './website-dir';
 
 describe('site positioning copy', () => {
   it('exports the approved primary tagline and supporting copy', () => {
-    expect(PRIMARY_TAGLINE).toBe('Threadplane — Angular AI Agent UI Framework');
-    expect(LONG_SUBHEAD).toContain('open-source Angular AI agent UI framework');
+    expect(PRIMARY_TAGLINE).toBe('Threadplane — The open-source thread-plane for agents');
+    expect(LONG_SUBHEAD).toContain('open-source thread-plane for agents');
     expect(LONG_SUBHEAD).toContain('LangGraph and AG-UI');
     expect(HERO_SUBHEAD).toBe(
       'Chat, threads, approvals, and generative UI on Signals and DI. Your backend stays where it is.',
@@ -65,7 +65,7 @@ describe('site positioning copy', () => {
       type: 'website',
     });
 
-    expect(metadata.title).toBe('Threadplane — Angular AI Agent UI Framework');
+    expect(metadata.title).toBe('Threadplane — The open-source thread-plane for agents');
     expect(metadata.description).toBe(HOME_DESCRIPTION);
   });
 });
@@ -142,7 +142,7 @@ describe('createPageMetadata article fields', () => {
     expect(openGraph.images[0].url).toBe('/opengraph-image');
     expect(openGraph.images[0].width).toBe(1200);
     expect(openGraph.images[0].height).toBe(630);
-    expect(openGraph.images[0].alt).toMatch(/agent UI framework for Angular/);
+    expect(openGraph.images[0].alt).toMatch(/open-source thread-plane for agents/);
   });
 
   it('accepts a page-specific social image', () => {

apps/website/src/lib/site-metadata.ts

@@ -20,7 +20,7 @@ export const DEFAULT_SOCIAL_IMAGE_META = {
   url: DEFAULT_SOCIAL_IMAGE,
   width: 1200,
   height: 630,
-  alt: 'Threadplane — the AI agent UI framework for Angular. Chat, threads, approvals, and generative UI on Signals and DI, for LangGraph and AG-UI.',
+  alt: 'Threadplane — the open-source thread-plane for agents. Chat, durable threads, persistence, human approvals, and generative UI for Angular, on LangGraph and AG-UI.',
 } as const;
 export {
   CODING_AGENT_PROMPT,

apps/website/src/styles/landing.css

@@ -23,6 +23,10 @@
   margin-bottom: 24px;
   letter-spacing: -0.02em;
 }
+/* One line per thought; the space between the spans keeps textContent equal to HERO_H1. */
+.hero-heading-line {
+  display: block;
+}
 .hero-subhead {
   font-family: var(--font-inter);
   font-size: var(--text-body-lg);