From a2d8e2e8069bcb66c729be16261b409dddf511de Mon Sep 17 00:00:00 2001
From: Pablo Stanley <pablostanley1@gmail.com>
Date: Sun, 17 May 2026 17:04:22 -0700
Subject: [PATCH] =?UTF-8?q?Add=20Gumroad=20free=20pack=20=E2=80=94=20site?=
 =?UTF-8?q?=20nav=20dialog=20+=20generator=20scripts=20+=20campaign=20HTML?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three things in one branch:

1. **Site nav "pack" entry → in-app dialog.** Tapping "pack" in the header
   (desktop nav or mobile menu) opens a `PackDialog` modal that previews
   the free pack and links out to pablostanley.gumroad.com/l/pixabots —
   keeps people on the site for the pitch instead of bouncing them to
   Gumroad cold. Dialog is mounted once in the root layout and triggered
   via a tiny custom-event-based `openPackDialog()` helper so there's no
   prop drilling.

2. **Pack generator scripts (`scripts/`).** Idempotent, seeded,
   reproducible:
   - `generate-gumroad-pack.mjs`     2,000 PNGs × 4 sizes + 2,000 GIFs @ 480
   - `generate-pack-webp.mjs`        2,000 animated WebPs @ 480
   - `generate-gumroad-campaign.mjs` 6 animated 16:9 banners + animated
     square thumbnail + 5 social-size variants
   All output lands in the gitignored `pixabots-gumroad/` tree.

3. **Campaign HTML (`pixabots-gumroad/campaign/`).** Master dashboard
   (`index.html`) with click-to-copy buttons for titles, tags, captions,
   four format-variant Name/Description pairs, and Additional Details
   key/value pairs. Plus `gumroad-body.html` (Gumroad product description
   in pasteable HTML) and `email.html` (subscriber blast with hero
   image, four subject-line options, direct product URL).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .gitignore                                  |   7 +
 ROADMAP.md                                  |   3 +-
 app/src/app/layout.tsx                      |   2 +
 app/src/components/header-menu.tsx          |  38 ++-
 app/src/components/pack-dialog.tsx          |  93 ++++++
 app/src/components/site-header.tsx          |   8 +
 pixabots-gumroad/campaign/email.html        |  71 +++++
 pixabots-gumroad/campaign/gumroad-body.html |  52 +++
 pixabots-gumroad/campaign/index.html        | 310 ++++++++++++++++++
 scripts/generate-gumroad-campaign.mjs       | 314 ++++++++++++++++++
 scripts/generate-gumroad-pack.mjs           | 333 ++++++++++++++++++++
 scripts/generate-pack-webp.mjs              | 192 +++++++++++
 12 files changed, 1413 insertions(+), 10 deletions(-)
 create mode 100644 app/src/components/pack-dialog.tsx
 create mode 100644 pixabots-gumroad/campaign/email.html
 create mode 100644 pixabots-gumroad/campaign/gumroad-body.html
 create mode 100644 pixabots-gumroad/campaign/index.html
 create mode 100644 scripts/generate-gumroad-campaign.mjs
 create mode 100644 scripts/generate-gumroad-pack.mjs
 create mode 100644 scripts/generate-pack-webp.mjs

diff --git a/.gitignore b/.gitignore
index 5e1f2bc..a79a68e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,3 +16,10 @@ pnpm-debug.log*
 *.psd
 .source
 .claude/
+
+# Gumroad pack — large binaries, regen via scripts/generate-gumroad-*.mjs
+/pixabots-gumroad/pixabots-pack/
+/pixabots-gumroad/upload/zips/
+/pixabots-gumroad/upload/gallery/
+/pixabots-gumroad/upload/thumbnail.gif
+/pixabots-gumroad/campaign/social/
diff --git a/ROADMAP.md b/ROADMAP.md
index 2a01765..09e470a 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -167,7 +167,8 @@ When reviewing code, use the Before/After markdown table format from the skill.
 - [x] **Cache header revalidation.** `Cache-Control: immutable` was wrong once PR #156 made same-ID sprite art mutable. Swapped for 1-day fresh + 7-day stale-while-revalidate — art updates propagate within ~1 day without a manual dashboard purge. Manual purge still works for urgent rollout. (PR #166, #168, #169)
 - [x] **Animated `cheeky-terminal` (16-frame sequence) + `terminal-round` + `glasses` (blink).** Upgraded three previously-static eye parts to animated. `cheeky-terminal` is the first 16-frame sequence (fills one full super-loop). `ANIM_VERSION` 1→2 to bust CDN caches. Parts.ts docstring updated to include N=16 as valid sequence length.
 - [x] **Client PNG download baked full sprite sheet.** Creator `download()` used 5-arg `drawImage(img, 0, 0, size, size)` which stretched whole sheet — animated faces showed both blink frames side-by-side. Switched to 9-arg form with source rect `(0, 0, NATIVE, NATIVE)` so only frame 0 is sampled. Works for every layer (eyes/heads/body/top), every kind (static/blink/sequence). (PR #175)
-- [x] **Perf — lazy-load Inspector + CommandPalette, swap `setInterval` for `requestAnimationFrame`.** Inspector pulled `react-colorful` (~16KB chunk) into main bundle even though only used when FX panel opens — now `next/dynamic`. CommandPalette was mounted in root layout for every page — also dynamic. Creator animation loop ran `setInterval(FRAME_MS)` regardless of tab visibility (battery drain on hidden tabs); swapped for rAF with FRAME_MS throttle. Build chunks now show Inspector + react-colorful as a separate split.
+- [x] **Perf — lazy-load Inspector + CommandPalette, swap `setInterval` for `requestAnimationFrame`.** Inspector pulled `react-colorful` (~16KB chunk) into main bundle even though only used when FX panel opens — now `next/dynamic`. CommandPalette was mounted in root layout for every page — also dynamic. Creator animation loop ran `setInterval(FRAME_MS)` regardless of tab visibility (battery drain on hidden tabs); swapped for rAF with FRAME_MS throttle. Build chunks now show Inspector + react-colorful as a separate split. (PR #176)
+- [x] **Gumroad free pack launch.** Shipped a 2,000-pixabot Gumroad pack ([pablostanley.gumroad.com/l/pixabots](https://pablostanley.gumroad.com/l/pixabots)) — 4 zip variants (all formats / PNG / GIF / WebP). New scripts in `scripts/` regenerate the pack + 6 animated 16:9 banner GIFs + 5 social-size variants + animated square thumbnail. Campaign HTML dashboard at `pixabots-gumroad/campaign/index.html` with click-to-copy titles, captions, tags, and variant Name/Description pairs. Site nav gets a new "pack" entry — opens an in-app `PackDialog` modal (hero image + CTA to Gumroad) rather than navigating away.
 
 ## Improve GIFs / Animated API
 
diff --git a/app/src/app/layout.tsx b/app/src/app/layout.tsx
index 06a9282..32f101e 100644
--- a/app/src/app/layout.tsx
+++ b/app/src/app/layout.tsx
@@ -11,6 +11,7 @@ import { SITE_URL, TOTAL_COMBOS_LABEL } from "@/lib/constants";
 import "./globals.css";
 
 const CommandPalette = dynamic(() => import("@/components/command-palette").then((m) => m.CommandPalette));
+const PackDialog = dynamic(() => import("@/components/pack-dialog").then((m) => m.PackDialog));
 
 const pixelify = Pixelify_Sans({
   subsets: ["latin"],
@@ -105,6 +106,7 @@ export default function RootLayout({
           <SiteFooter />
           <ShortcutsOverlay />
           <CommandPalette />
+          <PackDialog />
         </RootProvider>
         <Analytics />
         <SpeedInsights />
diff --git a/app/src/components/header-menu.tsx b/app/src/components/header-menu.tsx
index f26e8d9..4f0b401 100644
--- a/app/src/components/header-menu.tsx
+++ b/app/src/components/header-menu.tsx
@@ -11,16 +11,21 @@ import {
 import { PixelIcon } from "@/components/ui/pixel-icon";
 import { useSfx } from "@/lib/use-sfx";
 import { useTheme } from "@/lib/use-theme";
+import { openPackDialog } from "@/components/pack-dialog";
 
-type Item = { href: string; label: string; external?: boolean };
+type Item =
+  | { kind: "internal"; href: string; label: string }
+  | { kind: "external"; href: string; label: string }
+  | { kind: "pack"; label: string };
 
 const ITEMS: readonly Item[] = [
-  { href: "/", label: "Create" },
-  { href: "/browse", label: "Browse" },
-  { href: "/favorites", label: "Stars" },
-  { href: "/docs", label: "Docs" },
-  { href: "/docs/api", label: "API" },
-  { href: "https://github.com/pablostanley/pixabots", label: "GitHub", external: true },
+  { kind: "internal", href: "/", label: "Create" },
+  { kind: "internal", href: "/browse", label: "Browse" },
+  { kind: "internal", href: "/favorites", label: "Stars" },
+  { kind: "internal", href: "/docs", label: "Docs" },
+  { kind: "internal", href: "/docs/api", label: "API" },
+  { kind: "pack", label: "Pack" },
+  { kind: "external", href: "https://github.com/pablostanley/pixabots", label: "GitHub" },
 ];
 
 /**
@@ -49,13 +54,28 @@ export function HeaderMenu() {
         <DialogTitle className="text-sm uppercase tracking-wide text-muted-foreground">Menu</DialogTitle>
         <nav className="flex flex-col mt-3">
           {ITEMS.map((item) => {
-            const active = !item.external && pathname === item.href;
+            const active = item.kind === "internal" && pathname === item.href;
             const base =
               "flex items-center py-3 px-2 border-b border-border text-base transition-colors";
             const color = active
               ? "text-foreground font-medium"
               : "text-muted-foreground hover:text-foreground";
-            if (item.external) {
+            if (item.kind === "pack") {
+              return (
+                <button
+                  key="pack"
+                  type="button"
+                  className={`${base} ${color} text-left cursor-pointer`}
+                  onClick={() => {
+                    setOpen(false);
+                    openPackDialog();
+                  }}
+                >
+                  {item.label}
+                </button>
+              );
+            }
+            if (item.kind === "external") {
               return (
                 <a
                   key={item.href}
diff --git a/app/src/components/pack-dialog.tsx b/app/src/components/pack-dialog.tsx
new file mode 100644
index 0000000..f0dcea2
--- /dev/null
+++ b/app/src/components/pack-dialog.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+
+const EVENT = "open-pack-dialog";
+
+export function openPackDialog() {
+  window.dispatchEvent(new Event(EVENT));
+}
+
+/**
+ * Mounted once in the root layout. Any header button dispatches the
+ * `open-pack-dialog` event via `openPackDialog()` and the modal opens
+ * in place — no prop drilling, no global store.
+ */
+export function PackDialog() {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    const handler = () => setOpen(true);
+    window.addEventListener(EVENT, handler);
+    return () => window.removeEventListener(EVENT, handler);
+  }, []);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogTitle className="text-base uppercase tracking-wide text-muted-foreground">
+          Free pack
+        </DialogTitle>
+        <DialogDescription className="sr-only">
+          2,000 pixel characters as PNG, GIF, and WebP.
+        </DialogDescription>
+
+        <div className="mt-2 flex flex-col gap-4">
+          <a
+            href="https://pablostanley.gumroad.com/l/pixabots"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="block overflow-hidden border border-border bg-muted"
+          >
+            <img
+              src="https://public-files.gumroad.com/gxs3g6uqux6013yvj6qs7v37jie3"
+              alt="Pixabots free pack"
+              className="block w-full h-auto"
+              style={{ imageRendering: "pixelated" }}
+            />
+          </a>
+
+          <div className="text-sm leading-relaxed text-foreground">
+            <p className="text-lg font-semibold mb-2">2,000 pixel characters. Free.</p>
+            <p className="text-muted-foreground">
+              A pack of 2,000 curated pixabots ready to drop into anything &mdash; PNGs at
+              four sizes (240/480/960/1920), animated GIFs, and animated WebPs.
+              Personal and commercial use.
+            </p>
+          </div>
+
+          <ul className="text-sm text-muted-foreground flex flex-col gap-1">
+            <li>2,000 unique characters</li>
+            <li>12,000 files total</li>
+            <li>PNG · GIF · WebP</li>
+            <li>Free for personal + commercial use</li>
+          </ul>
+
+          <div className="flex flex-col sm:flex-row gap-2 mt-2">
+            <a
+              href="https://pablostanley.gumroad.com/l/pixabots"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex-1 inline-flex items-center justify-center h-11 px-4 bg-foreground text-background font-medium hover:opacity-90 transition-opacity"
+            >
+              Get the pack on Gumroad &rarr;
+            </a>
+            <button
+              type="button"
+              onClick={() => setOpen(false)}
+              className="sm:flex-none inline-flex items-center justify-center h-11 px-4 border border-border hover:bg-muted transition-colors cursor-pointer text-sm"
+            >
+              Maybe later
+            </button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/app/src/components/site-header.tsx b/app/src/components/site-header.tsx
index b4f862a..c104b3c 100644
--- a/app/src/components/site-header.tsx
+++ b/app/src/components/site-header.tsx
@@ -6,6 +6,7 @@ import { usePathname } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { PixelIcon } from "@/components/ui/pixel-icon";
 import { HeaderMenu } from "@/components/header-menu";
+import { openPackDialog } from "@/components/pack-dialog";
 import { hasModifier, isTypingTarget, useKeydown } from "@/lib/use-keydown";
 import { useScrollDirection } from "@/lib/use-scroll-direction";
 import { useTheme } from "@/lib/use-theme";
@@ -77,6 +78,13 @@ export function SiteHeader() {
         {navLink("/favorites", "stars")}
         {navLink("/docs", "docs")}
         {navLink("/docs/api", "api")}
+        <button
+          type="button"
+          onClick={() => openPackDialog()}
+          className="text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+        >
+          pack
+        </button>
         <a href="https://github.com/pablostanley/pixabots" target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-foreground transition-colors">
           github
         </a>
diff --git a/pixabots-gumroad/campaign/email.html b/pixabots-gumroad/campaign/email.html
new file mode 100644
index 0000000..34102c4
--- /dev/null
+++ b/pixabots-gumroad/campaign/email.html
@@ -0,0 +1,71 @@
+<!-- Subscriber email. Gumroad email composer accepts HTML; you can also
+     copy the rendered text into any other tool (Mailchimp, Beehiiv, etc.). -->
+
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Pixabots Free Pack — 2,000 little pixel characters</title>
+</head>
+<body style="font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; line-height: 1.55; max-width: 560px; margin: 0 auto; padding: 32px 20px; color: #1a1a1a;">
+
+  <p><strong>Subject line options (pick one):</strong></p>
+  <ul style="color:#666; font-size:13px;">
+    <li>2,000 free pixel characters — just dropped</li>
+    <li>I made you 2,000 little pixel friends</li>
+    <li>Free: 2,000 pixel avatars (PNG + GIF + WebP)</li>
+    <li>Pixabots Free Pack is live</li>
+  </ul>
+
+  <hr style="border:none; border-top:1px solid #eee; margin: 28px 0;">
+
+  <p style="text-align:center; margin: 0 0 28px;">
+    <a href="https://pablostanley.gumroad.com/l/pixabots">
+      <img src="https://public-files.gumroad.com/gxs3g6uqux6013yvj6qs7v37jie3" alt="Pixabots — 2,000 pixel characters" style="max-width:100%; height:auto; border-radius:8px; display:block; margin:0 auto;">
+    </a>
+  </p>
+
+  <p>Hey &mdash;</p>
+
+  <p>Short one: I just dropped a free pack of <strong>2,000 unique pixel characters</strong>. PNGs in four sizes. Animated GIFs. Animated WebPs. 12,000 files in total. Yours, no strings.</p>
+
+  <p style="text-align:center; margin: 28px 0;">
+    <a href="https://pablostanley.gumroad.com/l/pixabots" style="display:inline-block; background:#1a1a1a; color:#fff; text-decoration:none; padding:14px 22px; border-radius:6px; font-weight:600;">Grab the free pack &rarr;</a>
+  </p>
+
+  <p>They&rsquo;re from <a href="https://pixabots.com">Pixabots</a>, my little pixel character generator. It can spin up 10,752 unique combos &mdash; this pack is 2,000 of them, ready to drop into anything.</p>
+
+  <p style="text-align:center; margin: 28px 0;">
+    <img src="https://public-files.gumroad.com/0jbdothyr662nyhojdmrcrhn8dn8" alt="Pixabots grid" style="max-width:100%; height:auto; border-radius:8px; display:block; margin:0 auto;">
+  </p>
+
+  <p><strong>Some ideas:</strong></p>
+
+  <ul>
+    <li>Default avatars for your SaaS / app</li>
+    <li>Placeholder characters in mockups</li>
+    <li>NPCs in a game jam</li>
+    <li>Stickers / merch</li>
+    <li>Twitch / YouTube channel art</li>
+  </ul>
+
+  <p>Free for personal <em>and</em> commercial use. Modify, recolor, composite, ship.</p>
+
+  <p>If you want more than 2,000, the full set lives at <a href="https://pixabots.com">pixabots.com</a> with a free API and a live editor. No signup.</p>
+
+  <p>That&rsquo;s it. Go make something.</p>
+
+  <p>&mdash; Pablo</p>
+
+  <hr style="border:none; border-top:1px solid #eee; margin: 28px 0;">
+
+  <p style="font-size:12px; color:#888;">
+    P.S. If you&rsquo;d rather just see the source: <a href="https://github.com/pablostanley/pixabots">github.com/pablostanley/pixabots</a>. MIT licensed, fork away.
+  </p>
+
+  <p style="font-size:12px; color:#888;">
+    Direct link: <a href="https://pablostanley.gumroad.com/l/pixabots">pablostanley.gumroad.com/l/pixabots</a>
+  </p>
+
+</body>
+</html>
diff --git a/pixabots-gumroad/campaign/gumroad-body.html b/pixabots-gumroad/campaign/gumroad-body.html
new file mode 100644
index 0000000..f095e5c
--- /dev/null
+++ b/pixabots-gumroad/campaign/gumroad-body.html
@@ -0,0 +1,52 @@
+<!-- Paste this whole thing into the Gumroad product description editor.
+     Gumroad's editor preserves: <p>, <h2>, <h3>, <ul>, <ol>, <li>,
+     <strong>, <em>, <a>, line breaks. Strip anything else if it complains. -->
+
+<p>I made a tiny pixel character creator called <strong>Pixabots</strong>. It generates 10,752 unique combinations from four categories &mdash; eyes, heads, bodies, and tops &mdash; all bouncing on a little idle loop.</p>
+
+<p>This pack is a curated 2,000 of them, ready to use. Free.</p>
+
+<h2>What's inside</h2>
+
+<ul>
+  <li><strong>2,000 PNGs at 240px</strong> &mdash; chat avatars, UI, favicons</li>
+  <li><strong>2,000 PNGs at 480px</strong> &mdash; cards, hero spots</li>
+  <li><strong>2,000 PNGs at 960px</strong> &mdash; retina, print</li>
+  <li><strong>2,000 PNGs at 1920px</strong> &mdash; full HD, posters</li>
+  <li><strong>2,000 animated GIFs at 480px</strong> &mdash; the signature bounce</li>
+  <li><strong>2,000 animated WebPs at 480px</strong> &mdash; modern format, smaller than GIF</li>
+</ul>
+
+<p>That&rsquo;s 12,000 files. Around 550 MB unzipped.</p>
+
+<p>Every file is named by its 4-character ID (like <code>7k3a.png</code>). Paste any ID into <a href="https://pixabots.com">pixabots.com</a> and you can keep editing it in the browser &mdash; change colors, swap parts, export at any size.</p>
+
+<h2>Use them for</h2>
+
+<ul>
+  <li>Avatars in your SaaS, app, or Slack workspace</li>
+  <li>Placeholder characters in design files</li>
+  <li>Game NPCs, stickers, merch</li>
+  <li>Twitch and YouTube channel art</li>
+  <li>Anything where &ldquo;I need a character and I don&rsquo;t want to draw one&rdquo; is the problem</li>
+</ul>
+
+<h2>License</h2>
+
+<p>Free for <strong>personal and commercial use</strong>. Modify, recolor, composite, redistribute as part of your work. The one thing you can&rsquo;t do is resell the images as a standalone pack &mdash; but if you build something with them, ship it.</p>
+
+<h2>Want more?</h2>
+
+<p>The full set of 10,752 is browsable at <a href="https://pixabots.com">pixabots.com</a> with a live editor, palette controls, animated GIFs, and a free API. No signup. No rate limit on the UI.</p>
+
+<p>There&rsquo;s also an SDK on npm (<code>@pixabots/core</code>, <code>@pixabots/react</code>) and a CLI (<code>npx pixabots</code>).</p>
+
+<p>Everything is open source: <a href="https://github.com/pablostanley/pixabots">github.com/pablostanley/pixabots</a>.</p>
+
+<h2>Why free?</h2>
+
+<p>I make stuff. Sometimes the stuff is useful to other people. This is one of those times.</p>
+
+<p>If you want to send me a few bucks via pay-what-you-want, lovely. If you don&rsquo;t, also lovely &mdash; just go make something cool with them.</p>
+
+<p>&mdash; Pablo</p>
diff --git a/pixabots-gumroad/campaign/index.html b/pixabots-gumroad/campaign/index.html
new file mode 100644
index 0000000..a07f306
--- /dev/null
+++ b/pixabots-gumroad/campaign/index.html
@@ -0,0 +1,310 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Pixabots Free Pack — Campaign Dashboard</title>
+  <style>
+    :root { color-scheme: light dark; }
+    * { box-sizing: border-box; }
+    html, body { margin: 0; padding: 0; background: #f6f4ee; color: #1a1a1a; }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; line-height: 1.55; }
+    @media (prefers-color-scheme: dark) {
+      html, body { background: #14141a; color: #f0eee6; }
+      header { background: #0d0d12; border-color: #2a2a32; }
+      nav a { color: #cfcdc4; }
+      nav a:hover { color: #fff; }
+      .card { background: #1c1c24; border-color: #2a2a32; }
+      .copybox { background: #0d0d12; border-color: #2a2a32; }
+      hr { border-color: #2a2a32; }
+      a { color: #87b7ff; }
+    }
+    header {
+      position: sticky; top: 0; z-index: 50;
+      background: #fffdf6; border-bottom: 1px solid #e7e3d6;
+      padding: 14px 24px;
+    }
+    nav { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 14px; max-width: 880px; margin: 0 auto; }
+    nav strong { margin-right: auto; font-weight: 700; }
+    nav a { color: #444; text-decoration: none; }
+    nav a:hover { color: #000; text-decoration: underline; }
+    main { max-width: 880px; margin: 0 auto; padding: 28px 24px 80px; }
+    h1 { font-size: 32px; margin: 12px 0 6px; }
+    h2 { font-size: 22px; margin: 56px 0 12px; padding-top: 12px; border-top: 1px solid #e7e3d6; }
+    h3 { font-size: 16px; margin: 24px 0 8px; }
+    p { margin: 8px 0 14px; }
+    a { color: #1856c4; }
+    .lede { color: #555; font-size: 16px; max-width: 640px; }
+    .card {
+      background: #fff; border: 1px solid #e7e3d6; border-radius: 10px;
+      padding: 18px 20px; margin: 14px 0;
+    }
+    .grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
+    .thumb { background: #efece2; border: 1px solid #e7e3d6; border-radius: 8px; overflow: hidden; }
+    .thumb img { display: block; width: 100%; height: auto; }
+    .thumb .meta { font-size: 13px; padding: 8px 12px; color: #555; display: flex; justify-content: space-between; }
+    .copybox {
+      background: #faf8f1; border: 1px solid #e7e3d6; border-radius: 8px;
+      padding: 12px 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
+      position: relative;
+    }
+    .copybox button {
+      position: absolute; top: 8px; right: 8px;
+      background: #1a1a1a; color: #fff; border: 0; border-radius: 5px;
+      font-size: 11px; padding: 4px 10px; cursor: pointer;
+    }
+    .copybox button:hover { background: #333; }
+    ul.checks { padding-left: 0; list-style: none; }
+    ul.checks li { padding: 4px 0; }
+    ul.checks li::before { content: "☐"; margin-right: 8px; opacity: 0.6; }
+    .pill {
+      display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 99px;
+      background: #efece2; color: #444; margin-right: 6px;
+    }
+    .pill.tag { cursor: pointer; transition: background 0.15s, color 0.15s; }
+    .pill.tag:hover { background: #1a1a1a; color: #fff; }
+    .pill.tag.copied { background: #2d7a4a; color: #fff; }
+    iframe { width: 100%; min-height: 520px; border: 1px solid #e7e3d6; border-radius: 8px; background: #fff; }
+  </style>
+</head>
+<body>
+
+<header>
+  <nav>
+    <strong>Pixabots — Free Pack Campaign</strong>
+    <a href="#checklist">Checklist</a>
+    <a href="#gumroad">Gumroad</a>
+    <a href="#gallery">Gallery</a>
+    <a href="#thumbnail">Thumbnail</a>
+    <a href="#variants">Variants</a>
+    <a href="#email">Email</a>
+    <a href="#social">Social</a>
+    <a href="#files">Files</a>
+  </nav>
+</header>
+
+<main>
+
+<h1>Pixabots — Free Pack Campaign</h1>
+<p class="lede">Everything needed to ship the free 2,000-pixabot pack to Gumroad and announce it. Click any code block to copy. All images embedded below live in <code>upload/</code> and <code>campaign/social/</code>.</p>
+
+<!-- ============================  CHECKLIST  ============================ -->
+<h2 id="checklist">Pre-flight checklist</h2>
+
+<div class="card">
+  <ul class="checks">
+    <li>Open the upload folder — drag the ZIP onto Gumroad as the product file</li>
+    <li>Set <strong>Name:</strong> Pixabots — Free Pack of 2,000 Pixel Characters</li>
+    <li>Set <strong>Price:</strong> $0+ (pay what you want), suggested $5</li>
+    <li>Upload <code>upload/thumbnail.gif</code> as the product cover (square 1080×1080 animated)</li>
+    <li>Upload all 6 gifs from <code>upload/gallery/</code> as additional product images</li>
+    <li>Paste <code>gumroad-body.html</code> contents into the Description editor (switch to HTML view)</li>
+    <li>Add tags (click to copy): <span class="pill tag" onclick="copyTag(this)">pixel art</span><span class="pill tag" onclick="copyTag(this)">avatars</span><span class="pill tag" onclick="copyTag(this)">icons</span><span class="pill tag" onclick="copyTag(this)">characters</span><span class="pill tag" onclick="copyTag(this)">free</span><span class="pill tag" onclick="copyTag(this)">design assets</span> <a href="#" onclick="copyAllTags(event)" style="font-size:12px; margin-left:6px;">copy all →</a></li>
+    <li>Publish</li>
+    <li>Send the subscriber email (Gumroad → Emails → New)</li>
+    <li>Post the 5 social variants on schedule</li>
+  </ul>
+</div>
+
+<!-- ============================  GUMROAD  ============================ -->
+<h2 id="gumroad">Gumroad product page</h2>
+
+<h3>Product title</h3>
+<div class="copybox" data-copy>Pixabots — Free Pack of 2,000 Pixel Characters<button onclick="copy(this)">Copy</button></div>
+
+<h3>Tagline / summary (140 chars max)</h3>
+<div class="copybox" data-copy>2,000 unique pixel characters. PNG + animated GIF + WebP. Free for personal and commercial use.<button onclick="copy(this)">Copy</button></div>
+
+<h3>Suggested price</h3>
+<p><strong>$0+</strong> &middot; pay what you want &middot; suggest $5</p>
+
+<h3>Additional details (5 key/value pairs)</h3>
+<p>Gumroad's "Additional details" section. Two inputs per row. Copy each pair below.</p>
+<div class="grid" style="grid-template-columns: 1fr 1fr; gap: 10px;">
+  <div class="copybox" data-copy>Characters<button onclick="copy(this)">Copy</button></div>
+  <div class="copybox" data-copy>2,000 unique pixel characters<button onclick="copy(this)">Copy</button></div>
+  <div class="copybox" data-copy>Files<button onclick="copy(this)">Copy</button></div>
+  <div class="copybox" data-copy>12,000 (4 PNG sizes + GIF + WebP)<button onclick="copy(this)">Copy</button></div>
+  <div class="copybox" data-copy>PNG sizes<button onclick="copy(this)">Copy</button></div>
+  <div class="copybox" data-copy>240, 480, 960, 1920 px<button onclick="copy(this)">Copy</button></div>
+  <div class="copybox" data-copy>Animations<button onclick="copy(this)">Copy</button></div>
+  <div class="copybox" data-copy>480px GIF + 480px WebP<button onclick="copy(this)">Copy</button></div>
+  <div class="copybox" data-copy>License<button onclick="copy(this)">Copy</button></div>
+  <div class="copybox" data-copy>Personal + commercial use<button onclick="copy(this)">Copy</button></div>
+</div>
+
+<h3>Description body (paste into Gumroad)</h3>
+<p>Open <a href="gumroad-body.html" target="_blank">gumroad-body.html</a> in a tab and copy-paste into the Gumroad rich-text editor (it accepts HTML). Preview rendered below.</p>
+<iframe src="gumroad-body.html"></iframe>
+
+<!-- ============================  GALLERY  ============================ -->
+<h2 id="gallery">Product gallery images</h2>
+<p>Upload all six as additional images on the product. Gumroad displays them as a scroll/carousel.</p>
+
+<div class="grid">
+  <div class="thumb"><img src="../upload/gallery/01-cover.gif" alt=""><div class="meta"><span>01 cover</span><span>1280×720</span></div></div>
+  <div class="thumb"><img src="../upload/gallery/02-grid-4x3.gif" alt=""><div class="meta"><span>02 grid 4×3</span><span>1600×900</span></div></div>
+  <div class="thumb"><img src="../upload/gallery/03-loose.gif" alt=""><div class="meta"><span>03 loose</span><span>1600×900</span></div></div>
+  <div class="thumb"><img src="../upload/gallery/04-dark.gif" alt=""><div class="meta"><span>04 dark</span><span>1600×900</span></div></div>
+  <div class="thumb"><img src="../upload/gallery/05-hero-row.gif" alt=""><div class="meta"><span>05 hero row</span><span>1920×640</span></div></div>
+  <div class="thumb"><img src="../upload/gallery/06-grid-3x2.gif" alt=""><div class="meta"><span>06 grid 3×2</span><span>1600×900</span></div></div>
+</div>
+
+<!-- ============================  THUMB  ============================ -->
+<h2 id="thumbnail">Gumroad cover / thumbnail</h2>
+<p>Square 1080×1080 animated. Eight pixabots rotating around a hole. Use as the main cover.</p>
+<div class="grid" style="grid-template-columns: 1fr 1fr;">
+  <div class="thumb"><img src="../upload/thumbnail.gif" alt=""><div class="meta"><span>thumbnail</span><span>1080×1080</span></div></div>
+  <div></div>
+</div>
+
+<!-- ============================  VARIANTS  ============================ -->
+<h2 id="variants">Format variants — Name / Description pairs</h2>
+<p>If you upload separate downloads per format (Gumroad's "Versions" / multi-file content), use these. Four zips live in <code>upload/zips/</code>. Each one bundles <code>LICENSE.txt</code>, <code>README.txt</code>, and <code>manifest.json</code> alongside its format folder.</p>
+
+<div class="card">
+  <h3 style="margin-top:0;">All formats &middot; 194 MB</h3>
+  <p><span class="pill">upload/zips/pixabots-pack-all-formats.zip</span></p>
+  <div class="grid" style="grid-template-columns: 1fr 2fr; gap:10px;">
+    <div class="copybox" data-copy>All formats (PNG + GIF + WebP)<button onclick="copy(this)">Copy</button></div>
+    <div class="copybox" data-copy>12,000 files. 2,000 characters × PNG (4 sizes) + animated GIF + animated WebP.<button onclick="copy(this)">Copy</button></div>
+  </div>
+</div>
+
+<div class="card">
+  <h3 style="margin-top:0;">PNGs only &middot; 51 MB</h3>
+  <p><span class="pill">upload/zips/pixabots-pack-png-only.zip</span></p>
+  <div class="grid" style="grid-template-columns: 1fr 2fr; gap:10px;">
+    <div class="copybox" data-copy>PNGs only — 4 sizes<button onclick="copy(this)">Copy</button></div>
+    <div class="copybox" data-copy>8,000 static PNGs at 240, 480, 960, and 1920 px. Transparent background.<button onclick="copy(this)">Copy</button></div>
+  </div>
+</div>
+
+<div class="card">
+  <h3 style="margin-top:0;">Animated GIFs only &middot; 136 MB</h3>
+  <p><span class="pill">upload/zips/pixabots-pack-gif-only.zip</span></p>
+  <div class="grid" style="grid-template-columns: 1fr 2fr; gap:10px;">
+    <div class="copybox" data-copy>Animated GIFs only<button onclick="copy(this)">Copy</button></div>
+    <div class="copybox" data-copy>2,000 animated bounce GIFs at 480px. Works everywhere GIFs work.<button onclick="copy(this)">Copy</button></div>
+  </div>
+</div>
+
+<div class="card">
+  <h3 style="margin-top:0;">Animated WebPs only &middot; 6 MB</h3>
+  <p><span class="pill">upload/zips/pixabots-pack-webp-only.zip</span></p>
+  <div class="grid" style="grid-template-columns: 1fr 2fr; gap:10px;">
+    <div class="copybox" data-copy>Animated WebPs only<button onclick="copy(this)">Copy</button></div>
+    <div class="copybox" data-copy>2,000 animated WebPs at 480px. ~20× smaller than GIF, modern format.<button onclick="copy(this)">Copy</button></div>
+  </div>
+</div>
+
+<!-- ============================  EMAIL  ============================ -->
+<h2 id="email">Subscriber email</h2>
+<p>Open <a href="email.html" target="_blank">email.html</a> and copy whatever rendering the email tool prefers (HTML source or rendered text). Includes four subject-line options at the top. Preview rendered below.</p>
+<iframe src="email.html"></iframe>
+
+<!-- ============================  SOCIAL  ============================ -->
+<h2 id="social">Social posts</h2>
+<p>One image per channel, each at the canonical aspect ratio, all animated. Captions below — pick whichever feels right for the platform.</p>
+
+<h3>Twitter / X — 1200×675</h3>
+<div class="thumb"><img src="social/twitter.gif" alt=""></div>
+<div class="copybox" data-copy>2,000 free pixel characters. PNG, GIF, WebP. Personal + commercial use. Pay what you want.
+
+I made these. You should have them.
+
+→ pablostanley.gumroad.com/l/pixabots<button onclick="copy(this)">Copy</button></div>
+
+<h3>Instagram square — 1080×1080</h3>
+<div class="thumb" style="max-width:540px;"><img src="social/instagram-square.gif" alt=""></div>
+<div class="copybox" data-copy>2,000 pixel characters. Free.
+
+PNG in four sizes. Animated GIF + WebP. Personal and commercial use.
+
+Grab them at the link in bio.
+
+#pixelart #design #freebies #avatars #gamedev #ui #icons<button onclick="copy(this)">Copy</button></div>
+
+<h3>Instagram story / Reels cover — 1080×1920</h3>
+<div class="thumb" style="max-width:280px;"><img src="social/instagram-story.gif" alt=""></div>
+<div class="copybox" data-copy>2,000 pixel characters, free. Link in bio.<button onclick="copy(this)">Copy</button></div>
+
+<h3>LinkedIn — 1200×627</h3>
+<div class="thumb"><img src="social/linkedin.gif" alt=""></div>
+<div class="copybox" data-copy>I made a little pixel character generator called Pixabots. It can spin up 10,752 unique combinations.
+
+I packaged 2,000 of them as a free download — PNGs in four sizes, animated GIFs, animated WebPs. Free for personal and commercial use.
+
+Use them as default avatars, placeholder characters, NPCs, channel art, anywhere you need a face.
+
+Grab the pack: pablostanley.gumroad.com/l/pixabots
+Or the live editor: pixabots.com<button onclick="copy(this)">Copy</button></div>
+
+<h3>Facebook — 1200×630</h3>
+<div class="thumb"><img src="social/facebook.gif" alt=""></div>
+<div class="copybox" data-copy>2,000 free pixel characters in one pack. PNG, GIF, WebP, four sizes. Use them in any project — personal or commercial. → pablostanley.gumroad.com/l/pixabots<button onclick="copy(this)">Copy</button></div>
+
+<!-- ============================  FILES  ============================ -->
+<h2 id="files">File map</h2>
+<div class="card">
+<pre style="margin:0; font-size:13px;">
+~/Downloads/pixabots-gumroad/
+├── upload/                       ← What to drag into Gumroad
+│   ├── zips/                        (product files, one per variant)
+│   │   ├── pixabots-pack-all-formats.zip   194 MB
+│   │   ├── pixabots-pack-png-only.zip       51 MB
+│   │   ├── pixabots-pack-gif-only.zip      136 MB
+│   │   └── pixabots-pack-webp-only.zip       6 MB
+│   ├── thumbnail.gif                (square cover)
+│   └── gallery/                     (additional gallery images)
+│       ├── 01-cover.gif
+│       ├── 02-grid-4x3.gif
+│       ├── 03-loose.gif
+│       ├── 04-dark.gif
+│       ├── 05-hero-row.gif
+│       └── 06-grid-3x2.gif
+└── campaign/                     ← Internal — for you
+    ├── index.html                   (this dashboard)
+    ├── gumroad-body.html            (paste body into Gumroad)
+    ├── email.html                   (subscriber email)
+    └── social/
+        ├── twitter.gif
+        ├── instagram-square.gif
+        ├── instagram-story.gif
+        ├── linkedin.gif
+        └── facebook.gif
+</pre>
+</div>
+
+</main>
+
+<script>
+function copy(btn) {
+  const box = btn.parentElement;
+  const text = Array.from(box.childNodes)
+    .filter(n => n.nodeType === 3 || (n.tagName !== 'BUTTON'))
+    .map(n => n.textContent).join('').trim();
+  navigator.clipboard.writeText(text);
+  const orig = btn.textContent;
+  btn.textContent = 'Copied ✓';
+  setTimeout(() => { btn.textContent = orig; }, 1400);
+}
+function copyTag(el) {
+  navigator.clipboard.writeText(el.textContent);
+  el.classList.add('copied');
+  setTimeout(() => el.classList.remove('copied'), 900);
+}
+function copyAllTags(e) {
+  e.preventDefault();
+  const tags = Array.from(document.querySelectorAll('.pill.tag')).map(t => t.textContent).join(', ');
+  navigator.clipboard.writeText(tags);
+  const a = e.target;
+  const orig = a.textContent;
+  a.textContent = 'copied ✓';
+  setTimeout(() => { a.textContent = orig; }, 1400);
+}
+</script>
+
+</body>
+</html>
diff --git a/scripts/generate-gumroad-campaign.mjs b/scripts/generate-gumroad-campaign.mjs
new file mode 100644
index 0000000..a2ca613
--- /dev/null
+++ b/scripts/generate-gumroad-campaign.mjs
@@ -0,0 +1,314 @@
+#!/usr/bin/env node
+/**
+ * Build the full Gumroad campaign: animated banners + social posts + HTML pages.
+ *
+ * Output:
+ *   ~/Downloads/pixabots-gumroad/
+ *     upload/
+ *       gallery/             — Gumroad product gallery (animated)
+ *         01-cover.gif       1280×720
+ *         02-masonry.gif     1600×900
+ *         03-loose.gif       1600×900
+ *         04-dark.gif        1600×900
+ *         05-hero-row.gif    1920×640
+ *         06-minimal.gif     1600×900
+ *       thumbnail.gif        1080×1080  (8 bots rotating)
+ *     campaign/
+ *       social/
+ *         twitter.gif            1200×675
+ *         instagram-square.gif   1080×1080
+ *         instagram-story.gif    1080×1920
+ *         linkedin.gif           1200×627
+ *         facebook.gif           1200×630
+ *
+ * Reads source bot library from ~/Downloads/pixabots-pack/.
+ * Each animated GIF is 4 frames × 500ms (2-second loop).
+ *
+ * Usage:
+ *   node scripts/generate-gumroad-campaign.mjs
+ */
+
+import sharp from "/Users/pablostanley/Dropbox/pixabots/app/node_modules/sharp/lib/index.js";
+import path from "node:path";
+import fs from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const REPO = path.resolve(__dirname, "..");
+const GUMROAD_ROOT = path.join(REPO, "pixabots-gumroad");
+const PACK = process.env.PACK || path.join(GUMROAD_ROOT, "pixabots-pack");
+const ROOT = process.env.OUT || GUMROAD_ROOT;
+const UPLOAD_GALLERY = path.join(ROOT, "upload", "gallery");
+const UPLOAD_DIR = path.join(ROOT, "upload");
+const SOCIAL_DIR = path.join(ROOT, "campaign", "social");
+
+const FRAMES = 4;
+const FRAME_DELAY_MS = 500;
+
+const PASTELS = [
+  { r: 255, g: 223, b: 211 },  // peach
+  { r: 215, g: 240, b: 219 },  // mint
+  { r: 211, g: 232, b: 255 },  // sky
+  { r: 240, g: 220, b: 255 },  // lavender
+  { r: 255, g: 225, b: 235 },  // blush
+  { r: 255, g: 244, b: 200 },  // butter
+  { r: 220, g: 235, b: 215 },  // sage
+  { r: 255, g: 218, b: 218 },  // coral
+  { r: 230, g: 220, b: 255 },  // lilac
+  { r: 213, g: 240, b: 240 },  // aqua
+  { r: 250, g: 230, b: 210 },  // sand
+  { r: 235, g: 224, b: 255 },  // wisteria
+];
+
+function mulberry32(seed) {
+  let a = seed >>> 0;
+  return () => {
+    a = (a + 0x6d2b79f5) | 0;
+    let t = a;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+function pickClosestSize(target) {
+  const sizes = [240, 480, 960, 1920];
+  return sizes.reduce((best, s) => (Math.abs(s - target) < Math.abs(best - target) ? s : best));
+}
+
+const BOT_CACHE = new Map();
+async function loadBot(id, size) {
+  const key = `${id}@${size}`;
+  if (BOT_CACHE.has(key)) return BOT_CACHE.get(key);
+  const src = pickClosestSize(size);
+  const p = path.join(PACK, "png", String(src), `${id}.png`);
+  const buf = await sharp(p).resize(size, size, { kernel: sharp.kernel.nearest }).png().toBuffer();
+  BOT_CACHE.set(key, buf);
+  return buf;
+}
+
+/**
+ * Build one animated GIF.
+ *
+ * @param {object} opts
+ * @param {number} opts.width
+ * @param {number} opts.height
+ * @param {{r,g,b}} opts.bg
+ * @param {{x,y,size}[]} opts.slots   placement of each tile
+ * @param {string[]} opts.ids         id pool to draw from
+ * @param {number} opts.seed
+ * @returns {Promise<Buffer>}         GIF bytes
+ */
+async function buildAnimatedGrid({ width, height, bg, slots, ids, seed }) {
+  const rng = mulberry32(seed);
+  const bgRgba = { ...bg, alpha: 1 };
+
+  const framesRaw = [];
+  for (let f = 0; f < FRAMES; f++) {
+    const composites = [];
+    for (const slot of slots) {
+      const id = ids[Math.floor(rng() * ids.length)];
+      const buf = await loadBot(id, slot.size);
+      composites.push({ input: buf, left: Math.round(slot.x), top: Math.round(slot.y) });
+    }
+    const framePng = await sharp({
+      create: { width, height, channels: 4, background: bgRgba },
+    })
+      .composite(composites)
+      .png()
+      .toBuffer();
+    // Strip alpha so the stacked raw buffer has a uniform 3-channel stride.
+    const frameRaw = await sharp(framePng).removeAlpha().raw().toBuffer();
+    framesRaw.push(frameRaw);
+  }
+
+  const stacked = Buffer.concat(framesRaw);
+  const delays = Array.from({ length: FRAMES }, () => FRAME_DELAY_MS);
+
+  return sharp(stacked, {
+    raw: { width, height: height * FRAMES, channels: 3, pageHeight: height },
+  })
+    .gif({ delay: delays, loop: 0, effort: 10 })
+    .toBuffer();
+}
+
+/**
+ * Special-case for the Gumroad thumbnail: one bot per frame, centered with
+ * padding, each frame on a different pastel bg. Loops through `count` bots
+ * at `frameMs` per frame (slower than the grid banners — feels like a
+ * polaroid carousel, not a glitch).
+ */
+async function buildAnimatedSingle({ width, height, count, padding, ids, seed, frameMs }) {
+  const rng = mulberry32(seed);
+  const tileSize = Math.min(width, height) - padding * 2;
+  const x = Math.round((width - tileSize) / 2);
+  const y = Math.round((height - tileSize) / 2);
+
+  const framesRaw = [];
+  for (let f = 0; f < count; f++) {
+    const id = ids[Math.floor(rng() * ids.length)];
+    const bg = { ...PASTELS[Math.floor(rng() * PASTELS.length)], alpha: 1 };
+    const bot = await loadBot(id, tileSize);
+    const framePng = await sharp({
+      create: { width, height, channels: 4, background: bg },
+    })
+      .composite([{ input: bot, left: x, top: y }])
+      .png()
+      .toBuffer();
+    const frameRaw = await sharp(framePng).removeAlpha().raw().toBuffer();
+    framesRaw.push(frameRaw);
+  }
+
+  const stacked = Buffer.concat(framesRaw);
+  const delays = Array.from({ length: count }, () => frameMs);
+
+  return sharp(stacked, {
+    raw: { width, height: height * count, channels: 3, pageHeight: height },
+  })
+    .gif({ delay: delays, loop: 0, effort: 10 })
+    .toBuffer();
+}
+
+/* -------------------------- layout generators ------------------------ */
+
+function uniformGrid(W, H, cols, rows, bg, opts = {}) {
+  const tile = Math.floor(Math.min(W / cols, H / rows));
+  const xOff = Math.floor((W - tile * cols) / 2);
+  const yOff = opts.bleedTop ? -Math.floor(tile / 2) : Math.floor((H - tile * rows) / 2);
+  const realRows = opts.bleedTop ? rows + 1 : rows;
+  const slots = [];
+  for (let r = 0; r < realRows; r++) {
+    for (let c = 0; c < cols; c++) {
+      const y = yOff + r * tile;
+      if (y >= H) continue;
+      slots.push({ x: xOff + c * tile, y, size: tile });
+    }
+  }
+  return { width: W, height: H, bg, slots };
+}
+
+function masonryLayout(W, H, seed) {
+  const rng = mulberry32(seed);
+  const COLS = 10;
+  const colW = W / COLS;
+  const colY = new Array(COLS).fill(0);
+  const slots = [];
+  while (Math.min(...colY) < H) {
+    const c = colY.indexOf(Math.min(...colY));
+    const choices = [colW, colW * 2, colW];
+    const span = choices[Math.floor(rng() * choices.length)];
+    if (colY[c] + span > H) {
+      colY[c] = H;
+      continue;
+    }
+    slots.push({ x: c * colW, y: colY[c], size: span });
+    colY[c] += span;
+  }
+  return slots;
+}
+
+function looseGrid(W, H) {
+  const COLS = 9;
+  const ROWS = 5;
+  const tile = 140;
+  const gap = (W - COLS * tile) / (COLS + 1);
+  const yOff = Math.floor((H - ROWS * tile - (ROWS - 1) * gap) / 2);
+  const slots = [];
+  for (let r = 0; r < ROWS; r++) {
+    for (let c = 0; c < COLS; c++) {
+      slots.push({ x: gap + c * (tile + gap), y: yOff + r * (tile + gap), size: tile });
+    }
+  }
+  return slots;
+}
+
+function heroRow(W, H, tile) {
+  const COUNT = Math.ceil(W / tile) + 1;
+  const yOff = Math.floor((H - tile) / 2);
+  const slots = [];
+  for (let i = 0; i < COUNT; i++) slots.push({ x: i * tile, y: yOff, size: tile });
+  return slots;
+}
+
+function minimalLayout() {
+  return [
+    { size: 320, x: 120, y: 290 },
+    { size: 220, x: 520, y: 130 },
+    { size: 260, x: 540, y: 470 },
+    { size: 200, x: 900, y: 280 },
+    { size: 280, x: 1180, y: 110 },
+    { size: 180, x: 1240, y: 540 },
+    { size: 140, x: 880, y: 660 },
+    { size: 120, x: 360, y: 720 },
+  ];
+}
+
+/* ----------------------------- main ---------------------------------- */
+
+async function main() {
+  const manifest = JSON.parse(await fs.readFile(path.join(PACK, "manifest.json"), "utf-8"));
+  const ids = manifest.ids;
+  console.log(`Source: ${ids.length} ids from ${PACK}`);
+  console.log(`Frames: ${FRAMES} × ${FRAME_DELAY_MS}ms\n`);
+
+  await fs.mkdir(UPLOAD_GALLERY, { recursive: true });
+  await fs.mkdir(SOCIAL_DIR, { recursive: true });
+
+  const cream = { r: 245, g: 240, b: 230 };
+  const warm = { r: 250, g: 246, b: 240 };
+  const pale = { r: 252, g: 247, b: 235 };
+  const dark = { r: 14, g: 14, b: 18 };
+  const blue = { r: 30, g: 90, b: 200 };
+  const stone = { r: 248, g: 244, b: 238 };
+
+  /* gallery (Gumroad product page) */
+  const gallery = [
+    { name: "01-cover.gif", spec: { ...uniformGrid(1280, 720, 16, 9, cream), ids, seed: 1 } },
+    { name: "02-grid-4x3.gif", spec: { ...uniformGrid(1600, 900, 4, 3, warm), ids, seed: 2 } },
+    { name: "03-loose.gif", spec: { width: 1600, height: 900, bg: pale, slots: looseGrid(1600, 900), ids, seed: 3 } },
+    { name: "04-dark.gif", spec: { ...uniformGrid(1600, 900, 20, 11, dark, { bleedTop: true }), ids, seed: 4 } },
+    { name: "05-hero-row.gif", spec: { width: 1600, height: 900, bg: blue, slots: heroRow(1600, 900, 720), ids, seed: 5 } },
+    { name: "06-grid-3x2.gif", spec: { ...uniformGrid(1600, 900, 3, 2, stone), ids, seed: 6 } },
+  ];
+
+  for (const g of gallery) {
+    const buf = await buildAnimatedGrid(g.spec);
+    await fs.writeFile(path.join(UPLOAD_GALLERY, g.name), buf);
+    console.log(`  upload/gallery/${g.name}  ${(buf.length / 1024).toFixed(0)} KB`);
+  }
+
+  /* Gumroad square thumbnail — single bot, padded, pastel bg cycles. 1080×1080. */
+  const thumb = await buildAnimatedSingle({
+    width: 1080,
+    height: 1080,
+    count: 12,
+    padding: 140,
+    ids,
+    seed: 100,
+    frameMs: 600,
+  });
+  await fs.writeFile(path.join(UPLOAD_DIR, "thumbnail.gif"), thumb);
+  console.log(`  upload/thumbnail.gif  ${(thumb.length / 1024).toFixed(0)} KB`);
+
+  /* Social — same animated treatment at canonical sizes */
+  const social = [
+    { name: "twitter.gif", spec: { ...uniformGrid(1200, 675, 15, 9, cream), ids, seed: 201 } },
+    { name: "instagram-square.gif", spec: { ...uniformGrid(1080, 1080, 9, 9, cream), ids, seed: 202 } },
+    { name: "instagram-story.gif", spec: { ...uniformGrid(1080, 1920, 6, 11, dark, { bleedTop: true }), ids, seed: 203 } },
+    { name: "linkedin.gif", spec: { ...uniformGrid(1200, 627, 16, 9, pale), ids, seed: 204 } },
+    { name: "facebook.gif", spec: { ...uniformGrid(1200, 630, 15, 8, warm), ids, seed: 205 } },
+  ];
+
+  for (const s of social) {
+    const buf = await buildAnimatedGrid(s.spec);
+    await fs.writeFile(path.join(SOCIAL_DIR, s.name), buf);
+    console.log(`  campaign/social/${s.name}  ${(buf.length / 1024).toFixed(0)} KB`);
+  }
+
+  console.log("\nDone.");
+}
+
+main().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});
diff --git a/scripts/generate-gumroad-pack.mjs b/scripts/generate-gumroad-pack.mjs
new file mode 100644
index 0000000..7787cd9
--- /dev/null
+++ b/scripts/generate-gumroad-pack.mjs
@@ -0,0 +1,333 @@
+#!/usr/bin/env node
+/**
+ * Generate the free Gumroad pack: 2000 seeded-random pixabots.
+ *
+ * Per ID:
+ *   - PNGs at 240, 480, 960, 1920
+ *   - GIF at 480 (animated bounce)
+ *
+ * Output layout:
+ *   pixabots-gumroad/pixabots-pack/   (inside the repo, gitignored)
+ *     png/240/{id}.png
+ *     png/480/{id}.png
+ *     png/960/{id}.png
+ *     png/1920/{id}.png
+ *     gif/480/{id}.gif
+ *     manifest.json   (list of all 2000 IDs, in seeded order)
+ *     LICENSE.txt
+ *     README.txt
+ *
+ * Idempotent: existing files are skipped (rerun-safe after Ctrl-C).
+ *
+ * Usage:
+ *   node scripts/generate-gumroad-pack.mjs              # default
+ *   COUNT=100 node scripts/generate-gumroad-pack.mjs    # smoke test
+ *   OUT=/some/path node scripts/generate-gumroad-pack.mjs
+ */
+
+import sharp from "/Users/pablostanley/Dropbox/pixabots/app/node_modules/sharp/lib/index.js";
+import path from "node:path";
+import fs from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+import {
+  PARTS,
+  LAYER_ORDER,
+  ANIM_FRAMES,
+  LOOP_LENGTH,
+  FRAME_MS,
+  encode,
+  mulberry32,
+  hashString,
+  resolveFrameIndex,
+} from "/Users/pablostanley/Dropbox/pixabots/app/node_modules/@pixabots/core/dist/index.js";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.resolve(__dirname, "..");
+const PARTS_DIR = path.join(ROOT, "app", "public", "parts");
+
+const COUNT = Number(process.env.COUNT) || 2000;
+const SEED = process.env.SEED || "pixabots-gumroad-pack-v1";
+const OUT = process.env.OUT || path.join(ROOT, "pixabots-gumroad", "pixabots-pack");
+const PNG_SIZES = [240, 480, 960, 1920];
+const GIF_SIZE = 480;
+const CONCURRENCY = Number(process.env.CONCURRENCY) || 8;
+
+const NATIVE = 32;
+
+async function loadLayers(combo) {
+  const entries = await Promise.all(
+    LAYER_ORDER.map(async (cat) => {
+      const part = PARTS[cat][combo[cat]];
+      const frames = part.frames ?? 1;
+      const buffer = await sharp(path.join(PARTS_DIR, part.path))
+        .resize(frames * NATIVE, NATIVE, { kernel: sharp.kernel.nearest })
+        .png()
+        .toBuffer();
+      return [cat, { buffer, frames }];
+    })
+  );
+  return Object.fromEntries(entries);
+}
+
+async function extractFrame(sheet, idx) {
+  const f = Math.min(Math.max(0, idx), sheet.frames - 1);
+  if (sheet.frames === 1) return sheet.buffer;
+  return sharp(sheet.buffer)
+    .extract({ left: f * NATIVE, top: 0, width: NATIVE, height: NATIVE })
+    .png()
+    .toBuffer();
+}
+
+async function renderPng(combo, size, layers) {
+  const frame0s = await Promise.all(
+    LAYER_ORDER.map(async (cat) => [cat, await extractFrame(layers[cat], 0)])
+  );
+  const map = Object.fromEntries(frame0s);
+  const composites = LAYER_ORDER.map((cat) => ({ input: map[cat], left: 0, top: 0 }));
+  const native = await sharp({
+    create: { width: NATIVE, height: NATIVE, channels: 4, background: { r: 0, g: 0, b: 0, alpha: 0 } },
+  })
+    .composite(composites)
+    .png()
+    .toBuffer();
+  if (size === NATIVE) return native;
+  return sharp(native).resize(size, size, { kernel: sharp.kernel.nearest }).png().toBuffer();
+}
+
+const ANIM_PAD = 4;
+
+async function renderFrameNative(partByCategory, layers, bodyTop, bodyBottom, offsets, tick) {
+  const frameByCat = Object.fromEntries(
+    await Promise.all(
+      LAYER_ORDER.map(async (cat) => {
+        const idx = resolveFrameIndex(partByCategory[cat], tick);
+        return [cat, await extractFrame(layers[cat], idx)];
+      })
+    )
+  );
+
+  const composites = [];
+  for (const cat of LAYER_ORDER) {
+    const off = Math.round(offsets[cat]);
+    if (cat === "body" && off > 0) {
+      composites.push({ input: bodyTop, left: 0, top: off });
+      composites.push({ input: bodyBottom, left: 0, top: NATIVE - 1 });
+    } else {
+      composites.push({ input: frameByCat[cat], left: 0, top: off });
+    }
+  }
+
+  const png = await sharp({
+    create: { width: NATIVE, height: NATIVE + ANIM_PAD, channels: 4, background: { r: 0, g: 0, b: 0, alpha: 0 } },
+  })
+    .composite(composites)
+    .extract({ left: 0, top: 0, width: NATIVE, height: NATIVE })
+    .png()
+    .toBuffer();
+
+  return sharp(png).raw().toBuffer();
+}
+
+async function renderGif(combo, size, layers) {
+  const bodyFrame0 = await extractFrame(layers.body, 0);
+  const [bodyTop, bodyBottom] = await Promise.all([
+    sharp(bodyFrame0).extract({ left: 0, top: 0, width: NATIVE, height: NATIVE - 1 }).png().toBuffer(),
+    sharp(bodyFrame0).extract({ left: 0, top: NATIVE - 1, width: NATIVE, height: 1 }).png().toBuffer(),
+  ]);
+
+  const partByCategory = Object.fromEntries(
+    LAYER_ORDER.map((cat) => [cat, PARTS[cat][combo[cat]]])
+  );
+
+  const anyAnimated = LAYER_ORDER.some((cat) => (partByCategory[cat].frames ?? 1) > 1);
+  const ticks = anyAnimated ? LOOP_LENGTH : ANIM_FRAMES.length;
+
+  const nativeFrames = await Promise.all(
+    Array.from({ length: ticks }, (_, tick) => {
+      const offsets = ANIM_FRAMES[tick % ANIM_FRAMES.length];
+      return renderFrameNative(partByCategory, layers, bodyTop, bodyBottom, offsets, tick);
+    })
+  );
+
+  const stacked = Buffer.concat(nativeFrames);
+  const stripH = NATIVE * ticks;
+  const targetStripH = size * ticks;
+  const targetStripped =
+    size === NATIVE
+      ? stacked
+      : await sharp(stacked, { raw: { width: NATIVE, height: stripH, channels: 4 } })
+          .resize(size, targetStripH, { kernel: sharp.kernel.nearest })
+          .raw()
+          .toBuffer();
+
+  const delay = Math.max(20, Math.round(FRAME_MS));
+  const delays = Array.from({ length: ticks }, () => delay);
+
+  return sharp(targetStripped, {
+    raw: { width: size, height: targetStripH, channels: 4, pageHeight: size },
+  })
+    .gif({ delay: delays, loop: 0, effort: 10 })
+    .toBuffer();
+}
+
+function pickIds() {
+  const rng = mulberry32(hashString(SEED));
+  const seen = new Set();
+  const ids = [];
+  while (ids.length < COUNT) {
+    const combo = {};
+    for (const cat of ["eyes", "heads", "body", "top"]) {
+      combo[cat] = Math.floor(rng() * PARTS[cat].length);
+    }
+    const id = encode(combo);
+    if (seen.has(id)) continue;
+    seen.add(id);
+    ids.push(id);
+  }
+  return ids;
+}
+
+async function ensureDirs() {
+  for (const s of PNG_SIZES) await fs.mkdir(path.join(OUT, "png", String(s)), { recursive: true });
+  await fs.mkdir(path.join(OUT, "gif", String(GIF_SIZE)), { recursive: true });
+}
+
+async function fileExists(p) {
+  try {
+    await fs.stat(p);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function processOne(id) {
+  const combo = {
+    eyes: parseInt(id[0], 36),
+    heads: parseInt(id[1], 36),
+    body: parseInt(id[2], 36),
+    top: parseInt(id[3], 36),
+  };
+  const layers = await loadLayers(combo);
+
+  for (const size of PNG_SIZES) {
+    const p = path.join(OUT, "png", String(size), `${id}.png`);
+    if (await fileExists(p)) continue;
+    const buf = await renderPng(combo, size, layers);
+    await fs.writeFile(p, buf);
+  }
+
+  const gifPath = path.join(OUT, "gif", String(GIF_SIZE), `${id}.gif`);
+  if (!(await fileExists(gifPath))) {
+    const gif = await renderGif(combo, GIF_SIZE, layers);
+    await fs.writeFile(gifPath, gif);
+  }
+}
+
+async function runPool(items, worker, concurrency) {
+  let cursor = 0;
+  let done = 0;
+  let failed = 0;
+  const total = items.length;
+  const startedAt = Date.now();
+
+  async function pull() {
+    while (cursor < total) {
+      const i = cursor++;
+      try {
+        await worker(items[i], i);
+      } catch (e) {
+        failed++;
+        console.error(`[${items[i]}] FAIL: ${e.message}`);
+      }
+      done++;
+      if (done % 25 === 0 || done === total) {
+        const elapsed = (Date.now() - startedAt) / 1000;
+        const rate = done / elapsed;
+        const eta = ((total - done) / rate).toFixed(0);
+        process.stdout.write(
+          `\r  ${done}/${total}  ${rate.toFixed(1)}/s  ETA ${eta}s  fails:${failed}    `
+        );
+      }
+    }
+  }
+
+  await Promise.all(Array.from({ length: concurrency }, pull));
+  process.stdout.write("\n");
+  return { done, failed };
+}
+
+async function main() {
+  console.log(`Pack: ${COUNT} pixabots`);
+  console.log(`Seed: "${SEED}"`);
+  console.log(`Out:  ${OUT}`);
+  console.log(`Concurrency: ${CONCURRENCY}\n`);
+
+  await ensureDirs();
+  const ids = pickIds();
+
+  // Manifest
+  await fs.writeFile(
+    path.join(OUT, "manifest.json"),
+    JSON.stringify({ seed: SEED, count: ids.length, sizes: { png: PNG_SIZES, gif: [GIF_SIZE] }, ids }, null, 2)
+  );
+
+  // LICENSE + README
+  const license = `Pixabots — Free Pack (2,000 pixel characters)
+
+Copyright (c) ${new Date().getFullYear()} Pablo Stanley
+
+Free for personal, commercial, and editorial use.
+Attribution appreciated but not required: pixabots.com
+
+You may:
+  - Use these images in apps, websites, games, presentations, prints, merchandise.
+  - Modify, recolor, or composite as needed.
+  - Redistribute as part of a larger work.
+
+You may not:
+  - Resell the images themselves as a standalone asset pack.
+  - Claim authorship of the original art.
+
+These are 2,000 of the 10,752 unique combinations available at pixabots.com.
+The full set, custom palettes, API access, and CLI are also free over there.
+`;
+  await fs.writeFile(path.join(OUT, "LICENSE.txt"), license);
+
+  const readme = `Pixabots Free Pack
+==================
+
+2,000 pixel characters, ready to drop into anything.
+
+Folders:
+  png/240    — 240×240 PNGs (UI / chat avatars)
+  png/480    — 480×480 PNGs (cards, hero images)
+  png/960    — 960×960 PNGs (retina / print)
+  png/1920   — 1920×1920 PNGs (full HD, posters)
+  gif/480    — animated bounce GIFs at 480px
+
+Files are named by their 4-character ID — paste any ID at
+https://pixabots.com/?id=XXXX to recreate it in the browser.
+
+Want more?
+  • All 10,752 combos: https://pixabots.com/browse
+  • Free API:          https://pixabots.com/docs/api
+  • npm + CLI:         https://www.npmjs.com/package/@pixabots/core
+
+— Pablo
+`;
+  await fs.writeFile(path.join(OUT, "README.txt"), readme);
+
+  // Render
+  const { done, failed } = await runPool(ids, processOne, CONCURRENCY);
+
+  const elapsed = ((Date.now() - Number(process.env._START || Date.now())) / 1000).toFixed(1);
+  console.log(`\nDone. ${done} processed, ${failed} failed.`);
+  console.log(`Output: ${OUT}`);
+}
+
+process.env._START = String(Date.now());
+main().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});
diff --git a/scripts/generate-pack-webp.mjs b/scripts/generate-pack-webp.mjs
new file mode 100644
index 0000000..121819a
--- /dev/null
+++ b/scripts/generate-pack-webp.mjs
@@ -0,0 +1,192 @@
+#!/usr/bin/env node
+/**
+ * Render the animated-WebP variant for the Gumroad pack.
+ *
+ * One WebP per ID at 480px (matches the GIF size). Animated WebP is
+ * ~30% smaller than GIF, supports alpha properly, plays in every modern
+ * browser. We ship it alongside GIFs (not in place of) since some places
+ * still only accept GIF.
+ *
+ * Reads the same manifest as generate-gumroad-pack.mjs. Idempotent.
+ *
+ * Usage:
+ *   node scripts/generate-pack-webp.mjs
+ *   COUNT=10 node scripts/generate-pack-webp.mjs       # smoke
+ *   OUT=/some/path node scripts/generate-pack-webp.mjs
+ */
+
+import sharp from "/Users/pablostanley/Dropbox/pixabots/app/node_modules/sharp/lib/index.js";
+import path from "node:path";
+import fs from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+import {
+  PARTS,
+  LAYER_ORDER,
+  ANIM_FRAMES,
+  LOOP_LENGTH,
+  FRAME_MS,
+  resolveFrameIndex,
+} from "/Users/pablostanley/Dropbox/pixabots/app/node_modules/@pixabots/core/dist/index.js";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.resolve(__dirname, "..");
+const PARTS_DIR = path.join(ROOT, "app", "public", "parts");
+const OUT = process.env.OUT || path.join(ROOT, "pixabots-gumroad", "pixabots-pack");
+const SIZE = 480;
+const CONCURRENCY = Number(process.env.CONCURRENCY) || 6;
+const NATIVE = 32;
+const ANIM_PAD = 4;
+
+async function loadLayers(combo) {
+  const entries = await Promise.all(
+    LAYER_ORDER.map(async (cat) => {
+      const part = PARTS[cat][combo[cat]];
+      const frames = part.frames ?? 1;
+      const buffer = await sharp(path.join(PARTS_DIR, part.path))
+        .resize(frames * NATIVE, NATIVE, { kernel: sharp.kernel.nearest })
+        .png()
+        .toBuffer();
+      return [cat, { buffer, frames }];
+    })
+  );
+  return Object.fromEntries(entries);
+}
+
+async function extractFrame(sheet, idx) {
+  const f = Math.min(Math.max(0, idx), sheet.frames - 1);
+  if (sheet.frames === 1) return sheet.buffer;
+  return sharp(sheet.buffer)
+    .extract({ left: f * NATIVE, top: 0, width: NATIVE, height: NATIVE })
+    .png()
+    .toBuffer();
+}
+
+async function renderFrameNative(partByCat, layers, bodyTop, bodyBottom, offsets, tick) {
+  const frameByCat = Object.fromEntries(
+    await Promise.all(
+      LAYER_ORDER.map(async (cat) => {
+        const idx = resolveFrameIndex(partByCat[cat], tick);
+        return [cat, await extractFrame(layers[cat], idx)];
+      })
+    )
+  );
+  const composites = [];
+  for (const cat of LAYER_ORDER) {
+    const off = Math.round(offsets[cat]);
+    if (cat === "body" && off > 0) {
+      composites.push({ input: bodyTop, left: 0, top: off });
+      composites.push({ input: bodyBottom, left: 0, top: NATIVE - 1 });
+    } else {
+      composites.push({ input: frameByCat[cat], left: 0, top: off });
+    }
+  }
+  const png = await sharp({
+    create: { width: NATIVE, height: NATIVE + ANIM_PAD, channels: 4, background: { r: 0, g: 0, b: 0, alpha: 0 } },
+  })
+    .composite(composites)
+    .extract({ left: 0, top: 0, width: NATIVE, height: NATIVE })
+    .png()
+    .toBuffer();
+  return sharp(png).raw().toBuffer();
+}
+
+async function renderWebp(combo, size, layers) {
+  const bodyFrame0 = await extractFrame(layers.body, 0);
+  const [bodyTop, bodyBottom] = await Promise.all([
+    sharp(bodyFrame0).extract({ left: 0, top: 0, width: NATIVE, height: NATIVE - 1 }).png().toBuffer(),
+    sharp(bodyFrame0).extract({ left: 0, top: NATIVE - 1, width: NATIVE, height: 1 }).png().toBuffer(),
+  ]);
+  const partByCat = Object.fromEntries(LAYER_ORDER.map((cat) => [cat, PARTS[cat][combo[cat]]]));
+  const anyAnimated = LAYER_ORDER.some((cat) => (partByCat[cat].frames ?? 1) > 1);
+  const ticks = anyAnimated ? LOOP_LENGTH : ANIM_FRAMES.length;
+
+  const nativeFrames = await Promise.all(
+    Array.from({ length: ticks }, (_, tick) =>
+      renderFrameNative(partByCat, layers, bodyTop, bodyBottom, ANIM_FRAMES[tick % ANIM_FRAMES.length], tick)
+    )
+  );
+  const stacked = Buffer.concat(nativeFrames);
+  const stripH = NATIVE * ticks;
+  const targetStripH = size * ticks;
+  const targetStripped =
+    size === NATIVE
+      ? stacked
+      : await sharp(stacked, { raw: { width: NATIVE, height: stripH, channels: 4 } })
+          .resize(size, targetStripH, { kernel: sharp.kernel.nearest })
+          .raw()
+          .toBuffer();
+  const delay = Math.max(20, Math.round(FRAME_MS));
+  const delays = Array.from({ length: ticks }, () => delay);
+  return sharp(targetStripped, {
+    raw: { width: size, height: targetStripH, channels: 4, pageHeight: size },
+  })
+    .webp({ delay: delays, loop: 0, lossless: true, effort: 6 })
+    .toBuffer();
+}
+
+async function fileExists(p) {
+  try {
+    await fs.stat(p);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function processOne(id) {
+  const combo = {
+    eyes: parseInt(id[0], 36),
+    heads: parseInt(id[1], 36),
+    body: parseInt(id[2], 36),
+    top: parseInt(id[3], 36),
+  };
+  const p = path.join(OUT, "webp", String(SIZE), `${id}.webp`);
+  if (await fileExists(p)) return;
+  const layers = await loadLayers(combo);
+  const buf = await renderWebp(combo, SIZE, layers);
+  await fs.writeFile(p, buf);
+}
+
+async function runPool(items, worker, concurrency) {
+  let cursor = 0;
+  let done = 0;
+  let failed = 0;
+  const total = items.length;
+  const startedAt = Date.now();
+  async function pull() {
+    while (cursor < total) {
+      const i = cursor++;
+      try {
+        await worker(items[i]);
+      } catch (e) {
+        failed++;
+        console.error(`[${items[i]}] FAIL: ${e.message}`);
+      }
+      done++;
+      if (done % 25 === 0 || done === total) {
+        const elapsed = (Date.now() - startedAt) / 1000;
+        const rate = done / elapsed;
+        const eta = ((total - done) / rate).toFixed(0);
+        process.stdout.write(`\r  ${done}/${total}  ${rate.toFixed(1)}/s  ETA ${eta}s  fails:${failed}    `);
+      }
+    }
+  }
+  await Promise.all(Array.from({ length: concurrency }, pull));
+  process.stdout.write("\n");
+  return { done, failed };
+}
+
+async function main() {
+  const manifest = JSON.parse(await fs.readFile(path.join(OUT, "manifest.json"), "utf-8"));
+  const ids = process.env.COUNT ? manifest.ids.slice(0, Number(process.env.COUNT)) : manifest.ids;
+  console.log(`WebP: ${ids.length} @ ${SIZE}px`);
+  console.log(`Out:  ${OUT}/webp/${SIZE}/\n`);
+  await fs.mkdir(path.join(OUT, "webp", String(SIZE)), { recursive: true });
+  const { done, failed } = await runPool(ids, processOne, CONCURRENCY);
+  console.log(`\nDone. ${done} processed, ${failed} failed.`);
+}
+
+main().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});