From 9dfaeba95c04021db15349277a905203498b2aa2 Mon Sep 17 00:00:00 2001
From: simien <simienap@gmail.com>
Date: Sun, 13 Sep 2026 17:55:15 -0400
Subject: [PATCH] docs: tighten the SEO tags, name the head term, and add
 breadcrumbs and crawl links

A pass over the four document pages against the app and against what a
search result shows.

The seamless page's title was 72 characters and the animated page's
description 180; results cut around 60 and 155, so both lost their
endings. Shortened, on every copy of each.

"Background generator" is the head term in the app's title and appeared
on none of the explainers. Each now names Flield as a seamless
background generator once, in the sentence that introduces it, and its
try-it line says it is free with no signup.

The guide carried a BreadcrumbList and the explainers did not. Each has
one now. The app's footer only ever linked the guide, which left the
explainers two clicks from the home page; a crawlable line under the
existing hidden description links all three, out of the tab order.

The guide's heading was "Using Flield" under a title that carried the
keywords; the heading carries them now. It also says that width and
height stop at 8192, which the app has done since 509a42f, and the size
fields snap to that cap on change rather than showing a number the
canvas is not.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 animated-backgrounds/index.html | 32 ++++++++++++++++++++++++++------
 flow-fields/index.html          | 24 ++++++++++++++++++++++--
 guide/index.html                |  3 ++-
 index.html                      | 13 +++++++++++++
 seamless-backgrounds/index.html | 32 ++++++++++++++++++++++++++------
 5 files changed, 89 insertions(+), 15 deletions(-)

diff --git a/animated-backgrounds/index.html b/animated-backgrounds/index.html
index 5753943..81f9445 100644
--- a/animated-backgrounds/index.html
+++ b/animated-backgrounds/index.html
@@ -16,7 +16,7 @@
     }
   </script>
   <title>How to make a looping animated background for a website</title>
-  <meta name="description" content="When a seamless loop is worth the trouble and when it is not, four kinds of motion that return to their first frame with no cut, and which file format to use for a hero background." />
+  <meta name="description" content="Four kinds of motion that return to their first frame with no cut, when a seamless loop is worth it, and which file format a hero background wants." />
   <link rel="canonical" href="https://flield.com/animated-backgrounds/" />
   <link rel="icon" type="image/svg+xml" href="../favicon.svg" />
   <link rel="apple-touch-icon" sizes="192x192" href="../icon-192.png" />
@@ -26,14 +26,14 @@
   <meta property="og:url" content="https://flield.com/animated-backgrounds/" />
   <meta property="og:site_name" content="Flield" />
   <meta property="og:title" content="How to make a looping animated background for a website" />
-  <meta property="og:description" content="When a seamless loop is worth the trouble and when it is not, four kinds of motion that return to their first frame with no cut, and which file format to use for a hero background." />
+  <meta property="og:description" content="Four kinds of motion that return to their first frame with no cut, when a seamless loop is worth it, and which file format a hero background wants." />
   <meta property="og:image" content="https://flield.com/screenshot.png?v=7" />
   <meta property="og:image:width" content="1200" />
   <meta property="og:image:height" content="900" />
   <meta property="og:image:alt" content="A generated three-color composition in Flield" />
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:title" content="How to make a looping animated background for a website" />
-  <meta name="twitter:description" content="When a seamless loop is worth the trouble and when it is not, four kinds of motion that return to their first frame with no cut, and which file format to use for a hero background." />
+  <meta name="twitter:description" content="Four kinds of motion that return to their first frame with no cut, when a seamless loop is worth it, and which file format a hero background wants." />
   <meta name="twitter:image" content="https://flield.com/screenshot.png?v=7" />
   <meta name="theme-color" content="#09090b" />
 
@@ -46,7 +46,7 @@
     "@type": "TechArticle",
     "@id": "https://flield.com/animated-backgrounds/#article",
     "headline": "How to make a looping animated background for a website",
-    "description": "When a seamless loop is worth the trouble and when it is not, four kinds of motion that return to their first frame with no cut, and which file format to use for a hero background.",
+    "description": "Four kinds of motion that return to their first frame with no cut, when a seamless loop is worth it, and which file format a hero background wants.",
     "url": "https://flield.com/animated-backgrounds/",
     "mainEntityOfPage": "https://flield.com/animated-backgrounds/",
     "about": { "@id": "https://flield.com/#app" },
@@ -65,6 +65,26 @@
   }
   </script>
 
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    "itemListElement": [
+      {
+        "@type": "ListItem",
+        "position": 1,
+        "name": "Flield",
+        "item": "https://flield.com/"
+      },
+      {
+        "@type": "ListItem",
+        "position": 2,
+        "name": "Animated backgrounds",
+        "item": "https://flield.com/animated-backgrounds/"
+      }
+    ]
+  }
+  </script>
   <link rel="stylesheet" href="../guide.css?v=4" />
   <style>
     /* The four motions sit in a 2x2 rather than the shared .demo-canvases
@@ -105,7 +125,7 @@ <h2 id="definition">The short definition</h2>
 
     <p>The second kind cannot have a seam, because the last frame is not merely close to the first. It is computed from the same inputs.</p>
 
-    <p>This page is about the second route, shown with <a href="../">Flield</a>, a generator that runs in the browser. Every panel below is drawn live by the same code the app uses. Where a name is Flield's own rather than the general term, it says so.</p>
+    <p>This page is about the second route, shown with <a href="../">Flield</a>, a seamless background generator that runs in the browser. Every panel below is drawn live by the same code the app uses. Where a name is Flield's own rather than the general term, it says so.</p>
 
     <h2 id="whether">When a loop is worth it</h2>
 
@@ -238,7 +258,7 @@ <h2 id="roadmap">On adding MP4</h2>
 
     <h2 id="try">Try it</h2>
 
-    <p><a href="../">Open Flield</a> and pick a Motion in the General tab. It plays on the canvas straight away. That is exactly what an export records. The Speed slider under it sets how long a cycle runs.</p>
+    <p><a href="../">Open Flield</a>, free with no signup, and pick a Motion in the General tab. It plays on the canvas straight away. That is exactly what an export records. The Speed slider under it sets how long a cycle runs.</p>
 
     <p>For the rest: the <a href="../guide/">guide</a> covers the export controls. <a href="../flow-fields/">The flow field explainer</a> covers the six textures moving underneath. <a href="../seamless-backgrounds/">The tiling page</a> covers making it repeat.</p>
 
diff --git a/flow-fields/index.html b/flow-fields/index.html
index c027fb0..bc375ed 100644
--- a/flow-fields/index.html
+++ b/flow-fields/index.html
@@ -65,6 +65,26 @@
   }
   </script>
 
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    "itemListElement": [
+      {
+        "@type": "ListItem",
+        "position": 1,
+        "name": "Flield",
+        "item": "https://flield.com/"
+      },
+      {
+        "@type": "ListItem",
+        "position": 2,
+        "name": "Flow fields",
+        "item": "https://flield.com/flow-fields/"
+      }
+    ]
+  }
+  </script>
   <link rel="stylesheet" href="../guide.css?v=4" />
 </head>
 <body>
@@ -90,7 +110,7 @@ <h2 id="definition">The short definition</h2>
 
     <p>What you do with the field is a separate choice. Most generative art releases particles onto it and draws their trails. You can also read the numbers as brightness, as a height, as a nudge on some other decision. The field is just the numbers. The picture is what you make of them.</p>
 
-    <p>The rest of this page shows that idea working, using <a href="../">Flield</a>, a generator that runs in the browser. Every panel below is drawn live by the same code the app uses. Where a name is Flield's own rather than the general term, it says so.</p>
+    <p>The rest of this page shows that idea working, using <a href="../">Flield</a>, a seamless background generator that runs in the browser. Every panel below is drawn live by the same code the app uses. Where a name is Flield's own rather than the general term, it says so.</p>
 
     <h2 id="static">Static, and then not</h2>
 
@@ -254,7 +274,7 @@ <h2 id="try">Try it</h2>
 
     <p>Some of them change name as you switch, because the job changes. On Streamlines and Weave, strength becomes Curl, stretch becomes Trail length and the smoothing passes become Strand weight. On Contours, strength becomes Levels, because what it buys there is a count of lines.</p>
 
-    <p><a href="../">Open Flield</a> and drag them, or read the <a href="../guide/">guide</a> for the rest of the tool.</p>
+    <p><a href="../">Open Flield</a>, free with no signup, and drag them, or read the <a href="../guide/">guide</a> for the rest of the tool.</p>
 
     <p>Two pages take the field further. <a href="../animated-backgrounds/">Looping animated backgrounds</a> sets it moving and closes the loop with no cut. <a href="../seamless-backgrounds/">Seamless tiling backgrounds</a> mirrors it into a tile that repeats with no seam.</p>
 
diff --git a/guide/index.html b/guide/index.html
index 57aadf7..8af0374 100644
--- a/guide/index.html
+++ b/guide/index.html
@@ -134,7 +134,7 @@
   </header>
 
   <main class="wrap">
-    <h1>Using Flield</h1>
+    <h1>Using Flield: looping motion, tiling, and locks</h1>
     <p class="lede">Flield builds three-color compositions from seeded flow fields and symmetry. Pressing <span class="ui-ref"><svg class="ui-ref-icon" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M240.49,175.51a12,12,0,0,1,0,17l-24,24a12,12,0,0,1-17-17L203,196h-2.09a76.17,76.17,0,0,1-61.85-31.83L97.38,105.78A52.1,52.1,0,0,0,55.06,84H32a12,12,0,0,1,0-24H55.06a76.17,76.17,0,0,1,61.85,31.83l41.71,58.39A52.1,52.1,0,0,0,200.94,172H203l-3.52-3.51a12,12,0,0,1,17-17Zm-95.62-72.62a12,12,0,0,0,16.93-1.13A52,52,0,0,1,200.94,84H203l-3.52,3.51a12,12,0,0,0,17,17l24-24a12,12,0,0,0,0-17l-24-24a12,12,0,0,0-17,17L203,60h-2.09a76,76,0,0,0-57.2,26A12,12,0,0,0,144.87,102.89Zm-33.74,50.22a12,12,0,0,0-16.93,1.13A52,52,0,0,1,55.06,172H32a12,12,0,0,0,0,24H55.06a76,76,0,0,0,57.2-26A12,12,0,0,0,111.13,153.11Z"/></svg>Random</span> shows you what it does. Everything below is about steering it toward something you meant.</p>
 
     <!-- Eager, with its intrinsic size declared, since it sits above the
@@ -230,6 +230,7 @@ <h3>Speed and interval</h3>
     <h3>Sliders</h3>
     <p>The click and drag target reaches well past the thin line you see, so grabbing a slider doesn't take a precise hit.</p>
     <p><strong>Flow scale</strong> is measured in canvas pixels, so a setting reads the same at any block size. <strong>Field strength</strong> puts clear banding around the middle of its range. A link or saved slot from before that change loads with its strength halved, so it renders exactly as it did.</p>
+    <p>Width and height stop at 8192 pixels a side. A larger number is brought back to that. Past it a render takes tens of seconds, and the browser will not draw the canvas anyway.</p>
 
     <h3>Scrolling</h3>
     <p>A tab's content can run longer than the sidebar is tall. A soft fade shows up at whichever edge still has more to see, top, bottom or both. It clears once you have scrolled all the way to that edge.</p>
diff --git a/index.html b/index.html
index 6f97df5..9ac8c66 100644
--- a/index.html
+++ b/index.html
@@ -847,6 +847,12 @@ <h2 class="section-title export-title">Export &amp; share</h2>
 
   <div class="main-area">
     <p class="sr-only">Flield is a free, browser-based generator for seamless animated backgrounds. It creates three-color pixel art compositions from seeded flow fields and symmetry, drawing each field one of six ways, from density-biased streaks to topographic contours to streamlines traced by particles running along it, sets them moving with Loop, Drift, Wind, or Pulse so a cycle returns to its first frame with no cut, and exports to animated GIF, SVG, or PNG. Locks hold the fields you like while the rest randomize. Runs entirely in the browser, no account or upload needed.</p>
+    <!-- The three explainers were two clicks from here, through the
+         guide's footer, which is one more than a crawler gives a page
+         it has not decided about yet. Out of the tab order, since a
+         keyboard user should not land on something they cannot see;
+         a screen reader still finds them in browse mode. -->
+    <p class="sr-only">Read more: <a href="./flow-fields/" tabindex="-1">what is a flow field</a>, <a href="./seamless-backgrounds/" tabindex="-1">how to make a seamless tiling background</a>, and <a href="./animated-backgrounds/" tabindex="-1">how to make a looping animated background</a>.</p>
     <div class="toast" id="toast" role="status" aria-live="polite"></div>
     <!-- First-visit nudge toward the tutorial. A modal used to open on
          its own here, on top of the freshly randomized canvas that is
@@ -1895,6 +1901,13 @@ <h1 class="brand"><a href="./">Flield<span class="sr-only">: seamless animated b
     }
 
     document.querySelector(".controls").addEventListener("input", scheduleRender);
+    // A typed size past the cap already renders at the cap (readOptions
+    // clamps it); snapping the field on change keeps it from saying
+    // 10000 over a canvas that is 8192.
+    ["width", "height"].forEach((id) => {
+      const el = document.getElementById(id);
+      el.addEventListener("change", () => { el.value = clampSide(el.value); });
+    });
 
     // Live preview of a motion: choosing anything but None in the
     // Motion field plays it on the canvas at the Speed slider's pace, so
diff --git a/seamless-backgrounds/index.html b/seamless-backgrounds/index.html
index 655b877..0ae02b6 100644
--- a/seamless-backgrounds/index.html
+++ b/seamless-backgrounds/index.html
@@ -15,7 +15,7 @@
       // localStorage can be unavailable (private browsing, blocked); dark stays the default.
     }
   </script>
-  <title>How to make a seamless tiling background, without an image to start from</title>
+  <title>How to make a seamless tiling background without an image</title>
   <meta name="description" content="Why the edges of a tile have to match, why mirroring guarantees they do, what breaks it, and how to generate a tileable background in your own colors." />
   <link rel="canonical" href="https://flield.com/seamless-backgrounds/" />
   <link rel="icon" type="image/svg+xml" href="../favicon.svg" />
@@ -25,14 +25,14 @@
   <meta property="og:locale" content="en_US" />
   <meta property="og:url" content="https://flield.com/seamless-backgrounds/" />
   <meta property="og:site_name" content="Flield" />
-  <meta property="og:title" content="How to make a seamless tiling background, without an image to start from" />
+  <meta property="og:title" content="How to make a seamless tiling background without an image" />
   <meta property="og:description" content="Why the edges of a tile have to match, why mirroring guarantees they do, what breaks it, and how to generate a tileable background in your own colors." />
   <meta property="og:image" content="https://flield.com/screenshot.png?v=7" />
   <meta property="og:image:width" content="1200" />
   <meta property="og:image:height" content="900" />
   <meta property="og:image:alt" content="A generated three-color composition in Flield" />
   <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:title" content="How to make a seamless tiling background, without an image to start from" />
+  <meta name="twitter:title" content="How to make a seamless tiling background without an image" />
   <meta name="twitter:description" content="Why the edges of a tile have to match, why mirroring guarantees they do, what breaks it, and how to generate a tileable background in your own colors." />
   <meta name="twitter:image" content="https://flield.com/screenshot.png?v=7" />
   <meta name="theme-color" content="#09090b" />
@@ -45,7 +45,7 @@
     "@context": "https://schema.org",
     "@type": "TechArticle",
     "@id": "https://flield.com/seamless-backgrounds/#article",
-    "headline": "How to make a seamless tiling background, without an image to start from",
+    "headline": "How to make a seamless tiling background without an image",
     "description": "Why the edges of a tile have to match, why mirroring guarantees they do, what breaks it, and how to generate a tileable background in your own colors.",
     "url": "https://flield.com/seamless-backgrounds/",
     "mainEntityOfPage": "https://flield.com/seamless-backgrounds/",
@@ -65,6 +65,26 @@
   }
   </script>
 
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    "itemListElement": [
+      {
+        "@type": "ListItem",
+        "position": 1,
+        "name": "Flield",
+        "item": "https://flield.com/"
+      },
+      {
+        "@type": "ListItem",
+        "position": 2,
+        "name": "Seamless backgrounds",
+        "item": "https://flield.com/seamless-backgrounds/"
+      }
+    ]
+  }
+  </script>
   <link rel="stylesheet" href="../guide.css?v=4" />
 </head>
 <body>
@@ -90,7 +110,7 @@ <h2 id="definition">The short definition</h2>
 
     <p>There are two ways out. You can take an image you already have and edit its edges until they agree, which is what offset-and-clone does in an image editor. Or you can generate the image so its edges agree from the start, and never have an edge to fix.</p>
 
-    <p>This page is about the second route, shown with <a href="../">Flield</a>, a generator that runs in the browser. Both panels below are drawn live by the same code the app uses. Where a name is Flield's own rather than the general term, it says so.</p>
+    <p>This page is about the second route, shown with <a href="../">Flield</a>, a seamless background generator that runs in the browser. Both panels below are drawn live by the same code the app uses. Where a name is Flield's own rather than the general term, it says so.</p>
 
     <h2 id="proof">The seam, and its absence</h2>
 
@@ -180,7 +200,7 @@ <h2 id="use">Using the result</h2>
 
     <h2 id="try">Try it</h2>
 
-    <p><a href="../">Open Flield</a> and press <span class="ui-ref">Tile</span> under the canvas dimensions. Then press Random until something fits. The <a href="../guide/">guide</a> covers the rest of the controls. <a href="../flow-fields/">The flow field explainer</a> covers what shapes the texture underneath.</p>
+    <p><a href="../">Open Flield</a>, free with no signup, and press <span class="ui-ref">Tile</span> under the canvas dimensions. Then press Random until something fits. The <a href="../guide/">guide</a> covers the rest of the controls. <a href="../flow-fields/">The flow field explainer</a> covers what shapes the texture underneath.</p>
 
     <p class="meta">Flield is free for noncommercial use under the <a href="https://github.com/simien/Flield/blob/main/LICENSE.md" target="_blank" rel="noopener">PolyForm Noncommercial License</a>.</p>