From e6785e3e88508da92bb28b35fa735d0b87e83933 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Be=C3=B1at=20Espi=C3=B1a?= <benatespina@gmail.com>
Date: Fri, 30 Oct 2026 23:12:58 +0100
Subject: [PATCH 1/2] perf: run the scene in a worker and paint the hero on the
 first frame
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Lighthouse on mobile scored 41: the hero was held at opacity 0 until the
intro finished, and three.js loaded, compiled and rendered on the main
thread, which the intro waited on. LCP 7.3 s, TBT 7.5 s.

The scene now runs in a Web Worker on an OffscreenCanvas wherever the
browser allows it. scene.ts touches no DOM any more: everything it needs
from the page comes through a SceneHost, so the same module runs in the
worker (scene-worker.ts) or on the page for browsers without OffscreenCanvas
WebGL (older Safari). scene-client.ts picks the path, sends the beat with one
frame in flight at a time, and pins the callouts on the page from what the
scene reports. The main thread is left with the scroll spring and a few style
writes: TBT is 0 ms on both presets.

The hero no longer waits for anything. It is painted, legible, on the first
frame and settles into place with a transform-only animation; a fade would
keep Chrome from counting the text as the LCP at all. The intro (the ruler
drawing itself up to the head, the readout counting from 000 001) becomes
the scene's loading state, drawn in the stage beside the copy, and gives way
to the scene when it is ready. Its elements are placed by transforms, so the
intro no longer shifts layout.

Also: no prefetch script (every link leaves the site), the third font
preloaded (the install command is in the hero), the story's CSS height
matched to the timeline, and the scene skipped entirely while it is covered.

Mobile 41 → 100 (LCP 0.9 s, TBT 0 ms, CLS 0); desktop 92 → 100.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 DESIGN.md                           |   4 +-
 README.md                           |  10 +-
 astro.config.mjs                    |   8 +-
 src/components/landing/hero.astro   |  21 +--
 src/components/landing/stage.astro  |  56 ++-----
 src/components/landing/story.astro  |   3 +-
 src/scripts/landing/intro.ts        |  75 +++++----
 src/scripts/landing/scene-client.ts | 241 ++++++++++++++++++++++++++++
 src/scripts/landing/scene-worker.ts | 118 ++++++++++++++
 src/scripts/landing/scene.ts        | 150 +++++++++--------
 src/scripts/landing/story.ts        |  45 ++----
 src/styles/global.css               |  25 ++-
 12 files changed, 548 insertions(+), 208 deletions(-)
 create mode 100644 src/scripts/landing/scene-client.ts
 create mode 100644 src/scripts/landing/scene-worker.ts

diff --git a/DESIGN.md b/DESIGN.md
index 6963ca3..68f4793 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -90,6 +90,7 @@ How every table of facts is set, in docs, on the landing page and in Studio:
 
 - The hero is the mechanism: the ⅃ as a machined monolith whose foot becomes the global stream, events moving along it, the live head in ochre.
 - Real-time 3D in code (three.js), art-directed, in Basalt or Bone. No AI photography.
+- The scene runs in a worker on an OffscreenCanvas wherever the browser allows it, so the page's own thread never loads, compiles or renders it; the page only sends the beat and pins the callouts. Where it cannot (older Safari) the same scene runs on the page.
 - **The object takes the logo's colour** (`--text` on `--bg`): satin aluminium on Basalt, black anodised on Bone. Each mode has its own studio; the geometry and the choreography are the same.
 - Glows are ochre. On Basalt they add light; on Bone they tint, because added light disappears on a pale ground.
 - Red appears in a scene only for a refused command or an error.
@@ -108,6 +109,7 @@ It is not a marketing website. It answers what Bounda is and why; anything about
 - **One scene, one accent, at most three annotations on screen.** Light in the scene means something; no decorative glows, particles or neon.
 - **No metaphors, no "enterprise transformation" language, no exaggerated claims.** Say how stable it is: before 1.0, a minor release can change the API.
 - **Nothing depends on the 3D.** The page reads before the scene loads; without WebGL a drawing stands in, and with reduced motion the story is a still and a grid.
+- **The hero is painted on the first frame.** On a first visit it settles into place from a few pixels below, in order, but it never fades in or waits: the intro (the stream catching up, the readout counting to the head) is the scene's loading state, drawn in the stage beside the copy, and gives way to the scene when it is ready or after about two seconds.
 - **Inspirations, by feeling and not by copying:** Vercel (clarity, spacing), Resend (confidence, restraint), Linear (focus, calm UI), EventStoreDB's docs (technical seriousness), and scroll-driven product films (one manufactured object that plays its own mechanism as you scroll).
 
 ## Voice
@@ -116,6 +118,6 @@ Plain, technical, short. Active voice. The vocabulary of the product: event stor
 
 ## Where it lives
 
-- Landing: `bounda-dev/bounda-website`, `src/styles/tokens.css`; the scene is `src/scripts/landing/scene.ts`.
+- Landing: `bounda-dev/bounda-website`, `src/styles/tokens.css`; the scene is `src/scripts/landing/scene.ts`, started by `scene-client.ts` in a worker (`scene-worker.ts`) or on the page.
 - Docs: `docs/src/styles/bounda.css` in `bounda-dev/bounda`, mirroring the same tokens on Starlight's variables.
 - Studio: the same tokens; the ledger grammar for every table.
diff --git a/README.md b/README.md
index 7ced6a5..f0ccaf5 100644
--- a/README.md
+++ b/README.md
@@ -16,6 +16,12 @@ pnpm dev      # http://localhost:4321
 pnpm build    # dist/
 ```
 
+The 3D scene (`src/scripts/landing/scene.ts`) runs in a Web Worker on an OffscreenCanvas where the
+browser supports it, and on the page otherwise; `scene-client.ts` decides and `scene-worker.ts` is the
+worker. Either way the page paints its hero on the first frame and never blocks on three.js, which is
+what keeps Lighthouse at 100 on mobile. Measure with `pnpm build && pnpm preview` and Lighthouse
+against `http://localhost:4321/`; the Cloudflare beacon is the one request that fails offline.
+
 pnpm, like the framework repository, and not only for consistency: `npm ci` cannot install this
 tree on Linux from a lockfile resolved on macOS, because rolldown ships its native bindings as
 per-platform optional dependencies. The pnpm lockfile carries all of them.
@@ -40,7 +46,9 @@ A Worker with static assets, built by Cloudflare on every push to `main`:
 | `NODE_VERSION` | `24`, since Astro 7 requires `>=22.12.0` |
 | `PNPM_VERSION` | `12.4.2`, because `allowBuilds` in `pnpm-workspace.yaml` is pnpm 12 |
 
-`wrangler.jsonc` serves `dist/` and answers anything missing with `404.html`. The build image ships
+`wrangler.jsonc` serves `dist/` and answers anything missing with `404.html`. `public/_headers` sets the
+response headers: a year's immutable cache for the hashed files under `/_astro/`, and the usual safety
+headers for everything. The build image ships
 pnpm 10, which reads `pnpm-workspace.yaml` as a workspace definition, so that file declares
 `packages` and names the built dependencies under both `allowBuilds` (pnpm 12) and
 `onlyBuiltDependencies` (pnpm 10).
diff --git a/astro.config.mjs b/astro.config.mjs
index ce2a176..b7e0da0 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -5,13 +5,15 @@ import { defineConfig, fontProviders } from "astro/config";
 // so it is requested at that one weight across the width axis it uses (100% to 125%).
 export default defineConfig({
   site: "https://bounda.dev",
-  prefetch: true,
-  integrations: [sitemap()],
+  // Every link on the page leaves the site (docs, demo, GitHub), so there is nothing to prefetch.
+  prefetch: false,
+  // The site is rebuilt on every push, so the build is the last change.
+  integrations: [sitemap({ lastmod: new Date() })],
   build: {
     inlineStylesheets: "always",
   },
   vite: {
-    // three.js is one chunk, loaded after first paint and only where WebGL 2 is available.
+    // three.js is one chunk, run in a worker where the browser allows it (see src/scripts/landing/scene-client.ts).
     build: { chunkSizeWarningLimit: 650 },
     // The scene imports three.js dynamically, so the dev server would only find it on first use,
     // re-optimize, and fail that import as an outdated dependency. Pre-bundle it from the start.
diff --git a/src/components/landing/hero.astro b/src/components/landing/hero.astro
index 8e78272..f6221e7 100644
--- a/src/components/landing/hero.astro
+++ b/src/components/landing/hero.astro
@@ -6,20 +6,20 @@ import Actions from "../actions.astro";
   <div class="copy" id="hero-copy">
     <p class="label eyebrow" data-enter>Event sourcing and CQRS for TypeScript</p>
     <h1 class="display">
-      <span class="line"><span data-rise style="--enter-delay: 0.06s">Event sourcing</span></span>{" "}
-      <span class="line"><span data-rise style="--enter-delay: 0.14s">without the</span></span>{" "}
-      <span class="line"><span data-rise class="quiet" style="--enter-delay: 0.22s">ceremony.</span></span>
+      <span class="line" data-enter style="--enter-delay: 0.05s">Event sourcing</span>{" "}
+      <span class="line" data-enter style="--enter-delay: 0.12s">without the</span>{" "}
+      <span class="line quiet" data-enter style="--enter-delay: 0.19s">ceremony.</span>
     </h1>
-    <p class="lead-short" data-enter style="--enter-delay: 0.38s">
+    <p class="lead-short" data-enter style="--enter-delay: 0.28s">
       <b>Your tables keep the last write. Bounda keeps every change.</b> Rebuild any view from it, on one database.
     </p>
   </div>
   <div class="foot" id="hero-foot">
-    <p class="lead" data-enter style="--enter-delay: 0.38s">
+    <p class="lead" data-enter style="--enter-delay: 0.28s">
       <b>Your tables keep the last write. Bounda keeps every change.</b> Rebuild any view, explain any past state. Plain
       TypeScript modules, inferred types, one database, no broker.
     </p>
-    <Actions data-enter style="--enter-delay: 0.46s" />
+    <Actions data-enter style="--enter-delay: 0.36s" />
   </div>
 </section>
 
@@ -63,16 +63,9 @@ import Actions from "../actions.astro";
     color: var(--text);
   }
 
-  /* Each line rises from its own baseline, the way new entries arrive at the end. */
+  /* Each line enters on its own, the way new entries arrive at the end. */
   .line {
     display: block;
-    overflow: hidden;
-    padding-bottom: 0.1em;
-    margin-bottom: -0.1em;
-  }
-
-  .line > span {
-    display: block;
   }
 
   h1 .quiet {
diff --git a/src/components/landing/stage.astro b/src/components/landing/stage.astro
index f4bcb52..6b6561d 100644
--- a/src/components/landing/stage.astro
+++ b/src/components/landing/stage.astro
@@ -28,8 +28,9 @@ for (let r = 0; r < 7; r++) {
 const round = (n: number): string => n.toFixed(1);
 ---
 
-<!-- Before first paint: hold the hero back for the intro (src/scripts/landing/intro.ts), once per session
-     and never with reduced motion. If the page's script does not run, the hero shows anyway. -->
+<!-- Before first paint: mark a first visit for the intro (src/scripts/landing/intro.ts), once per session
+     and never with reduced motion. The hero enters from the first frame either way; if the page's
+     script never runs, the intro's stream is taken down after a while. -->
 <script is:inline>
   (function () {
     var root = document.documentElement;
@@ -72,14 +73,11 @@ const round = (n: number): string => n.toFixed(1);
   <div class="callout" data-callout="rebuilt"><i></i><span>Orders · <em>rebuilt</em></span></div>
 </div>
 
-<!-- The intro: the stream drawn up to its head, where the scene then lights up (src/scripts/landing/intro.ts). -->
+<!-- The intro: while the scene loads, the stream draws itself up to where its head will be, and the
+     readout counts up to it (src/scripts/landing/intro.ts). -->
 <div class="intro-stream" id="intro-stream" aria-hidden="true">
   <div class="ruler"></div>
   <div class="cursor"></div>
-  <div class="count">
-    <span class="count-key">Global stream · catching up</span>
-    <span class="count-value" id="intro-count">000 001</span>
-  </div>
 </div>
 
 <div class="hud" id="hud" aria-hidden="true">
@@ -287,6 +285,7 @@ const round = (n: number): string => n.toFixed(1);
     transition: opacity 0.6s var(--ease);
   }
 
+  /* Until the script writes its opacity, the readout waits; during the intro it is the counter. */
   :global(.intro) .hud {
     opacity: 0;
   }
@@ -295,14 +294,15 @@ const round = (n: number): string => n.toFixed(1);
     opacity: 0;
   }
 
-  /* A ruler of events on a hairline rod, fading in from the far end like the stream in the scene. */
+  /* A ruler of events on a hairline rod, fading in from the far end like the stream in the scene.
+     Both are placed by transforms, so the drawing never moves anything else on the page. */
   .ruler {
     position: absolute;
     left: 0;
-    top: var(--head-y, 68vh);
+    top: 0;
     width: var(--head-x, 0px);
     height: 16px;
-    transform: translateY(-50%);
+    transform: translateY(calc(var(--head-y, 68vh) - 50%));
     background:
       linear-gradient(var(--rule), var(--rule)) 0 50% / 100% 1px no-repeat,
       repeating-linear-gradient(90deg, var(--muted) 0 1px, transparent 1px 80px) 0 0 / 100% 100% no-repeat,
@@ -312,45 +312,15 @@ const round = (n: number): string => n.toFixed(1);
 
   .cursor {
     position: absolute;
-    left: var(--head-x, 0px);
-    top: var(--head-y, 68vh);
+    left: 0;
+    top: 0;
     width: 2px;
     height: 34px;
-    transform: translate(-1px, -50%);
+    transform: translate(calc(var(--head-x, 0px) - 1px), calc(var(--head-y, 68vh) - 50%));
     background: var(--accent);
     box-shadow: 0 0 14px 2px color-mix(in srgb, var(--accent) 55%, transparent);
   }
 
-  /* The position rides just past the cursor (placed by intro.ts), above the ruler. */
-  .count {
-    position: absolute;
-    left: var(--count-x, var(--gutter));
-    top: var(--head-y, 68vh);
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-    transform: translateY(calc(-100% - 26px));
-    font: 500 clamp(2.4rem, 1.4rem + 2.6vw, 4.25rem) / 1 var(--font-mono);
-    white-space: nowrap;
-  }
-
-  .count-key {
-    font-family: var(--font-display);
-    font-weight: 600;
-    font-stretch: 125%;
-    font-size: 0.625rem;
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
-    color: var(--muted);
-  }
-
-  .count-value {
-    letter-spacing: 0.01em;
-    font-variant-numeric: tabular-nums;
-    color: var(--accent-text);
-  }
-
   /* ---- Readout ---- */
   .hud {
     position: fixed;
diff --git a/src/components/landing/story.astro b/src/components/landing/story.astro
index 20163fb..9cb7089 100644
--- a/src/components/landing/story.astro
+++ b/src/components/landing/story.astro
@@ -50,9 +50,10 @@
 </section>
 
 <style>
+  /* The script sets the exact height from the timeline's segments; this is the same figure. */
   .story {
     position: relative;
-    height: 480vh;
+    height: 520vh;
   }
 
   .pin {
diff --git a/src/scripts/landing/intro.ts b/src/scripts/landing/intro.ts
index 623ad21..7c9a717 100644
--- a/src/scripts/landing/intro.ts
+++ b/src/scripts/landing/intro.ts
@@ -1,9 +1,10 @@
-// The intro: before the hero enters, the page catches up with the global stream. A ruler of events
-// draws itself from the left edge to the point where the scene's stream has its head, the position
-// riding above it from 000 001 to the head, while the scene and the fonts load. Then the ruler gives
-// way to the scene in the same place and the hero enters in order. Shown once per session, skipped
-// by any input; the `intro` class is set before first paint by the inline script in stage.astro,
-// which also leaves it out for reduced motion.
+// The intro: on a first visit, while the scene loads, the page catches up with the global stream.
+// A ruler of events draws itself from the left edge to the point where the scene's stream will have
+// its head, and the readout counts from 000 001 up to the head. Then the ruler gives way to the scene
+// in the same place. The hero is on screen from the first frame throughout (its entrance is CSS, see
+// [data-enter] in global.css): the intro is the scene's loading state, never a curtain over the page.
+// Shown once per session, skipped by any input; the `intro` class is set before first paint by the
+// inline script in stage.astro, which also leaves it out for reduced motion.
 
 import { formatPosition, HEAD } from "./timeline";
 
@@ -14,42 +15,49 @@ export interface ScreenPoint {
 }
 
 export interface Intro {
-  /** Draws the intro at `now`, its ruler ending at `head`; false once the hero has entered, or with no intro. */
+  /** Draws the intro at `now`, its ruler ending at `head`; false once it has given way to the scene. */
   readonly tick: (now: number, head: ScreenPoint) => boolean;
-  /** Resolves when the hero starts to enter (at once when there is no intro). */
+  /** Resolves when the ruler has reached the head (at once when there is no intro). */
   readonly revealed: Promise<void>;
-  /** How far the page's own chrome is back: 0 during the intro, rising to 1 as the hero enters. */
+  /** How present the readout is: it comes in with the count and stays. */
   readonly presence: (now: number) => number;
 }
 
+export interface Readout {
+  readonly key: HTMLElement;
+  readonly value: HTMLElement;
+  readonly sub: HTMLElement;
+}
+
 export interface IntroArgs {
   readonly root: HTMLElement;
-  /** The ruler and the position riding it. */
+  /** The ruler, in the canvas's frame. */
   readonly stream: HTMLElement;
-  readonly count: HTMLElement;
+  /** The page's readout, which counts during the intro. */
+  readonly readout: Readout;
   /** Settles when the scene is drawn, or has failed, or will not load. */
   readonly ready: Promise<unknown>;
 }
 
-// The hero is the page's largest paint, so the intro is held to about two seconds even when the
-// scene is slow to arrive: past GIVE_UP_MS the hero enters and the scene fades in when it is ready.
-const COUNT_MS = 1200; // the count to the head, when everything is ready in time
-const FINISH_MS = 220; // the last stretch once it is
+// The count takes about a second when everything is ready in time. Past GIVE_UP_MS it finishes anyway
+// and the scene fades in whenever it arrives: the stream is a loading state, not a wait.
+const COUNT_MS = 1100;
+const FINISH_MS = 220;
 const GIVE_UP_MS = 1700;
-const ENTER_MS = 1700; // the longest enter transition, delays included
-const PRESENCE_MS = 600;
+const LEAVE_MS = 1500; // the longest of the page's entrance animations, delays included
+const PRESENCE_MS = 500;
 const SEEN = "bounda-intro";
 
 const easeOut = (t: number): number => 1 - (1 - t) ** 3;
 
 declare global {
   interface Window {
-    /** The inline script's timer that shows the hero if this module never runs. */
+    /** The inline script's timer that takes the intro down if this module never runs. */
     boundaIntroFallback?: number;
   }
 }
 
-export const createIntro = ({ root, stream, count, ready }: IntroArgs): Intro => {
+export const createIntro = ({ root, stream, readout, ready }: IntroArgs): Intro => {
   clearTimeout(window.boundaIntroFallback);
   if (!root.classList.contains("intro")) {
     return { tick: () => false, revealed: Promise.resolve(), presence: () => 1 };
@@ -59,7 +67,6 @@ export const createIntro = ({ root, stream, count, ready }: IntroArgs): Intro =>
   let settled = false;
   let finishFrom: number | null = null;
   let finished = false;
-  let enteredAt = 0;
   let reveal: () => void = () => undefined;
   const revealed = new Promise<void>((resolve) => {
     reveal = resolve;
@@ -71,9 +78,9 @@ export const createIntro = ({ root, stream, count, ready }: IntroArgs): Intro =>
     settled = true;
   });
 
-  // Frames can stop (the tab goes to the background); the hero and the scene must come in regardless.
+  // Frames can stop (the tab goes to the background); the scene must come in regardless.
   setTimeout(() => {
-    if (!finished) enter();
+    if (!finished) leave();
   }, GIVE_UP_MS + 1500);
 
   const skip = (): void => {
@@ -84,16 +91,15 @@ export const createIntro = ({ root, stream, count, ready }: IntroArgs): Intro =>
     addEventListener(type, skip, { once: true, passive: true });
   }
 
-  const enter = (): void => {
+  const leave = (): void => {
     finished = true;
-    enteredAt = performance.now();
     root.classList.add("entering");
     try {
       sessionStorage.setItem(SEEN, "1");
     } catch {
       // Without storage the intro plays again on the next visit.
     }
-    setTimeout(() => root.classList.remove("intro", "entering"), ENTER_MS);
+    setTimeout(() => root.classList.remove("intro", "entering"), LEAVE_MS);
     reveal();
   };
 
@@ -101,24 +107,23 @@ export const createIntro = ({ root, stream, count, ready }: IntroArgs): Intro =>
   let headX = -1;
   let headY = -1;
   let shown = "";
+  const target = formatPosition(HEAD - 1);
   const draw = (fraction: number, head: ScreenPoint): void => {
     headX = headX < 0 ? head.x : headX + (head.x - headX) * 0.2;
     headY = headY < 0 ? head.y : headY + (head.y - headY) * 0.2;
     // The stream's box is the canvas's, so fractions of the scene map onto it exactly.
     const width = stream.clientWidth || innerWidth;
     const height = stream.clientHeight || innerHeight;
-    const x = fraction * headX * width;
-    stream.style.setProperty("--head-x", `${x.toFixed(1)}px`);
-    // The position flies from the cursor like a flag, kept inside the page's margins.
-    const gutter = Math.min(64, Math.max(16, width * 0.04));
-    const flagWidth = count.parentElement?.offsetWidth ?? 0;
-    const flag = Math.max(gutter, Math.min(x + 12, width - gutter - flagWidth));
-    stream.style.setProperty("--count-x", `${flag.toFixed(1)}px`);
+    stream.style.setProperty("--head-x", `${(fraction * headX * width).toFixed(1)}px`);
     stream.style.setProperty("--head-y", `${(headY * height).toFixed(1)}px`);
     const value = formatPosition(1 + (HEAD - 2) * fraction);
     if (value !== shown) {
+      if (!shown) {
+        readout.key.textContent = "Global stream · catching up";
+        readout.sub.textContent = `head ${target}`;
+      }
       shown = value;
-      count.textContent = value;
+      readout.value.textContent = value;
     }
   };
 
@@ -142,13 +147,13 @@ export const createIntro = ({ root, stream, count, ready }: IntroArgs): Intro =>
 
   return {
     revealed,
-    presence: (now) => (enteredAt ? Math.min(1, (now - enteredAt) / PRESENCE_MS) : 0),
+    presence: (now) => Math.min(1, Math.max(0, now - start) / PRESENCE_MS),
     tick(now, head) {
       if (finished) return false;
       const fraction = progress(now);
       if (fraction === null) {
         draw(1, head);
-        enter();
+        leave();
         return false;
       }
       draw(fraction, head);
diff --git a/src/scripts/landing/scene-client.ts b/src/scripts/landing/scene-client.ts
new file mode 100644
index 0000000..599dead
--- /dev/null
+++ b/src/scripts/landing/scene-client.ts
@@ -0,0 +1,241 @@
+// Starts the scene where it costs the page least: in a worker, on an OffscreenCanvas, where the
+// browser allows it, and on the page's own thread otherwise. The page sees the same controls either
+// way, and the callouts' elements are only ever touched here.
+
+import type { ScreenPoint } from "./intro";
+import type { SceneHost } from "./scene";
+import type { FontSpec, FromWorker, InitMessage, ToWorker } from "./scene-worker";
+import type { Stage } from "./timeline";
+
+export interface Scene {
+  readonly frame: () => void;
+  readonly still: () => void;
+  /** Where the head of the stream was on screen in the last frame drawn, once there is one. */
+  readonly headOnScreen: () => ScreenPoint | null;
+  /** Resolves once a first frame is on the canvas. */
+  readonly drawn: Promise<void>;
+}
+
+export interface SceneClientArgs {
+  readonly canvas: HTMLCanvasElement;
+  readonly callouts: HTMLElement;
+  readonly stage: Stage;
+}
+
+const unquote = (s: string): string => s.trim().replace(/^["']|["']$/g, "");
+
+/** The --font-mono stack, and the @font-face of its first family for a worker that has no stylesheet. */
+const monoFont = (): { readonly stack: string; readonly spec: FontSpec | null } => {
+  const stack = getComputedStyle(document.documentElement).getPropertyValue("--font-mono").trim();
+  const first = unquote(stack.split(",")[0] ?? "");
+  if (!first) return { stack: "monospace", spec: null };
+  for (const sheet of document.styleSheets) {
+    let rules: CSSRuleList;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue; // a stylesheet from another origin
+    }
+    for (const rule of rules) {
+      if (!(rule instanceof CSSFontFaceRule)) continue;
+      const src = rule.style.getPropertyValue("src");
+      if (unquote(rule.style.getPropertyValue("font-family")) !== first || !src.includes("url("))
+        continue;
+      return {
+        stack,
+        spec: {
+          family: first,
+          src,
+          weight: rule.style.getPropertyValue("font-weight"),
+          unicodeRange: rule.style.getPropertyValue("unicode-range"),
+        },
+      };
+    }
+  }
+  return { stack, spec: null };
+};
+
+/** The canvas's size in CSS pixels, read when the window changes rather than every frame. */
+const sizeOf = (canvas: HTMLCanvasElement): (() => { readonly w: number; readonly h: number }) => {
+  const size = { w: 1, h: 1 };
+  const measure = (): void => {
+    size.w = canvas.clientWidth || innerWidth;
+    size.h = canvas.clientHeight || innerHeight;
+  };
+  measure();
+  addEventListener("resize", measure);
+  return () => size;
+};
+
+/** Pins the callouts where the scene says, and takes down the ones it no longer places. */
+const calloutSink = (root: HTMLElement): SceneHost["callouts"] => {
+  const elements = new Map<string, HTMLElement>();
+  for (const el of root.querySelectorAll<HTMLElement>("[data-callout]"))
+    elements.set(el.dataset.callout ?? "", el);
+  const foldText = root.querySelector<HTMLElement>("[data-fold-text]");
+  const shown = new Set<string>();
+  let fold = "";
+  return (frame) => {
+    if (frame.fold && foldText) {
+      const key = `${frame.fold.name} ${frame.fold.position}`;
+      if (key !== fold) {
+        fold = key;
+        foldText.firstChild?.replaceWith(`${frame.fold.name} · `);
+        const position = foldText.querySelector("em");
+        if (position) position.textContent = frame.fold.position;
+      }
+    }
+    const placed = new Set<string>();
+    for (const p of frame.placed) {
+      const el = elements.get(p.id);
+      if (!el) continue;
+      placed.add(p.id);
+      shown.add(p.id);
+      el.classList.toggle("left", p.left);
+      el.style.transform = `translate3d(${p.x}px, ${p.y}px, 0)`;
+      el.style.opacity = String(p.opacity);
+    }
+    for (const id of shown) {
+      if (placed.has(id)) continue;
+      shown.delete(id);
+      const el = elements.get(id);
+      if (el) el.style.opacity = "0";
+    }
+  };
+};
+
+const webgl2 = (): boolean => {
+  const probe = document.createElement("canvas").getContext("webgl2");
+  probe?.getExtension("WEBGL_lose_context")?.loseContext();
+  return probe !== null;
+};
+
+const pending = (): { readonly done: Promise<void>; readonly mark: () => void } => {
+  let mark: () => void = () => undefined;
+  const done = new Promise<void>((resolve) => {
+    mark = resolve;
+  });
+  return { done, mark };
+};
+
+const inWorker = (
+  { canvas, stage }: SceneClientArgs,
+  callouts: SceneHost["callouts"],
+): Promise<Scene | null> =>
+  new Promise((resolve) => {
+    const worker = new Worker(new URL("./scene-worker.ts", import.meta.url), { type: "module" });
+    const size = sizeOf(canvas);
+    const drawn = pending();
+    let settled = false;
+    let inflight = false;
+    let head: ScreenPoint | null = null;
+    const post = (type: "frame" | "still"): void => {
+      const { w, h } = size();
+      const message: ToWorker = { type, stage, width: w, height: h };
+      worker.postMessage(message);
+    };
+    const scene: Scene = {
+      // One frame in flight at a time: a slow worker drops frames instead of falling behind the scroll.
+      frame: () => {
+        if (stage.mode === "off" || inflight) return;
+        inflight = true;
+        post("frame");
+      },
+      still: () => {
+        inflight = true;
+        post("still");
+      },
+      headOnScreen: () => head,
+      drawn: drawn.done,
+    };
+    worker.addEventListener("message", (event: MessageEvent<FromWorker>) => {
+      const m = event.data;
+      if (m.type === "ready") {
+        settled = true;
+        resolve(scene);
+        return;
+      }
+      if (m.type === "unsupported") {
+        settled = true;
+        worker.terminate();
+        resolve(null);
+        return;
+      }
+      inflight = false;
+      head = m.head;
+      if (m.callouts) callouts(m.callouts);
+      drawn.mark();
+    });
+    worker.addEventListener("error", () => {
+      if (settled) return;
+      settled = true;
+      resolve(null);
+    });
+    const { w, h } = size();
+    const { stack, spec } = monoFont();
+    const offscreen = canvas.transferControlToOffscreen();
+    const message: InitMessage = {
+      type: "init",
+      canvas: offscreen,
+      width: w,
+      height: h,
+      pixelRatio: devicePixelRatio || 1,
+      coarse: matchMedia("(pointer: coarse)").matches,
+      monoFamily: stack,
+      font: spec,
+      stage,
+    };
+    worker.postMessage(message, [offscreen]);
+  });
+
+const onPage = async (
+  { canvas, stage }: SceneClientArgs,
+  callouts: SceneHost["callouts"],
+): Promise<Scene | null> => {
+  if (!webgl2()) return null;
+  const { startScene } = await import("./scene");
+  const controls = await startScene({
+    canvas,
+    stage,
+    host: {
+      pixelRatio: devicePixelRatio || 1,
+      coarse: matchMedia("(pointer: coarse)").matches,
+      size: sizeOf(canvas),
+      createCanvas: (width, height) => {
+        const c = document.createElement("canvas");
+        c.width = width;
+        c.height = height;
+        return c;
+      },
+      monoFamily: monoFont().stack,
+      loadFont: (font) => document.fonts?.load(font) ?? Promise.resolve(),
+      callouts,
+    },
+  });
+  const drawn = pending();
+  return {
+    frame: () => {
+      controls.frame();
+      drawn.mark();
+    },
+    still: () => {
+      controls.still();
+      drawn.mark();
+    },
+    headOnScreen: controls.headOnScreen,
+    drawn: drawn.done,
+  };
+};
+
+/**
+ * Starts the scene, or resolves to null where it cannot run (no WebGL 2) and the drawing stands in.
+ * A worker whose WebGL 2 is missing (Safari 16) also leaves the drawing: its canvas is already gone.
+ */
+export const startScene = (args: SceneClientArgs): Promise<Scene | null> => {
+  const callouts = calloutSink(args.callouts);
+  const offscreen =
+    typeof Worker !== "undefined" &&
+    typeof OffscreenCanvas !== "undefined" &&
+    "transferControlToOffscreen" in args.canvas;
+  return offscreen ? inWorker(args, callouts) : onPage(args, callouts);
+};
diff --git a/src/scripts/landing/scene-worker.ts b/src/scripts/landing/scene-worker.ts
new file mode 100644
index 0000000..4f93ce8
--- /dev/null
+++ b/src/scripts/landing/scene-worker.ts
@@ -0,0 +1,118 @@
+// The scene in a worker: three.js loads, compiles and renders here, on an OffscreenCanvas, so the
+// page's own thread only ever sends the beat and places the callouts (see scene-client.ts).
+
+import { startScene, type CalloutFrame, type SceneControls } from "./scene";
+import type { Stage } from "./timeline";
+
+/** A @font-face from the page's stylesheet, so the engraved positions can be set in the mono face here. */
+export interface FontSpec {
+  readonly family: string;
+  readonly src: string;
+  readonly weight: string;
+  readonly unicodeRange: string;
+}
+
+export interface InitMessage {
+  readonly type: "init";
+  readonly canvas: OffscreenCanvas;
+  readonly width: number;
+  readonly height: number;
+  readonly pixelRatio: number;
+  readonly coarse: boolean;
+  readonly monoFamily: string;
+  readonly font: FontSpec | null;
+  readonly stage: Stage;
+}
+
+export interface DrawMessage {
+  readonly type: "frame" | "still";
+  readonly stage: Stage;
+  readonly width: number;
+  readonly height: number;
+}
+
+export type ToWorker = InitMessage | DrawMessage;
+
+export type FromWorker =
+  | { readonly type: "ready" }
+  | { readonly type: "unsupported" }
+  | {
+      readonly type: "drawn";
+      readonly head: { readonly x: number; readonly y: number };
+      readonly callouts: CalloutFrame | null;
+    };
+
+interface WorkerScope {
+  postMessage(message: FromWorker): void;
+  addEventListener(type: "message", listener: (event: MessageEvent<ToWorker>) => void): void;
+  readonly fonts?: FontFaceSet;
+}
+
+const scope = self as unknown as WorkerScope;
+const size = { w: 1, h: 1 };
+let stage: Stage | null = null;
+let controls: SceneControls | null = null;
+let callouts: CalloutFrame | null = null;
+
+const webgl2 = (): boolean => {
+  const probe = new OffscreenCanvas(1, 1).getContext("webgl2");
+  probe?.getExtension("WEBGL_lose_context")?.loseContext();
+  return probe !== null;
+};
+
+// A worker has no stylesheet, so the page's mono face is loaded here by its descriptors. Where that
+// is not possible the engraving falls back to the generic monospace, which is close enough at its size.
+const loadFont = async (spec: FontSpec | null): Promise<void> => {
+  if (!spec || !scope.fonts || typeof FontFace === "undefined") return;
+  const descriptors: FontFaceDescriptors = {};
+  if (spec.weight) descriptors.weight = spec.weight;
+  if (spec.unicodeRange) descriptors.unicodeRange = spec.unicodeRange;
+  try {
+    scope.fonts.add(await new FontFace(spec.family, spec.src, descriptors).load());
+  } catch {
+    // The generic monospace stands in.
+  }
+};
+
+const init = async (m: InitMessage): Promise<void> => {
+  size.w = m.width;
+  size.h = m.height;
+  if (!webgl2()) {
+    scope.postMessage({ type: "unsupported" });
+    return;
+  }
+  stage = m.stage;
+  const font = loadFont(m.font);
+  controls = await startScene({
+    canvas: m.canvas,
+    stage,
+    host: {
+      pixelRatio: m.pixelRatio,
+      coarse: m.coarse,
+      size: () => size,
+      createCanvas: (width, height) => new OffscreenCanvas(width, height),
+      monoFamily: m.monoFamily,
+      loadFont: () => font,
+      callouts: (frame) => {
+        callouts = frame;
+      },
+    },
+  });
+  scope.postMessage({ type: "ready" });
+};
+
+scope.addEventListener("message", (event) => {
+  const m = event.data;
+  if (m.type === "init") {
+    void init(m).catch(() => scope.postMessage({ type: "unsupported" }));
+    return;
+  }
+  if (!controls || !stage) return;
+  Object.assign(stage, m.stage);
+  size.w = m.width;
+  size.h = m.height;
+  callouts = null;
+  if (m.type === "frame") controls.frame();
+  else controls.still();
+  scope.postMessage({ type: "drawn", head: controls.headOnScreen(), callouts });
+});
diff --git a/src/scripts/landing/scene.ts b/src/scripts/landing/scene.ts
index ad11ae9..6812182 100644
--- a/src/scripts/landing/scene.ts
+++ b/src/scripts/landing/scene.ts
@@ -1,6 +1,8 @@
 // The mechanism in real-time 3D: the ⅃ as a machined monolith whose foot becomes the global stream,
 // a command condensing into an event at its head, the order's state folded into a channel in the bar,
 // a projection into the read model's rows, and the rebuild that rewinds to position 1 and replays.
+// It touches no DOM: everything it needs from the page comes through its host (SceneHost), so it
+// runs the same in a worker on an OffscreenCanvas (scene-worker.ts) as on the page (scene-client.ts).
 
 import * as THREE from "three";
 import { RoundedBoxGeometry } from "three/addons/geometries/RoundedBoxGeometry.js";
@@ -23,9 +25,45 @@ import {
   seg,
 } from "./timeline";
 
+/** Where a callout is pinned on screen this frame, in CSS pixels of the canvas. */
+export interface CalloutPlacement {
+  readonly id: string;
+  readonly x: number;
+  readonly y: number;
+  readonly opacity: number;
+  /** Set when the label should hang to the left of its point. */
+  readonly left: boolean;
+}
+
+export interface CalloutFrame {
+  readonly placed: readonly CalloutPlacement[];
+  /** The fold step being shown, for the fold callout's text. */
+  readonly fold: { readonly name: string; readonly position: string } | null;
+}
+
+type Canvas = HTMLCanvasElement | OffscreenCanvas;
+type Canvas2D = CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
+type CanvasTexture = THREE.CanvasTexture<Canvas>;
+
+/** What the scene needs from wherever it runs: the page itself, or a worker with an OffscreenCanvas. */
+export interface SceneHost {
+  /** Device pixels per CSS pixel. */
+  readonly pixelRatio: number;
+  /** A coarse pointer (a phone), which starts at a lower resolution. */
+  readonly coarse: boolean;
+  /** The canvas's size in CSS pixels, read every frame. */
+  readonly size: () => { readonly w: number; readonly h: number };
+  readonly createCanvas: (width: number, height: number) => Canvas;
+  /** The mono font stack (the --font-mono token) for the engraved positions, and the way to load it. */
+  readonly monoFamily: string;
+  readonly loadFont: (font: string) => Promise<unknown>;
+  /** Where the callouts are pinned after each frame. */
+  readonly callouts: (frame: CalloutFrame) => void;
+}
+
 export interface SceneArgs {
-  readonly canvas: HTMLCanvasElement;
-  readonly callouts: HTMLElement;
+  readonly canvas: Canvas;
+  readonly host: SceneHost;
   readonly stage: Stage;
 }
 
@@ -186,21 +224,23 @@ const withWorldPosition = (shader: THREE.WebGLProgramParametersWithUniforms): vo
   );
 };
 
+const context2d = (c: Canvas): Canvas2D | null =>
+  (c as HTMLCanvasElement).getContext("2d") as Canvas2D | null;
+
 const canvasTexture = (
+  create: SceneHost["createCanvas"],
   width: number,
   height: number,
-  draw: (g: CanvasRenderingContext2D) => void,
-): THREE.CanvasTexture => {
-  const c = document.createElement("canvas");
-  c.width = width;
-  c.height = height;
-  const g = c.getContext("2d");
+  draw: (g: Canvas2D) => void,
+): CanvasTexture => {
+  const c = create(width, height);
+  const g = context2d(c);
   if (g) draw(g);
   return new THREE.CanvasTexture(c);
 };
 
-const radialTexture = (): THREE.CanvasTexture => {
-  const t = canvasTexture(128, 128, (g) => {
+const radialTexture = (create: SceneHost["createCanvas"]): CanvasTexture => {
+  const t = canvasTexture(create, 128, 128, (g) => {
     const gr = g.createRadialGradient(64, 64, 0, 64, 64, 64);
     gr.addColorStop(0, "rgba(255,255,255,1)");
     gr.addColorStop(0.25, "rgba(255,255,255,.45)");
@@ -289,20 +329,15 @@ const buildStudio = (pmrem: THREE.PMREMGenerator, light: boolean): THREE.Texture
   return pmrem.fromScene(s, 0.02).texture;
 };
 
-export const startScene = async ({
-  canvas,
-  callouts,
-  stage,
-}: SceneArgs): Promise<SceneControls> => {
+export const startScene = async ({ canvas, host, stage }: SceneArgs): Promise<SceneControls> => {
   const renderer = new THREE.WebGLRenderer({
     canvas,
     antialias: true,
     alpha: true,
     powerPreference: "high-performance",
   });
-  const mobile = matchMedia("(pointer: coarse)").matches;
   // Resolution starts at the screen's density and steps down while frames run long (see adapt).
-  let pixelRatio = Math.min(devicePixelRatio || 1, mobile ? 1.5 : 2);
+  let pixelRatio = Math.min(host.pixelRatio || 1, host.coarse ? 1.5 : 2);
   renderer.setPixelRatio(pixelRatio);
   renderer.setClearColor(0x000000, 0);
   renderer.toneMapping = THREE.ACESFilmicToneMapping;
@@ -372,7 +407,7 @@ export const startScene = async ({
   };
 
   // Everything that glows, re-tinted and re-blended when the mode changes.
-  const glowTexture = radialTexture();
+  const glowTexture = radialTexture(host.createCanvas);
   const glows: {
     readonly material: THREE.Material & { color?: THREE.Color };
     readonly tone: "accent" | "highlight";
@@ -409,7 +444,7 @@ export const startScene = async ({
   };
 
   // Brushed finish: fine vertical streaks in the roughness of the faces, like a machined part.
-  const brushed = canvasTexture(512, 512, (g) => {
+  const brushed = canvasTexture(host.createCanvas, 512, 512, (g) => {
     const r = seeded(11);
     g.fillStyle = "#c4c4c4";
     g.fillRect(0, 0, 512, 512);
@@ -489,7 +524,7 @@ export const startScene = async ({
   });
   const fill = new THREE.Mesh(fillGeometry, fillMaterial);
   fill.position.set(0, CHANNEL_BASE, FRONT + 0.003);
-  const haloTexture = canvasTexture(64, 4, (g) => {
+  const haloTexture = canvasTexture(host.createCanvas, 64, 4, (g) => {
     const gr = g.createLinearGradient(0, 0, 64, 0);
     gr.addColorStop(0, "rgba(255,255,255,0)");
     gr.addColorStop(0.42, "rgba(255,255,255,.35)");
@@ -563,18 +598,13 @@ export const startScene = async ({
   // Engraved positions on every tenth plate, from one canvas atlas.
   const MAJORS: number[] = [];
   for (let i = 1; i < PLATES; i += 10) MAJORS.push(i);
-  const atlasCanvas = document.createElement("canvas");
-  atlasCanvas.width = 1024;
-  atlasCanvas.height = 512;
+  const atlasCanvas = host.createCanvas(1024, 512);
   const atlas = new THREE.CanvasTexture(atlasCanvas);
   atlas.colorSpace = THREE.SRGBColorSpace;
   atlas.anisotropy = Math.min(8, renderer.capabilities.getMaxAnisotropy());
-  const monoFamily =
-    getComputedStyle(document.documentElement).getPropertyValue("--font-mono").trim() ||
-    "monospace";
-  const atlasFont = `500 44px ${monoFamily}`;
+  const atlasFont = `500 44px ${host.monoFamily || "monospace"}`;
   const drawAtlas = (): void => {
-    const g = atlasCanvas.getContext("2d");
+    const g = context2d(atlasCanvas);
     if (!g) return;
     g.clearRect(0, 0, 1024, 512);
     g.fillStyle = g.strokeStyle = "#fff";
@@ -594,7 +624,7 @@ export const startScene = async ({
   };
   drawAtlas();
   let stillShown = false; // set by still(), so the still is redrawn once the engraving font arrives
-  document.fonts?.load(atlasFont).then(
+  void host.loadFont(atlasFont).then(
     () => {
       drawAtlas();
       if (stillShown) still();
@@ -858,7 +888,7 @@ export const startScene = async ({
   shadowFloor.receiveShadow = true;
   shadowFloor.renderOrder = 3;
   const poolMaterial = new THREE.MeshBasicMaterial({
-    map: radialTexture(),
+    map: radialTexture(host.createCanvas),
     transparent: true,
     depthWrite: false,
   });
@@ -868,7 +898,7 @@ export const startScene = async ({
   pool.position.set(-0.4, 0, 0.4);
   pool.renderOrder = 1;
   const contactMaterial = new THREE.MeshBasicMaterial({
-    map: canvasTexture(128, 128, (g) => {
+    map: canvasTexture(host.createCanvas, 128, 128, (g) => {
       const gr = g.createRadialGradient(64, 64, 0, 64, 64, 64);
       gr.addColorStop(0, "rgba(0,0,0,1)");
       gr.addColorStop(0.3, "rgba(0,0,0,.6)");
@@ -1088,8 +1118,7 @@ export const startScene = async ({
     camera.updateMatrixWorld();
   };
   const resize = (): void => {
-    const w = canvas.clientWidth || innerWidth;
-    const h = canvas.clientHeight || innerHeight;
+    const { w, h } = host.size();
     viewport.w = w;
     viewport.h = h;
     renderer.setSize(w, h, false);
@@ -1099,7 +1128,11 @@ export const startScene = async ({
     fitPath();
   };
   resize();
-  addEventListener("resize", resize);
+  // The host's size is read every frame; a change re-lays the camera's path (see frame and still).
+  const fit = (): void => {
+    const { w, h } = host.size();
+    if (w !== viewport.w || h !== viewport.h) resize();
+  };
 
   // ---- The objects at a beat ----
   const eventAt = new THREE.Vector3();
@@ -1308,12 +1341,7 @@ export const startScene = async ({
     plateReflection.opacity = look.reflection[1] * (1 - 0.8 * inWindow(b, 5.7, 7.25, 0.15));
   };
 
-  // ---- Callouts: technical labels pinned to points in the scene ----
-  const calloutEls = new Map<string, { readonly el: HTMLElement; shown: boolean }>();
-  for (const el of callouts.querySelectorAll<HTMLElement>("[data-callout]"))
-    calloutEls.set(el.dataset.callout ?? "", { el, shown: false });
-  const foldText = callouts.querySelector<HTMLElement>("[data-fold-text]");
-  let foldShown = -2;
+  // ---- Callouts: technical labels pinned to points in the scene, placed on the page by the host ----
   const point = new THREE.Vector3();
   const CALLOUTS: readonly (readonly [
     string,
@@ -1341,39 +1369,26 @@ export const startScene = async ({
   ];
   const placeCallouts = (b: number): void => {
     const step = FOLD[foldStep];
-    if (foldStep !== foldShown && step && foldText) {
-      foldShown = foldStep;
-      foldText.firstChild?.replaceWith(`${step.name} · `);
-      const position = foldText.querySelector("em");
-      if (position) position.textContent = formatPosition(step.position);
-    }
+    const placed: CalloutPlacement[] = [];
     for (const [id, a, z, locate] of CALLOUTS) {
-      const c = calloutEls.get(id);
-      if (!c) continue;
       const o = inWindow(b, a, z, 0.08);
-      if (o <= 0.001) {
-        if (c.shown) {
-          c.el.style.opacity = "0";
-          c.shown = false;
-        }
-        continue;
-      }
+      if (o <= 0.001) continue;
       locate(point).project(camera);
-      if (point.z > 1 || Math.abs(point.x) > 1.2 || Math.abs(point.y) > 1.2) {
-        c.el.style.opacity = "0";
-        c.shown = false;
-        continue;
-      }
+      if (point.z > 1 || Math.abs(point.x) > 1.2 || Math.abs(point.y) > 1.2) continue;
       const x = (point.x * 0.5 + 0.5) * viewport.w;
       const y = (-point.y * 0.5 + 0.5) * viewport.h;
-      c.el.classList.toggle(
-        "left",
-        ((id === "stream" || id === "query") && x >= 160) || x > viewport.w - 240,
-      );
-      c.el.style.transform = `translate3d(${x.toFixed(1)}px, ${y.toFixed(1)}px, 0)`;
-      c.el.style.opacity = o.toFixed(3);
-      c.shown = true;
+      placed.push({
+        id,
+        x: Math.round(x * 10) / 10,
+        y: Math.round(y * 10) / 10,
+        opacity: Math.round(o * 1000) / 1000,
+        left: ((id === "stream" || id === "query") && x >= 160) || x > viewport.w - 240,
+      });
     }
+    host.callouts({
+      placed,
+      fold: step ? { name: step.name, position: formatPosition(step.position) } : null,
+    });
   };
 
   const drift = (time: number, amount: number): void => {
@@ -1416,6 +1431,7 @@ export const startScene = async ({
 
   const frame = (): void => {
     if (stage.mode === "off") return;
+    fit();
     adapt(performance.now());
     applyTheme(stage.theme);
     const time = stage.time;
diff --git a/src/scripts/landing/story.ts b/src/scripts/landing/story.ts
index 189e443..0d68694 100644
--- a/src/scripts/landing/story.ts
+++ b/src/scripts/landing/story.ts
@@ -1,8 +1,9 @@
 // The scroll-driven story: turns scroll into the beat, sets the captions and the readout, and hands
-// every frame to the 3D scene, which loads only where WebGL 2 is available.
+// every frame to the 3D scene, which runs in a worker where it can (see scene-client.ts).
 
 import { currentTheme, onThemeChange } from "../theme";
 import { createIntro, type ScreenPoint } from "./intro";
+import { startScene, type Scene } from "./scene-client";
 import {
   clamp,
   END,
@@ -20,20 +21,6 @@ import {
   seg,
 } from "./timeline";
 
-interface Scene {
-  readonly frame: () => void;
-  readonly still: () => void;
-  readonly headOnScreen: () => ScreenPoint;
-}
-
-const webgl2 = (): boolean => {
-  const probe = document.createElement("canvas").getContext("webgl2");
-  probe?.getExtension("WEBGL_lose_context")?.loseContext();
-  return probe !== null;
-};
-// The scene is the heaviest part of the page, so its fetch starts before anything else here.
-const loading = webgl2() ? import("./scene") : null;
-
 const root = document.documentElement;
 const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
 const byId = <T extends HTMLElement>(id: string): T => {
@@ -196,14 +183,13 @@ const readoutAt = (b: number): Readout => {
 };
 
 // ---- The scene and the intro ----
+// The scene is the heaviest part of the page, so it starts before anything else here.
 let scene: Scene | null = null;
-const started: Promise<Scene | null> = loading
-  ? loading.then(({ startScene }) => startScene({ canvas, callouts, stage })).catch(() => null)
-  : Promise.resolve(null);
+const started: Promise<Scene | null> = startScene({ canvas, callouts, stage }).catch(() => null);
 const intro = createIntro({
   root,
   stream: byId("intro-stream"),
-  count: byId("intro-count"),
+  readout: { key: hudKey, value: hudValue, sub: hudSub },
   ready: started,
 });
 // Where the stream's head sits in the hero until the scene can say exactly.
@@ -281,14 +267,16 @@ const frame = (now: number): void => {
   });
 
 
-  intro.tick(now, scene?.headOnScreen() ?? estimatedHead());
+  // While the intro counts, the readout is its counter.
   const r = readoutAt(b);
-  const key = r.key + r.value + r.sub;
-  if (key !== shown) {
-    shown = key;
-    hudKey.textContent = r.key;
-    hudValue.textContent = r.value;
-    hudSub.textContent = r.sub;
+  if (!intro.tick(now, scene?.headOnScreen() ?? estimatedHead())) {
+    const key = r.key + r.value + r.sub;
+    if (key !== shown) {
+      shown = key;
+      hudKey.textContent = r.key;
+      hudValue.textContent = r.value;
+      hudSub.textContent = r.sub;
+    }
   }
   hud.classList.toggle("large", r.large && stage.mode === "story");
   write(hudBar, "transform", `translateX(${((-(HEAD - r.position) / HEAD) * 240).toFixed(1)}px)`);
@@ -300,7 +288,7 @@ const frame = (now: number): void => {
   write(callouts, "visibility", stage.mode === "story" ? "visible" : "hidden");
   write(canvas, "visibility", stage.mode === "off" ? "hidden" : "visible");
 
-  scene?.frame();
+  if (stage.mode !== "off") scene?.frame();
   requestAnimationFrame(frame);
 };
 
@@ -324,7 +312,8 @@ void started.then(async (controls) => {
     onThemeChange(redraw);
   } else controls.frame();
   clearTimeout(late);
-  // The canvas fades in with the hero, and only once its first frame is drawn.
+  // The canvas fades in once its first frame is drawn, and not before the intro's stream has reached its head.
+  await controls.drawn;
   await intro.revealed;
   root.classList.remove("no-webgl");
   root.classList.add("webgl");
diff --git a/src/styles/global.css b/src/styles/global.css
index a09356a..8575baa 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -50,7 +50,7 @@ h3 {
 }
 
 :focus-visible {
-  outline: 1px solid var(--accent);
+  outline: 2px solid var(--accent);
   outline-offset: 3px;
 }
 
@@ -139,23 +139,18 @@ h3 {
   transform: none;
 }
 
-/* The intro (src/scripts/landing/intro.ts): the hero holds back while the page catches up with the
-   stream, then enters in order, each line of the headline rising from its own baseline. */
+/* The intro (src/scripts/landing/intro.ts): on a first visit the page settles into place from a few
+   pixels below, in order, the way new entries arrive at the end, while the stream catches up in the
+   stage. It moves but never fades: the hero is painted, legible, on the first frame, and the browser
+   counts it as such; nothing waits on a script or on the scene. */
 .intro [data-enter] {
-  opacity: 0;
-  transform: translateY(16px);
-}
-
-.intro [data-rise] {
-  transform: translateY(105%);
+  animation: enter 0.9s var(--ease) var(--enter-delay, 0s) both;
 }
 
-.intro.entering :is([data-enter], [data-rise]) {
-  opacity: 1;
-  transform: none;
-  transition:
-    opacity 0.6s var(--ease) var(--enter-delay, 0s),
-    transform 0.9s var(--ease) var(--enter-delay, 0s);
+@keyframes enter {
+  from {
+    transform: translateY(12px);
+  }
 }
 
 /* A still page (no JavaScript, or reduced motion; see base.astro) shows everything in place. */

From 4706bf3a5f4e5b0c9db7a25ace2c1b026488441b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Be=C3=B1at=20Espi=C3=B1a?= <benatespina@gmail.com>
Date: Fri, 30 Oct 2026 23:12:58 +0100
Subject: [PATCH 2/2] feat: structured data, response headers and finger-sized
 targets

Search engines get JSON-LD for the framework (SoftwareSourceCode), the
organisation and the site, an og:locale, a link to the sitemap with a lastmod,
and a noindex on the 404 page. public/_headers gives the hashed build output a
year of immutable cache and sets the usual safety headers.

On the page: a nav landmark, link targets padded to a finger's size without
moving the type, a slightly larger mode toggle, a 2px focus ring, a live region
that announces the copied install command, and a heading for the facts section
so the outline no longer jumps from h1 to h3.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 public/_headers                    | 12 +++++++++
 src/components/install.astro       | 22 ++++++++++++----
 src/components/landing/facts.astro |  3 ++-
 src/components/nav.astro           | 22 +++++++++++-----
 src/components/theme-toggle.astro  |  6 ++---
 src/layouts/base.astro             | 16 +++++++++---
 src/pages/404.astro                |  2 +-
 src/pages/index.astro              | 42 ++++++++++++++++++++++++++++++
 8 files changed, 105 insertions(+), 20 deletions(-)
 create mode 100644 public/_headers

diff --git a/public/_headers b/public/_headers
new file mode 100644
index 0000000..065e4f7
--- /dev/null
+++ b/public/_headers
@@ -0,0 +1,12 @@
+# Served by Cloudflare's static assets (wrangler.jsonc). Hashed build output never changes under its
+# name, so it may be cached for good; everything else revalidates.
+
+/*
+  X-Content-Type-Options: nosniff
+  X-Frame-Options: DENY
+  Referrer-Policy: strict-origin-when-cross-origin
+  Permissions-Policy: camera=(), microphone=(), geolocation=(), interest-cohort=()
+  Cross-Origin-Opener-Policy: same-origin
+
+/_astro/*
+  Cache-Control: public, max-age=31536000, immutable
diff --git a/src/components/install.astro b/src/components/install.astro
index 302e35e..882cd31 100644
--- a/src/components/install.astro
+++ b/src/components/install.astro
@@ -5,7 +5,8 @@ const command = "npm create bounda@latest my-app";
 <div class="install">
   <span class="prompt" aria-hidden="true">$</span>
   <code>{command}</code>
-  <button type="button" data-copy={command}>Copy</button>
+  <button type="button" data-copy={command} aria-label="Copy the install command">Copy</button>
+  <span class="visually-hidden" role="status" aria-live="polite" data-copy-status></span>
 </div>
 
 <style>
@@ -50,11 +51,16 @@ const command = "npm create bounda@latest my-app";
     cursor: pointer;
   }
 
-  button:hover {
+  button:hover,
+  button:focus-visible {
     color: var(--text);
     background: var(--raised);
   }
 
+  button:focus-visible {
+    outline-offset: -3px;
+  }
+
   @media (max-width: 760px) {
     .install {
       width: 100%;
@@ -80,15 +86,21 @@ const command = "npm create bounda@latest my-app";
 
 <script>
   for (const button of document.querySelectorAll<HTMLButtonElement>("[data-copy]")) {
+    const status = button.parentElement?.querySelector("[data-copy-status]");
+    let reset: ReturnType<typeof setTimeout> | undefined;
     button.addEventListener("click", async () => {
+      let outcome = "Copied";
       try {
         await navigator.clipboard.writeText(button.dataset.copy ?? "");
-        button.textContent = "Copied";
       } catch {
-        button.textContent = "Select";
+        outcome = "Select";
       }
-      setTimeout(() => {
+      button.textContent = outcome;
+      if (status) status.textContent = outcome === "Copied" ? "Install command copied" : "Copying failed; select the command instead";
+      clearTimeout(reset);
+      reset = setTimeout(() => {
         button.textContent = "Copy";
+        if (status) status.textContent = "";
       }, 1600);
     });
   }
diff --git a/src/components/landing/facts.astro b/src/components/landing/facts.astro
index 83bbfe0..c20b0ea 100644
--- a/src/components/landing/facts.astro
+++ b/src/components/landing/facts.astro
@@ -23,8 +23,9 @@ const facts = [
 ];
 ---
 
-<section class="facts" aria-label="What Bounda gives you">
+<section class="facts" aria-labelledby="facts-title">
   <div class="wrap">
+    <h2 class="visually-hidden" id="facts-title">What Bounda gives you</h2>
     <div class="grid">
       {
         facts.map((f, i) => (
diff --git a/src/components/nav.astro b/src/components/nav.astro
index 0a61aa8..7f147f8 100644
--- a/src/components/nav.astro
+++ b/src/components/nav.astro
@@ -7,12 +7,14 @@ import ThemeToggle from "./theme-toggle.astro";
 
 <header class="nav">
   <a class="brand" href="/" aria-label="Bounda home"><Lockup /></a>
-  <ul data-enter style="--enter-delay: 0.46s">
-    <li><a class="link" href="https://docs.bounda.dev/getting-started/">Docs</a></li>
-    <li class="wide"><a class="link" href="https://demo.bounda.dev">Demo</a></li>
-    <li><a class="link" href="https://github.com/bounda-dev/bounda">GitHub</a></li>
-    <li><ThemeToggle /></li>
-  </ul>
+  <nav aria-label="Primary" data-enter style="--enter-delay: 0.42s">
+    <ul>
+      <li><a class="link" href="https://docs.bounda.dev/getting-started/">Docs</a></li>
+      <li class="wide"><a class="link" href="https://demo.bounda.dev">Demo</a></li>
+      <li><a class="link" href="https://github.com/bounda-dev/bounda">GitHub</a></li>
+      <li><ThemeToggle /></li>
+    </ul>
+  </nav>
 </header>
 
 <style>
@@ -60,7 +62,11 @@ import ThemeToggle from "./theme-toggle.astro";
     padding: 0;
   }
 
+  /* Small type, but a finger-sized target: the padding is folded back into the margin. */
   .link {
+    display: inline-block;
+    padding: 12px 6px;
+    margin: -12px -6px;
     font-family: var(--font-display);
     font-weight: 600;
     font-stretch: 125%;
@@ -70,9 +76,11 @@ import ThemeToggle from "./theme-toggle.astro";
     text-transform: uppercase;
     text-decoration: none;
     color: var(--muted);
+    transition: color 0.16s var(--ease);
   }
 
-  .link:hover {
+  .link:hover,
+  .link:focus-visible {
     color: var(--text);
   }
 
diff --git a/src/components/theme-toggle.astro b/src/components/theme-toggle.astro
index 1911e04..e7f10ca 100644
--- a/src/components/theme-toggle.astro
+++ b/src/components/theme-toggle.astro
@@ -1,6 +1,6 @@
 <button class="theme-toggle" type="button" data-theme-toggle>
   <span class="disc" aria-hidden="true"></span>
-  <span class="visually-hidden" data-theme-label>Switch mode</span>
+  <span class="visually-hidden" data-theme-label>Switch between light and dark mode</span>
 </button>
 
 <style>
@@ -8,8 +8,8 @@
     appearance: none;
     display: inline-grid;
     place-items: center;
-    width: 30px;
-    height: 26px;
+    width: 32px;
+    height: 28px;
     padding: 0;
     background: transparent;
     border: 1px solid var(--rule);
diff --git a/src/layouts/base.astro b/src/layouts/base.astro
index 88e665f..432b9bc 100644
--- a/src/layouts/base.astro
+++ b/src/layouts/base.astro
@@ -5,15 +5,19 @@ import "../styles/global.css";
 interface Props {
   readonly title?: string;
   readonly description?: string;
+  /** Pages that should not be indexed, such as the 404 page. */
+  readonly noindex?: boolean;
 }
 
 const {
   title = "Bounda — Event sourcing and CQRS for TypeScript",
   description = "Your tables keep the last write. Bounda keeps every change, so any view can be rebuilt from it. Plain TypeScript modules, inferred types, one database.",
+  noindex = false,
 } = Astro.props;
 
-const canonicalUrl = new URL(Astro.url.pathname, Astro.site ?? "https://bounda.dev");
-const socialImage = new URL("/og.jpg", Astro.site ?? "https://bounda.dev");
+const site = Astro.site ?? new URL("https://bounda.dev");
+const canonicalUrl = new URL(Astro.url.pathname, site);
+const socialImage = new URL("/og.jpg", site);
 const socialImageAlt = "The Bounda symbol as a machined monolith whose foot becomes the global stream, beside the headline: Event sourcing without the ceremony.";
 ---
 
@@ -27,14 +31,18 @@ const socialImageAlt = "The Bounda symbol as a machined monolith whose foot beco
     <meta name="theme-color" content="#eceae4" media="(prefers-color-scheme: light)" />
     <title>{title}</title>
     <meta name="description" content={description} />
+    {noindex && <meta name="robots" content="noindex" />}
     <link rel="canonical" href={canonicalUrl} />
+    <link rel="sitemap" type="application/xml" href="/sitemap-index.xml" />
 
     <meta property="og:type" content="website" />
     <meta property="og:url" content={canonicalUrl} />
     <meta property="og:title" content={title} />
     <meta property="og:description" content={description} />
     <meta property="og:site_name" content="Bounda" />
+    <meta property="og:locale" content="en_US" />
     <meta property="og:image" content={socialImage} />
+    <meta property="og:image:type" content="image/jpeg" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
     <meta property="og:image:alt" content={socialImageAlt} />
@@ -66,9 +74,11 @@ const socialImageAlt = "The Bounda symbol as a machined monolith whose foot beco
       })();
     </script>
 
+    <!-- All three faces are on the first screen: the headline, the lead and the install command. -->
     <Font cssVariable="--font-science-gothic" preload />
     <Font cssVariable="--font-ibm-plex-sans" preload />
-    <Font cssVariable="--font-red-hat-mono" />
+    <Font cssVariable="--font-red-hat-mono" preload />
+    <slot name="head" />
   </head>
   <body>
     <slot />
diff --git a/src/pages/404.astro b/src/pages/404.astro
index d3cc414..7250ede 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -4,7 +4,7 @@ import Nav from "../components/nav.astro";
 import BaseLayout from "../layouts/base.astro";
 ---
 
-<BaseLayout title="Page not found — Bounda" description="There is no page at this address.">
+<BaseLayout title="Page not found — Bounda" description="There is no page at this address." noindex>
   <Nav />
   <main id="main-content" class="not-found">
     <div class="wrap">
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 9e5f20b..2f03076 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -9,9 +9,51 @@ import Stage from "../components/landing/stage.astro";
 import Story from "../components/landing/story.astro";
 import Nav from "../components/nav.astro";
 import BaseLayout from "../layouts/base.astro";
+
+const site = (Astro.site ?? new URL("https://bounda.dev")).href;
+const repository = "https://github.com/bounda-dev/bounda";
+
+// What the page is, for search engines: the framework, its code, and the site that presents it.
+const structuredData = {
+  "@context": "https://schema.org",
+  "@graph": [
+    {
+      "@type": "SoftwareSourceCode",
+      "@id": `${site}#bounda`,
+      name: "Bounda",
+      description:
+        "An event sourcing and CQRS framework for TypeScript. Plain modules, inferred types, one database, and read models that rebuild from the global stream.",
+      url: site,
+      codeRepository: repository,
+      programmingLanguage: "TypeScript",
+      runtimePlatform: "Node.js",
+      license: `${repository}/blob/main/LICENSE`,
+      author: { "@id": `${site}#organization` },
+    },
+    {
+      "@type": "Organization",
+      "@id": `${site}#organization`,
+      name: "Bounda",
+      url: site,
+      logo: `${site}web-app-manifest-512x512.png`,
+      sameAs: ["https://github.com/bounda-dev", "https://www.npmjs.com/org/bounda-dev"],
+    },
+    {
+      "@type": "WebSite",
+      "@id": `${site}#website`,
+      name: "Bounda",
+      url: site,
+      publisher: { "@id": `${site}#organization` },
+      inLanguage: "en",
+    },
+  ],
+};
 ---
 
 <BaseLayout>
+  <Fragment slot="head">
+    <script type="application/ld+json" set:html={JSON.stringify(structuredData)} />
+  </Fragment>
   <Stage />
   <Nav />
   <main id="main-content">