Skip to content

docs: tighten the SEO tags, name the head term, and add breadcrumbs and crawl links #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
simien merged 1 commit into from
Sep 13, 2026
Merged

docs: tighten the SEO tags, name the head term, and add breadcrumbs and crawl links #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 26 additions & 6 deletions animated-backgrounds/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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" />

Expand All @@ -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" },
Expand All @@ -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
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down
24 changes: 22 additions & 2 deletions flow-fields/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>

Expand Down Expand Up @@ -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>

Expand Down
3 changes: 2 additions & 1 deletion guide/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down
13 changes: 13 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
32 changes: 26 additions & 6 deletions seamless-backgrounds/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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" />
Expand All @@ -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/",
Expand All @@ -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>
Expand All @@ -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>

Expand Down Expand Up @@ -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>

Expand Down
Loading