reagent-systems · ThyFriendlyFox · Aug 18, 2026 · Aug 18, 2026
diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml
@@ -0,0 +1,34 @@
+name: Lighthouse (website)
+
+on:
+  pull_request:
+    paths:
+      - 'website/**'
+      - '.github/workflows/lighthouse.yml'
+  push:
+    branches: [main]
+    paths:
+      - 'website/**'
+  workflow_dispatch:
+
+concurrency:
+  group: lighthouse-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  lighthouse:
+    name: Lighthouse CI
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node 22
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+
+      - name: Run Lighthouse CI
+        uses: treosh/lighthouse-ci-action@v12
+        with:
+          configPath: ./website/lighthouserc.json
+          temporaryPublicStorage: true
diff --git a/.gitignore b/.gitignore
@@ -26,3 +26,6 @@ node_modules/
 # and agent worktrees. afca53e removed the loop file from tracking once already.
 .claude/ralph-loop.local.md
 .claude/worktrees/
+
+# Lighthouse CI local reports
+.lighthouseci/
diff --git a/website/assets/fonts/ibm-plex-mono-latin-400-normal.woff2 b/website/assets/fonts/ibm-plex-mono-latin-400-normal.woff2
diff --git a/website/assets/fonts/ibm-plex-mono-latin-500-normal.woff2 b/website/assets/fonts/ibm-plex-mono-latin-500-normal.woff2
diff --git a/website/assets/fonts/ibm-plex-mono-latin-600-normal.woff2 b/website/assets/fonts/ibm-plex-mono-latin-600-normal.woff2
diff --git a/website/assets/fonts/ibm-plex-mono-latin-700-normal.woff2 b/website/assets/fonts/ibm-plex-mono-latin-700-normal.woff2
diff --git a/website/assets/og-cover.png b/website/assets/og-cover.png
diff --git a/website/dither.html b/website/dither.html
@@ -118,6 +118,11 @@
   const slotsEl = document.getElementById('slots');
   const blackEl = document.getElementById('black');
 
+  // Marketing-embed mode: lighter defaults so the hero never blocks the main
+  // thread (no OCR/tesseract download, fewer particles). The standalone widget
+  // is unaffected.
+  const EMBED = new URLSearchParams(location.search).get('embed') === '1';
+
   const RAMP = '.:-=+*#%@';
   // ramp first (indices 0..8 are the tonal glyphs), then every printable char
   let CHARS = RAMP;
@@ -149,7 +154,7 @@
   const MODES = ['dot', 'ascii', 'hybrid'];
   const GLYPH = { dot: '\u00b7', ascii: '@', hybrid: '\u259a' };
   let mode = 'hybrid';
-  let densityScale = 1, maxCharPx = 36;
+  let densityScale = EMBED ? 0.55 : 1, maxCharPx = 36;
   let W = 0, H = 0, DPR = 1, N = 0, frame = 0;
 
   let px, py, vx, vy, tx, ty, bx, by, pf, bo, wv, tg, tcol, cOrder, jit, cellOf, items;
@@ -626,7 +631,7 @@
         renderSlots();
         seed();
         applyTargets(idx);
-        if (!animated) runOCR();
+        if (!animated && !EMBED) runOCR();
         done();
       };
       img.src = url;
@@ -1127,7 +1132,7 @@
 
   // --- marketing embed hooks ---
   const params = new URLSearchParams(location.search);
-  const embed = params.get('embed') === '1';
+  const embed = EMBED;
   if (embed) {
     document.documentElement.classList.add('embed');
     setMenu(false);

diff --git a/website/index.html b/website/index.html
@@ -3,17 +3,67 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Mouse — the coding IDE built for a phone</title>
-  <meta name="description" content="Mouse is a native mobile IDE. Swipe between editors, pinch workspaces open, run real node and git — built for a phone, not shrunk from a desktop.">
-  <meta property="og:title" content="Mouse — the coding IDE built for a phone">
-  <meta property="og:description" content="A gesture-driven development environment for iOS and Android. Real node. Real git. No desktop compromise.">
-  <meta property="og:image" content="assets/logo.png">
+  <title>Mouse — Mobile Coding App &amp; IDE for Builders</title>
+  <meta name="description" content="Mouse is a mobile coding app: a native IDE for iOS and Android with real node, git, and a terminal. One of the best apps for builders who ship from a phone.">
+  <meta name="keywords" content="mobile coding app, apps for builders, mobile IDE, code on your phone, iOS IDE, Android IDE, node on phone, git on phone, developer tools, mobile development environment">
+  <meta name="author" content="reagent-systems">
+  <meta name="robots" content="index, follow, max-image-preview:large">
+  <link rel="canonical" href="https://reagent-systems.github.io/mouse/">
   <meta name="theme-color" content="#060608">
+
+  <meta property="og:type" content="website">
+  <meta property="og:site_name" content="Mouse">
+  <meta property="og:url" content="https://reagent-systems.github.io/mouse/">
+  <meta property="og:title" content="Mouse — Mobile Coding App &amp; IDE for Builders">
+  <meta property="og:description" content="A native mobile coding app for iOS and Android: real node, real git, a terminal, and a gesture shell. The IDE for builders who ship from a phone.">
+  <meta property="og:image" content="https://reagent-systems.github.io/mouse/assets/og-cover.png">
+  <meta property="og:image:width" content="1200">
+  <meta property="og:image:height" content="630">
+  <meta property="og:image:alt" content="Mouse — the mobile coding app for builders">
+
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="Mouse — Mobile Coding App &amp; IDE for Builders">
+  <meta name="twitter:description" content="A native mobile coding app for iOS and Android: real node, real git, a terminal, and a gesture shell. The IDE for builders who ship from a phone.">
+  <meta name="twitter:image" content="https://reagent-systems.github.io/mouse/assets/og-cover.png">
+
   <link rel="icon" href="assets/logo.png" type="image/png">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="styles.css?v=2">
+  <link rel="apple-touch-icon" href="assets/logo.png">
+  <link rel="preload" as="font" type="font/woff2" href="assets/fonts/ibm-plex-mono-latin-400-normal.woff2" crossorigin>
+  <link rel="preload" as="font" type="font/woff2" href="assets/fonts/ibm-plex-mono-latin-700-normal.woff2" crossorigin>
+  <link rel="stylesheet" href="styles.css?v=3">
+
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@graph": [
+      {
+        "@type": "SoftwareApplication",
+        "name": "Mouse",
+        "applicationCategory": "DeveloperApplication",
+        "applicationSubCategory": "Mobile Coding App",
+        "operatingSystem": "iOS, iPadOS, Android",
+        "description": "Mouse is a mobile coding app: a native IDE for iOS and Android with real node, git, and a terminal, wrapped in a gesture shell. Built for builders who ship from a phone.",
+        "url": "https://reagent-systems.github.io/mouse/",
+        "image": "https://reagent-systems.github.io/mouse/assets/og-cover.png",
+        "isAccessibleForFree": true,
+        "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
+        "author": {
+          "@type": "Organization",
+          "name": "reagent-systems",
+          "url": "https://github.com/reagent-systems"
+        },
+        "sameAs": ["https://github.com/reagent-systems/mouse"]
+      },
+      {
+        "@type": "WebSite",
+        "name": "Mouse",
+        "url": "https://reagent-systems.github.io/mouse/",
+        "description": "The mobile coding app and IDE for builders.",
+        "publisher": { "@type": "Organization", "name": "reagent-systems", "url": "https://github.com/reagent-systems" }
+      }
+    ]
+  }
+  </script>
 </head>
 <body>
   <a class="sr-only" href="#main">Skip to content</a>
@@ -46,17 +96,16 @@
       <iframe
         class="hero-viz"
         title="Dither boids forming Mouse app screens"
-        src="dither.html?embed=1&imgs=assets/app-history.png,assets/app-vite.png,assets/app-ruby.png"
-        loading="eager"
+        data-src="dither.html?embed=1&imgs=assets/app-history.png,assets/app-vite.png,assets/app-ruby.png"
       ></iframe>
       <div class="hero-fade" aria-hidden="true"></div>
       <div class="hero-content">
         <span class="badge"><span class="dot"></span> Native for <b>iOS &amp; Android</b> · open source</span>
         <h1 class="hero-title">A real IDE,<br><span class="soft">built for a phone.</span></h1>
         <p class="hero-lede">
-          Mouse is a gesture shell where the whole development environment lives:
-          swipe between editors, pinch workspaces open, and run real
-          <code>node</code> and git against your GitHub repos.
+          Mouse is a mobile coding app. A gesture shell where the whole
+          development environment lives: swipe between editors, pinch workspaces
+          open, and run real <code>node</code> and git against your GitHub repos.
         </p>
         <div class="hero-actions">
           <a class="btn btn-primary" href="https://github.com/reagent-systems/mouse" rel="noopener">
@@ -81,7 +130,7 @@ <h1 class="hero-title">A real IDE,<br><span class="soft">built for a phone.</spa
         <div class="section-head reveal">
           <span class="eyebrow">Screens</span>
           <h2>The whole workflow, in your thumb’s reach.</h2>
-          <p>Files, editor, terminal, and the commit graph are containers on a ring. Swipe to the next; pinch to open a new lane.</p>
+          <p>Files, editor, terminal, and the commit graph are containers on a ring. Everything a builder needs, one swipe away.</p>
         </div>
         <div class="feature-cards">
           <article class="fcard reveal">
@@ -324,6 +373,6 @@ <h2>Build on a phone that can build.</h2>
     </div>
   </footer>
 
-  <script src="main.js?v=2"></script>
+  <script src="main.js?v=3"></script>
 </body>
 </html>
diff --git a/website/lighthouserc.json b/website/lighthouserc.json
@@ -0,0 +1,24 @@
+{
+  "ci": {
+    "collect": {
+      "startServerCommand": "npx --yes http-server ./website -p 8099 -c-1",
+      "startServerReadyPattern": "Available on",
+      "url": ["http://localhost:8099/index.html"],
+      "numberOfRuns": 3,
+      "settings": {
+        "chromeFlags": "--no-sandbox --disable-dev-shm-usage"
+      }
+    },
+    "assert": {
+      "assertions": {
+        "categories:performance": ["error", { "minScore": 0.85 }],
+        "categories:accessibility": ["error", { "minScore": 1 }],
+        "categories:best-practices": ["error", { "minScore": 1 }],
+        "categories:seo": ["error", { "minScore": 1 }]
+      }
+    },
+    "upload": {
+      "target": "temporary-public-storage"
+    }
+  }
+}
diff --git a/website/main.js b/website/main.js
@@ -34,8 +34,19 @@
     reveals.forEach(show);
   }
 
-  // Pause dither iframe work when hero leaves the viewport
+  // Defer the heavy dither iframe until the page has loaded and gone idle, so
+  // its canvas simulation never blocks first paint or inflates blocking time.
   const frame = document.querySelector('.hero-viz');
+  if (frame && frame.dataset.src) {
+    const load = () => { if (!frame.src) frame.src = frame.dataset.src; };
+    const idle = () => ('requestIdleCallback' in window)
+      ? requestIdleCallback(load, { timeout: 1500 })
+      : setTimeout(load, 200);
+    if (document.readyState === 'complete') idle();
+    else window.addEventListener('load', idle, { once: true });
+  }
+
+  // Pause dither iframe work when the hero leaves the viewport.
   if (frame && 'IntersectionObserver' in window) {
     const freeze = new IntersectionObserver(([e]) => {
       try {

diff --git a/website/robots.txt b/website/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://reagent-systems.github.io/mouse/sitemap.xml
diff --git a/website/sitemap.xml b/website/sitemap.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://reagent-systems.github.io/mouse/</loc>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+</urlset>
diff --git a/website/styles.css b/website/styles.css
@@ -1,5 +1,11 @@
 /* Mouse marketing site — dark, terminal honesty, monochrome, IBM Plex Mono */
 
+/* Self-hosted so the font never render-blocks on a third-party request. */
+@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
+@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
+@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }
+@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2"); }
+
 :root {
   --bg: #060608;
   --bg-2: #0b0b0f;