From 9bbe70824276aff226ef8ae90ffe113a688a3c72 Mon Sep 17 00:00:00 2001
From: Dara Adedeji <76637177+SunkenInTime@users.noreply.github.com>
Date: Sun, 12 Jul 2026 13:20:20 -0700
Subject: [PATCH 1/3] Optimize generated variant routes and site performance

- Generate deterministic model-specific route entries before dev and build
- Reduce compare-page payloads and unnecessary client work
- Improve caching, image delivery, and gallery loading behavior
---
 .gitignore                                    |   3 +
 next.config.ts                                |  39 +++-
 package.json                                  |   5 +-
 scripts/generate-variant-routes.mjs           |  92 ++++++++++
 src/app/[group]/[model]/[iteration]/page.tsx  |  17 --
 src/app/[group]/[model]/page.tsx              |   5 +-
 src/app/compare/page.tsx                      |  12 +-
 src/app/experiments/page.tsx                  |   2 +-
 src/app/globals.css                           |  27 ++-
 src/app/lab-guess/page.tsx                    |   5 +-
 src/app/layout.tsx                            |   5 +-
 src/app/page.tsx                              |  11 +-
 .../[group]/[model]/[iteration]/page.tsx      |  17 --
 src/app/rankings/page.tsx                     |   4 +-
 src/components/compare/compare-page.tsx       | 143 ++++++++-------
 src/components/compare/compare-selects.tsx    |   4 +-
 .../gallery/gallery-archive-grid.tsx          |  70 +++++++
 src/components/gallery/gallery-card.tsx       |  13 +-
 .../gallery/gallery-group-section.tsx         |  75 ++++----
 .../gallery/gallery-iteration-view.tsx        |  12 +-
 .../gallery/gallery-rankings-nav.tsx          |  16 +-
 .../gallery/gallery-theme-provider.tsx        |  74 --------
 .../gallery/gallery-theme-toggle.tsx          |  36 +++-
 src/components/gallery/generation-prompt.tsx  |  35 ++--
 src/components/gallery/theme-aware-logo.tsx   |  35 +++-
 src/components/gallery/variant-header.tsx     |  81 +++++---
 src/components/game/model-lab-wordle.tsx      |  26 +--
 src/lib/compare-server.ts                     | 114 ++++++++++++
 src/lib/compare.ts                            | 173 ++----------------
 src/lib/gallery-anthropic-skill.ts            |   3 +
 src/lib/gallery-catalog.ts                    |  15 ++
 src/lib/gallery-model-order.ts                |   4 +-
 src/lib/gallery-registry.ts                   | 122 ------------
 src/lib/gallery-types.ts                      |   8 +
 tests/compare-routes.spec.ts                  |  39 ++++
 35 files changed, 750 insertions(+), 592 deletions(-)
 create mode 100644 scripts/generate-variant-routes.mjs
 delete mode 100644 src/app/[group]/[model]/[iteration]/page.tsx
 delete mode 100644 src/app/preview/[group]/[model]/[iteration]/page.tsx
 create mode 100644 src/components/gallery/gallery-archive-grid.tsx
 delete mode 100644 src/components/gallery/gallery-theme-provider.tsx
 create mode 100644 src/lib/compare-server.ts
 create mode 100644 src/lib/gallery-catalog.ts
 delete mode 100644 src/lib/gallery-registry.ts

diff --git a/.gitignore b/.gitignore
index 12f73ae..e8406ef 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,6 @@ playwright-report/
 .agents/
 .claude/
 .windsurf/
+
+# Deterministic model-specific Next.js route entries generated before dev/build.
+/src/app/(generated-variant-routes)/
diff --git a/next.config.ts b/next.config.ts
index 96ee744..0c2d8ca 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -2,8 +2,45 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   allowedDevOrigins: ["127.0.0.1"],
+  poweredByHeader: false,
   images: {
-    unoptimized: true,
+    deviceSizes: [640, 750, 828, 1080, 1200, 1600, 1920],
+    imageSizes: [32, 48, 64, 96, 128, 256, 384],
+    minimumCacheTTL: 86_400,
+    qualities: [70, 75],
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "picsum.photos",
+      },
+    ],
+  },
+  experimental: {
+    optimizePackageImports: ["@phosphor-icons/react"],
+  },
+  async headers() {
+    return [
+      {
+        // Compare output is deterministic for the full URL and contains no user data.
+        // Cache it at Vercel's edge while keeping the browser response revalidated.
+        source: "/compare",
+        headers: [
+          {
+            key: "Vercel-CDN-Cache-Control",
+            value: "public, s-maxage=31536000, stale-while-revalidate=86400",
+          },
+        ],
+      },
+      ...["/gallery-previews/:path*", "/variants/:path*"].map((source) => ({
+        source,
+        headers: [
+          {
+            key: "Cache-Control",
+            value: "public, max-age=86400, stale-while-revalidate=604800",
+          },
+        ],
+      })),
+    ];
   },
 };
 
diff --git a/package.json b/package.json
index 70a151c..cc0b446 100644
--- a/package.json
+++ b/package.json
@@ -5,12 +5,13 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "predev": "node scripts/scope-variant-css.mjs",
-    "prebuild": "node scripts/scope-variant-css.mjs",
+    "predev": "node scripts/generate-variant-routes.mjs && node scripts/scope-variant-css.mjs",
+    "prebuild": "node scripts/generate-variant-routes.mjs && node scripts/scope-variant-css.mjs",
     "start": "next start",
     "lint": "eslint",
     "capture-previews": "node scripts/capture-previews.mjs",
     "scope:variant-css": "node scripts/scope-variant-css.mjs",
+    "generate:variant-routes": "node scripts/generate-variant-routes.mjs",
     "test:routes": "playwright test tests/gallery-routes.spec.ts",
     "test:visual": "playwright test tests/gallery-visual-smoke.spec.ts"
   },
diff --git a/scripts/generate-variant-routes.mjs b/scripts/generate-variant-routes.mjs
new file mode 100644
index 0000000..fd35676
--- /dev/null
+++ b/scripts/generate-variant-routes.mjs
@@ -0,0 +1,92 @@
+import { readdir, rm, mkdir, writeFile } from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const projectRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+const variantsRoot = path.join(projectRoot, "src", "variants");
+const appRoot = path.join(projectRoot, "src", "app");
+const outputRoot = path.join(appRoot, "(generated-variant-routes)");
+const nextRoot = path.join(projectRoot, ".next");
+
+if (path.dirname(outputRoot) !== appRoot) {
+  throw new Error(`Refusing to generate routes outside the app directory: ${outputRoot}`);
+}
+
+const iterationIds = ["1", "2", "3", "4", "5"];
+
+function pageSource({ group, model, preview }) {
+  const componentName = preview ? "PreviewIterationPage" : "IterationPage";
+  return `import "./variant-tailwind.css";
+import { GalleryIterationView } from "@/components/gallery/gallery-iteration-view";
+import variantModule from "@/variants/${group}/${model}";
+
+export const dynamicParams = false;
+
+export function generateStaticParams() {
+  return ${JSON.stringify(iterationIds)}.map((iteration) => ({ iteration }));
+}
+
+export default async function ${componentName}({
+  params,
+}: {
+  params: Promise<{ iteration: string }>;
+}) {
+  const { iteration } = await params;
+  return (
+    <GalleryIterationView
+      group=${JSON.stringify(group)}
+      model=${JSON.stringify(model)}
+      iteration={iteration}
+      preview={${preview}}
+      variantModule={variantModule}
+    />
+  );
+}
+`;
+}
+
+await rm(outputRoot, { recursive: true, force: true });
+// Route type validators are incremental and can retain imports for the two
+// generic routes this generator replaces.
+await Promise.all(
+  [path.join(nextRoot, "types"), path.join(nextRoot, "dev", "types")].map((target) =>
+    rm(target, { recursive: true, force: true }),
+  ),
+);
+
+let generatedPages = 0;
+const groups = await readdir(variantsRoot, { withFileTypes: true });
+for (const groupEntry of groups) {
+  if (!groupEntry.isDirectory()) continue;
+  const group = groupEntry.name;
+  const models = await readdir(path.join(variantsRoot, group), { withFileTypes: true });
+
+  for (const modelEntry of models) {
+    if (!modelEntry.isDirectory()) continue;
+    const model = modelEntry.name;
+    const variantDir = path.join(variantsRoot, group, model);
+    const files = await readdir(variantDir);
+    if (!files.includes("index.tsx")) continue;
+
+    for (const preview of [false, true]) {
+      const routeDir = preview
+        ? path.join(outputRoot, "preview", group, model, "[iteration]")
+        : path.join(outputRoot, group, model, "[iteration]");
+      await mkdir(routeDir, { recursive: true });
+      await writeFile(
+        path.join(routeDir, "page.tsx"),
+        pageSource({ group, model, preview }),
+        "utf8",
+      );
+      const relativeVariantDir = path.relative(routeDir, variantDir).split(path.sep).join("/");
+      await writeFile(
+        path.join(routeDir, "variant-tailwind.css"),
+        `@layer theme, utilities;\n@import "tailwindcss/theme.css" layer(theme);\n@import "tailwindcss/utilities.css" layer(utilities) source(none);\n@source "${relativeVariantDir}";\n`,
+        "utf8",
+      );
+      generatedPages += 1;
+    }
+  }
+}
+
+console.log(`Generated ${generatedPages} model-specific route modules in ${path.relative(projectRoot, outputRoot)}`);
diff --git a/src/app/[group]/[model]/[iteration]/page.tsx b/src/app/[group]/[model]/[iteration]/page.tsx
deleted file mode 100644
index 97819a8..0000000
--- a/src/app/[group]/[model]/[iteration]/page.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { GalleryIterationView } from "@/components/gallery/gallery-iteration-view";
-import { getStaticGalleryIterationParams } from "@/lib/gallery-static-params";
-
-export const dynamicParams = false;
-
-export function generateStaticParams() {
-  return getStaticGalleryIterationParams();
-}
-
-export default async function IterationPage({
-  params,
-}: {
-  params: Promise<{ group: string; model: string; iteration: string }>;
-}) {
-  const { group, model, iteration } = await params;
-  return <GalleryIterationView group={group} model={model} iteration={iteration} preview={false} />;
-}
diff --git a/src/app/[group]/[model]/page.tsx b/src/app/[group]/[model]/page.tsx
index d4d193e..6a85403 100644
--- a/src/app/[group]/[model]/page.tsx
+++ b/src/app/[group]/[model]/page.tsx
@@ -2,7 +2,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { GalleryBreadcrumb, IterationLinks } from "@/components/gallery/gallery-shell";
-import { buildCompareHrefForSelection } from "@/lib/compare";
+import { buildCompareHrefForSelection } from "@/lib/compare-server";
 import { getGalleryEntry } from "@/lib/gallery-manifest";
 import { getStaticGalleryModelParams } from "@/lib/gallery-static-params";
 import { buildVariantHref, isGalleryGroup } from "@/lib/gallery-paths";
@@ -69,6 +69,9 @@ export default async function ModelPage({
                   src={iteration.thumbnailPath}
                   alt={`${entry.modelLabel} iteration ${iteration.id}`}
                   fill
+                  sizes="(max-width: 639px) calc(100vw - 2rem), (max-width: 1279px) calc(50vw - 2.5rem), 24rem"
+                  quality={70}
+                  preload={iteration.id === entry.defaultIteration}
                   className="object-cover"
                 />
               </div>
diff --git a/src/app/compare/page.tsx b/src/app/compare/page.tsx
index 0c0f65a..40b31f3 100644
--- a/src/app/compare/page.tsx
+++ b/src/app/compare/page.tsx
@@ -1,6 +1,9 @@
 import { notFound, redirect } from "next/navigation";
 import { ComparePage } from "@/components/compare/compare-page";
-import { buildCompareHref, DEFAULT_COMPARE_STATE, parseCompareSearchParams } from "@/lib/compare";
+import { GalleryRankingsNav } from "@/components/gallery/gallery-rankings-nav";
+import { buildCompareHref, DEFAULT_COMPARE_STATE } from "@/lib/compare";
+import { parseCompareSearchParams } from "@/lib/compare-server";
+import { galleryCatalog } from "@/lib/gallery-catalog";
 
 export default async function CompareRoutePage({
   searchParams,
@@ -18,5 +21,10 @@ export default async function CompareRoutePage({
     notFound();
   }
 
-  return <ComparePage initialState={compareState} />;
+  return (
+    <>
+      <GalleryRankingsNav current="compare" />
+      <ComparePage initialState={compareState} catalog={galleryCatalog} />
+    </>
+  );
 }
diff --git a/src/app/experiments/page.tsx b/src/app/experiments/page.tsx
index d0a20fe..17f73af 100644
--- a/src/app/experiments/page.tsx
+++ b/src/app/experiments/page.tsx
@@ -195,7 +195,7 @@ const iterations = [
 export default function ExperimentsPage() {
   return (
     <>
-      <GalleryRankingsNav />
+      <GalleryRankingsNav current="experiments" />
       <main className="mx-auto max-w-6xl px-5 py-16 sm:px-8 sm:py-20">
         <header className="max-w-3xl">
           <p className="text-sm font-medium text-[var(--gallery-accent)]">Exploration · not implemented yet</p>
diff --git a/src/app/globals.css b/src/app/globals.css
index 8d702d2..36bec76 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,4 +1,6 @@
-@import "tailwindcss";
+@import "tailwindcss" source(none);
+@source ".";
+@source "../components";
 
 @custom-variant dark (&:where(.dark, .dark *));
 
@@ -403,6 +405,29 @@ html {
   animation: spin-slow 28s linear infinite;
 }
 
+@keyframes gallery-toast-enter {
+  from {
+    opacity: 0;
+    translate: 0 0.35rem;
+    scale: 0.97;
+  }
+  to {
+    opacity: 1;
+    translate: 0 0;
+    scale: 1;
+  }
+}
+
+.gallery-toast-enter {
+  animation: gallery-toast-enter 160ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+/* Skip paint/layout work for gallery groups well below the viewport. */
+.gallery-group-section {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 72rem;
+}
+
 @media (prefers-reduced-motion: reduce) {
   html {
     scroll-behavior: auto;
diff --git a/src/app/lab-guess/page.tsx b/src/app/lab-guess/page.tsx
index 7a6faf4..de027b2 100644
--- a/src/app/lab-guess/page.tsx
+++ b/src/app/lab-guess/page.tsx
@@ -1,11 +1,12 @@
 import { GalleryRankingsNav } from "@/components/gallery/gallery-rankings-nav";
 import { ModelLabWordle } from "@/components/game/model-lab-wordle";
+import { galleryCatalog } from "@/lib/gallery-catalog";
 
 export default function LabGuessPage() {
   return (
     <>
-      <GalleryRankingsNav />
-      <ModelLabWordle />
+      <GalleryRankingsNav current="lab-guess" />
+      <ModelLabWordle catalog={galleryCatalog} />
     </>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c4f0763..f9fcb74 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
 import type { ReactNode } from "react";
 import { GeistSans } from "geist/font/sans";
-import { GalleryThemeProvider } from "@/components/gallery/gallery-theme-provider";
 import { galleryThemeInitScript } from "@/lib/gallery-theme";
 import "./globals.css";
 
@@ -20,9 +19,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
       <head>
         <script dangerouslySetInnerHTML={{ __html: galleryThemeInitScript }} />
       </head>
-      <body>
-        <GalleryThemeProvider>{children}</GalleryThemeProvider>
-      </body>
+      <body>{children}</body>
     </html>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index aff3d10..377d7ff 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -22,7 +22,7 @@ export default function HomePage() {
 
   return (
     <>
-      <GalleryRankingsNav />
+      <GalleryRankingsNav current="gallery" />
       <main className="mx-auto max-w-[98rem] px-4 py-16 sm:px-6 sm:py-20 lg:px-4">
         <header className="max-w-2xl">
           <h1 className="text-3xl font-medium tracking-tight text-[var(--gallery-text-primary)] sm:text-4xl">
@@ -73,12 +73,17 @@ export default function HomePage() {
         </header>
 
         <div className="mt-10 space-y-12">
-          {groups.map((group) => {
+          {groups.map((group, groupIndex) => {
             const entries = sortGalleryEntriesForHome(
               galleryManifest.filter((entry) => entry.group === group),
             );
             return (
-              <GalleryGroupSection key={group} group={group} entries={entries} />
+              <GalleryGroupSection
+                key={group}
+                group={group}
+                entries={entries}
+                preloadFirstImage={groupIndex === 0}
+              />
             );
           })}
         </div>
diff --git a/src/app/preview/[group]/[model]/[iteration]/page.tsx b/src/app/preview/[group]/[model]/[iteration]/page.tsx
deleted file mode 100644
index 7a93889..0000000
--- a/src/app/preview/[group]/[model]/[iteration]/page.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { GalleryIterationView } from "@/components/gallery/gallery-iteration-view";
-import { getStaticGalleryIterationParams } from "@/lib/gallery-static-params";
-
-export const dynamicParams = false;
-
-export function generateStaticParams() {
-  return getStaticGalleryIterationParams();
-}
-
-export default async function PreviewIterationPage({
-  params,
-}: {
-  params: Promise<{ group: string; model: string; iteration: string }>;
-}) {
-  const { group, model, iteration } = await params;
-  return <GalleryIterationView group={group} model={model} iteration={iteration} preview />;
-}
diff --git a/src/app/rankings/page.tsx b/src/app/rankings/page.tsx
index c663ba9..a961a7b 100644
--- a/src/app/rankings/page.tsx
+++ b/src/app/rankings/page.tsx
@@ -9,7 +9,7 @@ import { getRankingPreviewPath, modelRankings } from "@/lib/model-rankings";
 export default function RankingsPage() {
   return (
     <>
-      <GalleryRankingsNav />
+      <GalleryRankingsNav current="rankings" />
       <main className="mx-auto max-w-3xl px-5 pb-20 pt-16 sm:px-8 sm:pb-24 sm:pt-20">
       <header className="max-w-2xl">
         <h1 className="text-3xl font-medium tracking-tight text-[var(--gallery-text-primary)] sm:text-4xl">
@@ -63,6 +63,8 @@ export default function RankingsPage() {
                       fill
                       className="object-cover"
                       sizes="(max-width: 48rem) 100vw, 48rem"
+                      quality={70}
+                      preload={ranking.rank === 1}
                     />
                   ) : null}
                 </Link>
diff --git a/src/components/compare/compare-page.tsx b/src/components/compare/compare-page.tsx
index 1cad491..61c2955 100644
--- a/src/components/compare/compare-page.tsx
+++ b/src/components/compare/compare-page.tsx
@@ -1,12 +1,9 @@
 "use client";
 
 import clsx from "clsx";
-import { useRouter } from "next/navigation";
-import { AnimatePresence, motion } from "framer-motion";
 import { ArrowLeftRight, Link2 } from "lucide-react";
-import { useEffect, useRef, useState, useTransition } from "react";
+import { useEffect, useRef, useState } from "react";
 import { CompareGroupSelect, CompareModelSelect } from "@/components/compare/compare-selects";
-import { GalleryRankingsNav } from "@/components/gallery/gallery-rankings-nav";
 import {
   buildCompareHref,
   compareGroupOrder,
@@ -15,45 +12,57 @@ import {
   type CompareSelection,
   type CompareState,
 } from "@/lib/compare";
-import { getGalleryEntry } from "@/lib/gallery-manifest";
 import { buildPreviewHref } from "@/lib/gallery-paths";
-import type { GalleryGroupSlug, IterationId, ModelSlug } from "@/lib/gallery-types";
+import type {
+  GalleryCatalogEntry,
+  GalleryGroupSlug,
+  IterationId,
+  ModelSlug,
+} from "@/lib/gallery-types";
 
 const ITERATION_OPTIONS = ["1", "2", "3", "4", "5"] as const satisfies readonly IterationId[];
 
-function getGroupLabel(group: GalleryGroupSlug): string {
-  return getModelsForGroup(group)[0]?.groupLabel ?? group;
+function getGroupLabel(
+  catalog: readonly GalleryCatalogEntry[],
+  group: GalleryGroupSlug,
+): string {
+  return getModelsForGroup(catalog, group)[0]?.groupLabel ?? group;
 }
 
 function resolveSelection(
+  catalog: readonly GalleryCatalogEntry[],
   group: GalleryGroupSlug,
   model: ModelSlug,
   iteration: IterationId,
 ): CompareSelection {
-  const entry = getGalleryEntry(group, model);
+  const entry = catalog.find((item) => item.group === group && item.model === model);
   if (!entry) {
-    return getDefaultSelectionForGroup(group) ?? { group, model, iteration: "1" };
+    return getDefaultSelectionForGroup(catalog, group) ?? { group, model, iteration: "1" };
   }
 
   return {
     group: entry.group,
     model: entry.model,
-    iteration: entry.iterations.some((item) => item.id === iteration) ? iteration : "1",
+    iteration: entry.iterations.includes(iteration) ? iteration : "1",
   };
 }
 
 function ComparePanel({
   side,
+  catalog,
   selection,
   onSelectionChange,
 }: {
   side: "left" | "right";
+  catalog: readonly GalleryCatalogEntry[];
   selection: CompareSelection;
   onSelectionChange: (selection: CompareSelection) => void;
 }) {
   const sideLabel = side === "left" ? "Left" : "Right";
 
-  const entry = getGalleryEntry(selection.group, selection.model);
+  const entry = catalog.find(
+    (item) => item.group === selection.group && item.model === selection.model,
+  );
   if (!entry) {
     return null;
   }
@@ -84,7 +93,9 @@ function ComparePanel({
                 key={iteration}
                 type="button"
                 onClick={() =>
-                  onSelectionChange(resolveSelection(selection.group, selection.model, iteration))
+                  onSelectionChange(
+                    resolveSelection(catalog, selection.group, selection.model, iteration),
+                  )
                 }
                 className={`gallery-variant-switcher__iteration inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-[11px] font-medium tabular-nums leading-none transition-colors ${
                   active
@@ -101,6 +112,7 @@ function ComparePanel({
         <iframe
           title={iframeTitle}
           src={buildPreviewHref(selection.group, selection.model, selection.iteration)}
+          loading={side === "right" ? "lazy" : "eager"}
           className="block h-[min(72dvh,760px)] w-full bg-white lg:h-[calc(100dvh-10.25rem)]"
         />
       </div>
@@ -110,16 +122,18 @@ function ComparePanel({
 
 function CompareSideControls({
   side,
+  catalog,
   selection,
   onSelectionChange,
 }: {
   side: "left" | "right";
+  catalog: readonly GalleryCatalogEntry[];
   selection: CompareSelection;
   onSelectionChange: (selection: CompareSelection) => void;
 }) {
   const [openMenu, setOpenMenu] = useState<"group" | "model" | null>(null);
   const controlsRef = useRef<HTMLDivElement>(null);
-  const models = getModelsForGroup(selection.group);
+  const models = getModelsForGroup(catalog, selection.group);
   const sideLabel = side === "left" ? "Left" : "Right";
 
   useEffect(() => {
@@ -157,19 +171,21 @@ function CompareSideControls({
         <CompareGroupSelect
           value={selection.group}
           onChange={(nextGroup) => {
-            const nextModels = getModelsForGroup(nextGroup);
+            const nextModels = getModelsForGroup(catalog, nextGroup);
             const nextModel =
               nextModels.find((item) => item.model === selection.model)?.model ??
-              getDefaultSelectionForGroup(nextGroup)?.model;
+              getDefaultSelectionForGroup(catalog, nextGroup)?.model;
 
             if (!nextModel) {
               return;
             }
 
-            onSelectionChange(resolveSelection(nextGroup, nextModel, selection.iteration));
+            onSelectionChange(
+              resolveSelection(catalog, nextGroup, nextModel, selection.iteration),
+            );
           }}
           groups={compareGroupOrder}
-          getLabel={getGroupLabel}
+          getLabel={(group) => getGroupLabel(catalog, group)}
           open={openMenu === "group"}
           setOpen={(next) => setOpenMenu(next ? "group" : null)}
           showLabel={false}
@@ -179,7 +195,9 @@ function CompareSideControls({
           models={models}
           value={selection.model}
           onChange={(nextModel) => {
-            onSelectionChange(resolveSelection(selection.group, nextModel, selection.iteration));
+            onSelectionChange(
+              resolveSelection(catalog, selection.group, nextModel, selection.iteration),
+            );
           }}
           open={openMenu === "model"}
           setOpen={(next) => setOpenMenu(next ? "model" : null)}
@@ -190,12 +208,17 @@ function CompareSideControls({
   );
 }
 
-export function ComparePage({ initialState }: { initialState: CompareState }) {
-  const router = useRouter();
-  const [isPending, startTransition] = useTransition();
+export function ComparePage({
+  initialState,
+  catalog,
+}: {
+  initialState: CompareState;
+  catalog: readonly GalleryCatalogEntry[];
+}) {
+  const [compareState, setCompareState] = useState(initialState);
   const [copied, setCopied] = useState(false);
   const [copyFlash, setCopyFlash] = useState(false);
-  const currentHref = buildCompareHref(initialState);
+  const currentHref = buildCompareHref(compareState);
 
   const updateState = (nextState: CompareState) => {
     const nextHref = buildCompareHref(nextState);
@@ -203,15 +226,16 @@ export function ComparePage({ initialState }: { initialState: CompareState }) {
       return;
     }
 
-    startTransition(() => {
-      router.replace(nextHref, { scroll: false });
-    });
+    setCompareState(nextState);
+    // Next.js integrates the native History API with its router. This keeps the
+    // URL shareable without waiting for a new server-rendered compare payload.
+    window.history.replaceState(null, "", nextHref);
   };
 
   const swapSelections = () => {
     updateState({
-      left: initialState.right,
-      right: initialState.left,
+      left: compareState.right,
+      right: compareState.left,
     });
   };
 
@@ -232,8 +256,6 @@ export function ComparePage({ initialState }: { initialState: CompareState }) {
       <h1 className="fixed top-5 left-5 z-[110] hidden h-11 items-center text-2xl font-medium tracking-tight text-[var(--gallery-text-primary)] sm:top-6 sm:left-6 sm:text-3xl lg:flex">
         Compare
       </h1>
-      <GalleryRankingsNav />
-
       <main className="flex min-h-screen flex-col px-3 pb-4 pt-[5.25rem] sm:px-5 lg:px-6">
         <header className="relative z-50 mb-3 w-full">
           <div className="grid min-w-0 gap-3 border-b border-[var(--gallery-border)] pb-3 lg:grid-cols-2 lg:items-end lg:gap-0">
@@ -246,10 +268,11 @@ export function ComparePage({ initialState }: { initialState: CompareState }) {
             <div className="min-w-0 lg:pr-2">
               <CompareSideControls
                 side="left"
-                selection={initialState.left}
+                catalog={catalog}
+                selection={compareState.left}
                 onSelectionChange={(selection) =>
                   updateState({
-                    ...initialState,
+                    ...compareState,
                     left: selection,
                   })
                 }
@@ -260,10 +283,11 @@ export function ComparePage({ initialState }: { initialState: CompareState }) {
               <div className="min-w-0 flex-1">
                 <CompareSideControls
                   side="right"
-                  selection={initialState.right}
+                  catalog={catalog}
+                  selection={compareState.right}
                   onSelectionChange={(selection) =>
                     updateState({
-                      ...initialState,
+                      ...compareState,
                       right: selection,
                     })
                   }
@@ -271,43 +295,32 @@ export function ComparePage({ initialState }: { initialState: CompareState }) {
               </div>
 
               <div className="flex shrink-0 items-center gap-2">
-                <motion.button
+                <button
                   type="button"
                   onClick={swapSelections}
-                  disabled={isPending}
                   aria-label="Swap sides"
                   title="Swap sides"
-                  whileTap={{ scale: 0.9 }}
-                  transition={{ type: "spring", stiffness: 520, damping: 28 }}
-                  className="inline-flex size-9 cursor-pointer items-center justify-center rounded-md border border-[var(--gallery-border)] bg-[var(--gallery-surface)] text-[var(--gallery-text-secondary)] shadow-[var(--gallery-shadow-sm)] transition-colors hover:border-[var(--gallery-divider-strong)] hover:bg-[var(--gallery-surface-subtle)] hover:text-[var(--gallery-text-primary)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+                  className="inline-flex size-9 cursor-pointer items-center justify-center rounded-md border border-[var(--gallery-border)] bg-[var(--gallery-surface)] text-[var(--gallery-text-secondary)] shadow-[var(--gallery-shadow-sm)] transition-[color,background-color,border-color,transform] hover:border-[var(--gallery-divider-strong)] hover:bg-[var(--gallery-surface-subtle)] hover:text-[var(--gallery-text-primary)] active:scale-90"
                 >
                   <ArrowLeftRight className="size-4 opacity-80" aria-hidden="true" />
-                </motion.button>
+                </button>
                 <div className="relative z-[200]">
-                  <AnimatePresence>
-                    {copied ? (
-                      <motion.div
-                        role="status"
-                        aria-live="polite"
-                        initial={{ opacity: 0, y: 8, scale: 0.96 }}
-                        animate={{ opacity: 1, y: 0, scale: 1 }}
-                        exit={{ opacity: 0, y: 4, scale: 0.98 }}
-                        transition={{ type: "spring", stiffness: 420, damping: 28 }}
-                        className="pointer-events-none absolute bottom-full left-1/2 z-[200] mb-2 -translate-x-1/2 whitespace-nowrap rounded-lg border border-[var(--gallery-border)] bg-[var(--gallery-tooltip-bg)] px-4 py-2.5 text-sm font-medium text-[var(--gallery-text-primary)] shadow-[var(--gallery-shadow-lg)] backdrop-blur-md"
-                      >
-                        Link copied
-                      </motion.div>
-                    ) : null}
-                  </AnimatePresence>
-                  <motion.button
+                  {copied ? (
+                    <div
+                      role="status"
+                      aria-live="polite"
+                      className="gallery-toast-enter pointer-events-none absolute bottom-full left-1/2 z-[200] mb-2 -translate-x-1/2 whitespace-nowrap rounded-lg border border-[var(--gallery-border)] bg-[var(--gallery-tooltip-bg)] px-4 py-2.5 text-sm font-medium text-[var(--gallery-text-primary)] shadow-[var(--gallery-shadow-lg)] backdrop-blur-md"
+                    >
+                      Link copied
+                    </div>
+                  ) : null}
+                  <button
                     type="button"
                     onClick={copyLink}
                     aria-label={copied ? "Copied" : "Copy link"}
                     title={copied ? "Copied" : "Copy link"}
-                    whileTap={{ scale: 0.9 }}
-                    transition={{ type: "spring", stiffness: 520, damping: 28 }}
                     className={clsx(
-                      "inline-flex size-9 cursor-pointer items-center justify-center rounded-md border shadow-[var(--gallery-shadow-sm)] transition-colors duration-200",
+                      "inline-flex size-9 cursor-pointer items-center justify-center rounded-md border shadow-[var(--gallery-shadow-sm)] transition-[color,background-color,border-color,transform] duration-200 active:scale-90",
                       copyFlash
                         ? "border-[var(--gallery-accent)] bg-[color-mix(in_srgb,var(--gallery-accent)_22%,var(--gallery-accent-hover-mix))] text-[var(--gallery-accent)]"
                         : "border-[var(--gallery-border)] bg-[var(--gallery-surface)] text-[var(--gallery-text-secondary)] hover:border-[var(--gallery-divider-strong)] hover:bg-[var(--gallery-surface-subtle)] hover:text-[var(--gallery-text-primary)]",
@@ -317,7 +330,7 @@ export function ComparePage({ initialState }: { initialState: CompareState }) {
                       className={clsx("size-4", copyFlash ? "opacity-100" : "opacity-80")}
                       aria-hidden="true"
                     />
-                  </motion.button>
+                  </button>
                 </div>
               </div>
             </div>
@@ -327,20 +340,22 @@ export function ComparePage({ initialState }: { initialState: CompareState }) {
         <div className="grid min-h-0 flex-1 gap-12 lg:grid-cols-2 lg:gap-0">
           <ComparePanel
             side="left"
-            selection={initialState.left}
+            catalog={catalog}
+            selection={compareState.left}
             onSelectionChange={(selection) =>
               updateState({
-                ...initialState,
+                ...compareState,
                 left: selection,
               })
             }
           />
           <ComparePanel
             side="right"
-            selection={initialState.right}
+            catalog={catalog}
+            selection={compareState.right}
             onSelectionChange={(selection) =>
               updateState({
-                ...initialState,
+                ...compareState,
                 right: selection,
               })
             }
diff --git a/src/components/compare/compare-selects.tsx b/src/components/compare/compare-selects.tsx
index 6d4fda3..2a769eb 100644
--- a/src/components/compare/compare-selects.tsx
+++ b/src/components/compare/compare-selects.tsx
@@ -4,7 +4,7 @@ import clsx from "clsx";
 import { ChevronDown, Code2, Layers, Sparkles } from "lucide-react";
 import { useId } from "react";
 import { ModelBrandLogo } from "@/components/gallery/model-brand-logo";
-import type { GalleryEntry, GalleryGroupSlug, ModelSlug } from "@/lib/gallery-types";
+import type { GalleryCatalogEntry, GalleryGroupSlug, ModelSlug } from "@/lib/gallery-types";
 
 const GROUP_ICONS: Record<GalleryGroupSlug, typeof Sparkles> = {
   "with-design-skill": Sparkles,
@@ -118,7 +118,7 @@ export function CompareModelSelect({
   setOpen,
   showLabel = true,
 }: {
-  models: GalleryEntry[];
+  models: readonly GalleryCatalogEntry[];
   value: ModelSlug;
   onChange: (value: ModelSlug) => void;
   open: boolean;
diff --git a/src/components/gallery/gallery-archive-grid.tsx b/src/components/gallery/gallery-archive-grid.tsx
new file mode 100644
index 0000000..32bcd76
--- /dev/null
+++ b/src/components/gallery/gallery-archive-grid.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import { Fragment, useState, type ReactNode } from "react";
+
+type ArchiveGridItem = {
+  key: string;
+  archived: boolean;
+  card: ReactNode;
+};
+
+export function GalleryArchiveGrid({
+  labelId,
+  label,
+  items,
+  hasArchived,
+}: {
+  labelId: string;
+  label: ReactNode;
+  items: ArchiveGridItem[];
+  hasArchived: boolean;
+}) {
+  const [showArchived, setShowArchived] = useState(false);
+
+  return (
+    <section
+      aria-labelledby={labelId}
+      className="gallery-group-section space-y-8"
+    >
+      <div className="flex flex-wrap items-end justify-between gap-x-6 gap-y-3">
+        <h2
+          id={labelId}
+          className="text-xl font-medium tracking-tight text-[var(--gallery-text-primary)]"
+        >
+          {label}
+        </h2>
+        {hasArchived ? (
+          <button
+            type="button"
+            onClick={() => setShowArchived((value) => !value)}
+            aria-pressed={showArchived}
+            className="inline-flex shrink-0 items-center gap-1.5 rounded-md border border-[var(--gallery-divider-strong)] bg-[var(--gallery-surface)] px-3 py-1.5 text-sm font-medium tracking-tight text-[var(--gallery-text-primary)] shadow-[var(--gallery-shadow-sm)] transition-colors hover:border-[var(--gallery-text-quaternary)] hover:bg-[var(--gallery-surface-subtle)]"
+          >
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="size-4 shrink-0 opacity-80"
+              aria-hidden="true"
+            >
+              <rect width="20" height="5" x="2" y="3" rx="1" />
+              <path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" />
+              <path d="M10 12h4" />
+            </svg>
+            <span>{showArchived ? "Hide Archived" : "Show Archived"}</span>
+          </button>
+        ) : null}
+      </div>
+      <div className="grid gap-8 sm:grid-cols-2 xl:grid-cols-4 xl:gap-6">
+        {items.map((item) =>
+          item.archived && !showArchived ? null : (
+            <Fragment key={item.key}>{item.card}</Fragment>
+          ),
+        )}
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/gallery/gallery-card.tsx b/src/components/gallery/gallery-card.tsx
index aeb3d6f..7379afd 100644
--- a/src/components/gallery/gallery-card.tsx
+++ b/src/components/gallery/gallery-card.tsx
@@ -3,12 +3,18 @@ import Link from "next/link";
 import { ArrowLeftRight } from "lucide-react";
 import { GalleryCardLeavingSoonBookmark } from "@/components/gallery/gallery-card-leaving-soon";
 import { ModelBrandLogo } from "@/components/gallery/model-brand-logo";
-import { buildCompareHrefForSelection } from "@/lib/compare";
+import { buildCompareHrefForSelection } from "@/lib/compare-server";
 import { isGalleryModelLeavingSoon } from "@/lib/gallery-archived";
 import type { GalleryEntry } from "@/lib/gallery-types";
 import { buildVariantHref } from "@/lib/gallery-paths";
 
-export function GalleryCard({ entry }: { entry: GalleryEntry }) {
+export function GalleryCard({
+  entry,
+  preload = false,
+}: {
+  entry: GalleryEntry;
+  preload?: boolean;
+}) {
   const leavingSoon = isGalleryModelLeavingSoon(entry.model);
   return (
     <article
@@ -24,6 +30,9 @@ export function GalleryCard({ entry }: { entry: GalleryEntry }) {
             src={entry.iterations[0].thumbnailPath}
             alt={`${entry.modelLabel} preview`}
             fill
+            sizes="(max-width: 639px) calc(100vw - 2rem), (max-width: 1279px) calc(50vw - 2.5rem), 24rem"
+            quality={70}
+            preload={preload}
             className="object-cover transition-opacity duration-300 group-hover:opacity-95"
           />
           {/* Box-shadow paints beneath the filled Image; overlay gradient is visible on top. */}
diff --git a/src/components/gallery/gallery-group-section.tsx b/src/components/gallery/gallery-group-section.tsx
index be7ab8d..136ac6c 100644
--- a/src/components/gallery/gallery-group-section.tsx
+++ b/src/components/gallery/gallery-group-section.tsx
@@ -1,32 +1,24 @@
-"use client";
-
-import { useId, useState } from "react";
 import Link from "next/link";
-import { Archive } from "lucide-react";
 import type { GalleryEntry, GalleryGroupSlug } from "@/lib/gallery-types";
 import {
   ANTHROPIC_FRONTEND_DESIGN_SKILL_URL,
+  TASTE_SKILL_URL,
   UNCODEXIFY_SKILL_URL,
 } from "@/lib/gallery-anthropic-skill";
 import { GalleryCard } from "@/components/gallery/gallery-card";
-import { filterGalleryEntriesForArchiveVisibility } from "@/lib/gallery-archived";
-
-function groupHasArchivedRow(entries: GalleryEntry[]): boolean {
-  const visibleWhenHidden = filterGalleryEntriesForArchiveVisibility(entries, false);
-  return visibleWhenHidden.length < entries.length;
-}
+import { GalleryArchiveGrid } from "@/components/gallery/gallery-archive-grid";
+import { isGalleryModelArchivedWithinGroup } from "@/lib/gallery-archived";
 
 export function GalleryGroupSection({
   group,
   entries,
+  preloadFirstImage = false,
 }: {
   group: GalleryGroupSlug;
   entries: GalleryEntry[];
+  preloadFirstImage?: boolean;
 }) {
-  const [showArchived, setShowArchived] = useState(false);
-  const visibleEntries = filterGalleryEntriesForArchiveVisibility(entries, showArchived);
-  const labelId = useId();
-  const hasArchived = groupHasArchivedRow(entries);
+  const labelId = `gallery-group-${group}`;
 
   const label =
     group === "with-design-skill" ? (
@@ -53,6 +45,18 @@ export function GalleryGroupSection({
           Design Skill
         </Link>
       </>
+    ) : group === "with-taste-skill" ? (
+      <>
+        With{" "}
+        <Link
+          href={TASTE_SKILL_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline decoration-2 decoration-[var(--gallery-text-tertiary)] underline-offset-[6px] transition-colors hover:text-[var(--gallery-accent)] hover:decoration-[var(--gallery-accent)]"
+        >
+          Taste Skill
+        </Link>
+      </>
     ) : group === "with-ui-sh-skill" ? (
       "With UI SH Skill"
     ) : group === "miscellaneous" ? (
@@ -71,29 +75,26 @@ export function GalleryGroupSection({
       entries[0]?.groupLabel ?? group
     );
 
+  const firstVisibleEntry = preloadFirstImage
+    ? entries.find((entry) => !isGalleryModelArchivedWithinGroup(entries, entry))
+    : undefined;
+  const items = entries.map((entry) => ({
+    key: `${entry.group}-${entry.model}`,
+    archived: isGalleryModelArchivedWithinGroup(entries, entry),
+    card: (
+      <GalleryCard
+        entry={entry}
+        preload={firstVisibleEntry === entry}
+      />
+    ),
+  }));
+
   return (
-    <section aria-labelledby={labelId} className="space-y-8">
-      <div className="flex flex-wrap items-end justify-between gap-x-6 gap-y-3">
-        <h2 id={labelId} className="text-xl font-medium tracking-tight text-[var(--gallery-text-primary)]">
-          {label}
-        </h2>
-        {hasArchived ? (
-          <button
-            type="button"
-            onClick={() => setShowArchived((v) => !v)}
-            aria-pressed={showArchived}
-            className="inline-flex shrink-0 items-center gap-1.5 rounded-md border border-[var(--gallery-divider-strong)] bg-[var(--gallery-surface)] px-3 py-1.5 text-sm font-medium tracking-tight text-[var(--gallery-text-primary)] shadow-[var(--gallery-shadow-sm)] transition-colors hover:border-[var(--gallery-text-quaternary)] hover:bg-[var(--gallery-surface-subtle)]"
-          >
-            <Archive className="size-4 shrink-0 opacity-80" aria-hidden />
-            <span>{showArchived ? "Hide Archived" : "Show Archived"}</span>
-          </button>
-        ) : null}
-      </div>
-      <div className="grid gap-8 sm:grid-cols-2 xl:grid-cols-4 xl:gap-6">
-        {visibleEntries.map((entry) => (
-          <GalleryCard key={`${entry.group}-${entry.model}`} entry={entry} />
-        ))}
-      </div>
-    </section>
+    <GalleryArchiveGrid
+      labelId={labelId}
+      label={label}
+      items={items}
+      hasArchived={items.some((item) => item.archived)}
+    />
   );
 }
diff --git a/src/components/gallery/gallery-iteration-view.tsx b/src/components/gallery/gallery-iteration-view.tsx
index c795de5..37f99a2 100644
--- a/src/components/gallery/gallery-iteration-view.tsx
+++ b/src/components/gallery/gallery-iteration-view.tsx
@@ -1,33 +1,37 @@
 import { notFound } from "next/navigation";
 import { VariantSwitcher } from "@/components/gallery/variant-header";
+import { galleryCatalog } from "@/lib/gallery-catalog";
 import { getGalleryEntry } from "@/lib/gallery-manifest";
-import { getVariantModule } from "@/lib/gallery-registry";
 import { isGalleryGroup, isIterationId } from "@/lib/gallery-paths";
+import type { VariantModule } from "@/lib/gallery-types";
 
 export function GalleryIterationView({
   group,
   model,
   iteration,
   preview,
+  variantModule,
 }: {
   group: string;
   model: string;
   iteration: string;
   preview: boolean;
+  variantModule: VariantModule;
 }) {
   if (!isGalleryGroup(group) || !isIterationId(iteration)) {
     notFound();
   }
 
   const entry = getGalleryEntry(group, model);
-  const variantModule = entry ? getVariantModule(entry.group, entry.model) : undefined;
-  if (!entry || !variantModule) {
+  if (!entry) {
     notFound();
   }
 
   return (
     <main className="min-h-screen bg-[var(--gallery-body-bg)]">
-      {!preview ? <VariantSwitcher entry={entry} iteration={iteration} /> : null}
+      {!preview ? (
+        <VariantSwitcher entry={entry} iteration={iteration} catalog={galleryCatalog} />
+      ) : null}
       <div
         className="gallery-generation"
         data-gallery-generation
diff --git a/src/components/gallery/gallery-rankings-nav.tsx b/src/components/gallery/gallery-rankings-nav.tsx
index 6fa4faf..3da0b2a 100644
--- a/src/components/gallery/gallery-rankings-nav.tsx
+++ b/src/components/gallery/gallery-rankings-nav.tsx
@@ -1,9 +1,6 @@
-"use client";
-
 import clsx from "clsx";
 import { ArrowLeftRight, BarChart3, Gamepad2, Home } from "lucide-react";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
 import { GalleryThemeToggle } from "@/components/gallery/gallery-theme-toggle";
 import { buildCompareHref, DEFAULT_COMPARE_STATE } from "@/lib/compare";
 
@@ -21,12 +18,13 @@ function navLinkClass(active: boolean) {
   );
 }
 
-export function GalleryRankingsNav() {
-  const pathname = usePathname();
-  const onRankings = pathname === "/rankings";
-  const onCompare = pathname === "/compare";
-  const onLabGuess = pathname === "/lab-guess";
-  const onGalleryHome = pathname === "/";
+type GalleryNavPage = "gallery" | "compare" | "lab-guess" | "rankings" | "experiments";
+
+export function GalleryRankingsNav({ current }: { current: GalleryNavPage }) {
+  const onRankings = current === "rankings";
+  const onCompare = current === "compare";
+  const onLabGuess = current === "lab-guess";
+  const onGalleryHome = current === "gallery";
   const homeShowsGalleryLabel = onRankings || onCompare || onLabGuess;
 
   return (
diff --git a/src/components/gallery/gallery-theme-provider.tsx b/src/components/gallery/gallery-theme-provider.tsx
deleted file mode 100644
index 49de11d..0000000
--- a/src/components/gallery/gallery-theme-provider.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-"use client";
-
-import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
-import {
-  applyGalleryTheme,
-  getStoredGalleryTheme,
-  getSystemGalleryTheme,
-  resolveGalleryTheme,
-  setGalleryTheme,
-  type GalleryTheme,
-} from "@/lib/gallery-theme";
-
-type GalleryThemeContextValue = {
-  theme: GalleryTheme;
-  setTheme: (theme: GalleryTheme) => void;
-  toggleTheme: () => void;
-};
-
-const GalleryThemeContext = createContext<GalleryThemeContextValue | null>(null);
-
-export function GalleryThemeProvider({ children }: { children: ReactNode }) {
-  // Keep SSR and the first client render in sync; resolve stored/system theme after mount.
-  const [theme, setThemeState] = useState<GalleryTheme>("light");
-  const [hasResolvedTheme, setHasResolvedTheme] = useState(false);
-
-  useEffect(() => {
-    setThemeState(resolveGalleryTheme());
-    setHasResolvedTheme(true);
-  }, []);
-
-  useEffect(() => {
-    if (!hasResolvedTheme) return;
-    applyGalleryTheme(theme);
-  }, [hasResolvedTheme, theme]);
-
-  useEffect(() => {
-    const stored = getStoredGalleryTheme();
-    if (stored) {
-      return;
-    }
-
-    const media = window.matchMedia("(prefers-color-scheme: dark)");
-    const syncWithSystem = () => {
-      setThemeState(getSystemGalleryTheme());
-    };
-
-    media.addEventListener("change", syncWithSystem);
-    return () => media.removeEventListener("change", syncWithSystem);
-  }, []);
-
-  const setTheme = (nextTheme: GalleryTheme) => {
-    setGalleryTheme(nextTheme);
-    setThemeState(nextTheme);
-  };
-
-  const toggleTheme = () => {
-    setTheme(theme === "dark" ? "light" : "dark");
-  };
-
-  return (
-    <GalleryThemeContext.Provider value={{ theme, setTheme, toggleTheme }}>
-      {children}
-    </GalleryThemeContext.Provider>
-  );
-}
-
-export function useGalleryTheme() {
-  const context = useContext(GalleryThemeContext);
-  if (!context) {
-    throw new Error("useGalleryTheme must be used within GalleryThemeProvider");
-  }
-
-  return context;
-}
diff --git a/src/components/gallery/gallery-theme-toggle.tsx b/src/components/gallery/gallery-theme-toggle.tsx
index 34e3416..e5067ef 100644
--- a/src/components/gallery/gallery-theme-toggle.tsx
+++ b/src/components/gallery/gallery-theme-toggle.tsx
@@ -2,12 +2,44 @@
 
 import clsx from "clsx";
 import { Moon, Sun } from "lucide-react";
-import { useGalleryTheme } from "@/components/gallery/gallery-theme-provider";
+import { useEffect, useState } from "react";
+import {
+  applyGalleryTheme,
+  getStoredGalleryTheme,
+  getSystemGalleryTheme,
+  setGalleryTheme,
+  type GalleryTheme,
+} from "@/lib/gallery-theme";
 
 export function GalleryThemeToggle({ className }: { className?: string }) {
-  const { theme, toggleTheme } = useGalleryTheme();
+  const [theme, setThemeState] = useState<GalleryTheme>("light");
   const isDark = theme === "dark";
 
+  useEffect(() => {
+    const syncFromDocument = () => {
+      setThemeState(document.documentElement.classList.contains("dark") ? "dark" : "light");
+    };
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const syncWithSystem = () => {
+      if (getStoredGalleryTheme()) return;
+      const nextTheme = getSystemGalleryTheme();
+      applyGalleryTheme(nextTheme);
+      setThemeState(nextTheme);
+    };
+
+    syncFromDocument();
+    media.addEventListener("change", syncWithSystem);
+    return () => media.removeEventListener("change", syncWithSystem);
+  }, []);
+
+  const toggleTheme = () => {
+    const nextTheme = document.documentElement.classList.contains("dark")
+      ? "light"
+      : "dark";
+    setGalleryTheme(nextTheme);
+    setThemeState(nextTheme);
+  };
+
   return (
     <button
       type="button"
diff --git a/src/components/gallery/generation-prompt.tsx b/src/components/gallery/generation-prompt.tsx
index 1be10f0..993a9fe 100644
--- a/src/components/gallery/generation-prompt.tsx
+++ b/src/components/gallery/generation-prompt.tsx
@@ -1,12 +1,9 @@
 "use client";
 
 import clsx from "clsx";
-import { AnimatePresence, motion } from "framer-motion";
 import { Check, Copy } from "lucide-react";
 import { useState } from "react";
 
-const FAST_SPRING = { type: "spring" as const, stiffness: 680, damping: 32 };
-
 export function GenerationPrompt({ prompt }: { prompt: string }) {
   const [copied, setCopied] = useState(false);
   const [copyFlash, setCopyFlash] = useState(false);
@@ -43,31 +40,23 @@ export function GenerationPrompt({ prompt }: { prompt: string }) {
             : "opacity-100 [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover:opacity-100 [@media(hover:hover)]:group-focus-within:opacity-100",
         )}
       >
-        <AnimatePresence>
-          {copied ? (
-            <motion.div
-              role="status"
-              aria-live="polite"
-              initial={{ opacity: 0, y: 4, scale: 0.98 }}
-              animate={{ opacity: 1, y: 0, scale: 1 }}
-              exit={{ opacity: 0, y: 2, scale: 0.99 }}
-              transition={{ ...FAST_SPRING, duration: 0.12 }}
-              className="pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 -translate-x-1/2 whitespace-nowrap rounded-lg border border-[var(--gallery-border)] bg-[var(--gallery-tooltip-bg)] px-3 py-1.5 text-xs font-medium text-[var(--gallery-text-primary)] shadow-[var(--gallery-shadow-lg)] backdrop-blur-md"
-            >
-              Prompt copied
-            </motion.div>
-          ) : null}
-        </AnimatePresence>
+        {copied ? (
+          <div
+            role="status"
+            aria-live="polite"
+            className="gallery-toast-enter pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 -translate-x-1/2 whitespace-nowrap rounded-lg border border-[var(--gallery-border)] bg-[var(--gallery-tooltip-bg)] px-3 py-1.5 text-xs font-medium text-[var(--gallery-text-primary)] shadow-[var(--gallery-shadow-lg)] backdrop-blur-md"
+          >
+            Prompt copied
+          </div>
+        ) : null}
 
-        <motion.button
+        <button
           type="button"
           onClick={copyPrompt}
           aria-label={copied ? "Copied prompt" : "Copy prompt"}
           title={copied ? "Copied" : "Copy prompt"}
-          whileTap={{ scale: 0.9 }}
-          transition={FAST_SPRING}
           className={clsx(
-            "inline-flex size-8 cursor-pointer items-center justify-center rounded-md border shadow-[var(--gallery-shadow-sm)] transition-[border-color,background-color,color,box-shadow,opacity] duration-150",
+            "inline-flex size-8 cursor-pointer items-center justify-center rounded-md border shadow-[var(--gallery-shadow-sm)] transition-[border-color,background-color,color,box-shadow,opacity,transform] duration-150 active:scale-90",
             !active &&
               "[@media(hover:hover)]:pointer-events-none [@media(hover:hover)]:group-hover:pointer-events-auto [@media(hover:hover)]:group-focus-within:pointer-events-auto",
             active
@@ -92,7 +81,7 @@ export function GenerationPrompt({ prompt }: { prompt: string }) {
               )}
             />
           </span>
-        </motion.button>
+        </button>
       </div>
     </div>
   );
diff --git a/src/components/gallery/theme-aware-logo.tsx b/src/components/gallery/theme-aware-logo.tsx
index 858e6a7..f5d3995 100644
--- a/src/components/gallery/theme-aware-logo.tsx
+++ b/src/components/gallery/theme-aware-logo.tsx
@@ -6,15 +6,42 @@ type ThemeAwareLogoProps = Omit<ImageProps, "src"> & {
   darkSrc?: string;
 };
 
-export function ThemeAwareLogo({ lightSrc, darkSrc, className, alt, ...props }: ThemeAwareLogoProps) {
+export function ThemeAwareLogo({
+  lightSrc,
+  darkSrc,
+  className,
+  alt,
+  unoptimized = true,
+  ...props
+}: ThemeAwareLogoProps) {
   if (!darkSrc || darkSrc === lightSrc) {
-    return <Image src={lightSrc} alt={alt} className={className} {...props} />;
+    return (
+      <Image
+        src={lightSrc}
+        alt={alt}
+        className={className}
+        unoptimized={unoptimized}
+        {...props}
+      />
+    );
   }
 
   return (
     <>
-      <Image src={lightSrc} alt={alt} className={clsx(className, "dark:hidden")} {...props} />
-      <Image src={darkSrc} alt={alt} className={clsx(className, "hidden dark:block")} {...props} />
+      <Image
+        src={lightSrc}
+        alt={alt}
+        className={clsx(className, "dark:hidden")}
+        unoptimized={unoptimized}
+        {...props}
+      />
+      <Image
+        src={darkSrc}
+        alt={alt}
+        className={clsx(className, "hidden dark:block")}
+        unoptimized={unoptimized}
+        {...props}
+      />
     </>
   );
 }
diff --git a/src/components/gallery/variant-header.tsx b/src/components/gallery/variant-header.tsx
index 1420f20..07c6331 100644
--- a/src/components/gallery/variant-header.tsx
+++ b/src/components/gallery/variant-header.tsx
@@ -7,9 +7,14 @@ import { useRouter } from "next/navigation";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { ModelBrandLogo } from "@/components/gallery/model-brand-logo";
 import { buildCompareHref } from "@/lib/compare";
-import { galleryManifest } from "@/lib/gallery-manifest";
 import { sortGalleryEntriesForHome } from "@/lib/gallery-model-order";
-import type { GalleryEntry, GalleryGroupSlug, IterationId, ModelSlug } from "@/lib/gallery-types";
+import type {
+  GalleryCatalogEntry,
+  GalleryEntry,
+  GalleryGroupSlug,
+  IterationId,
+  ModelSlug,
+} from "@/lib/gallery-types";
 import { buildVariantHref } from "@/lib/gallery-paths";
 
 type PickerMode = "compare" | "model" | "skill" | null;
@@ -20,11 +25,14 @@ const switcherButtonClass =
 const popoverClass =
   "absolute top-0 right-[calc(100%+0.5rem)] z-[120] flex max-h-[min(26rem,calc(100vh-3rem))] w-[min(19rem,calc(100vw-5.5rem))] flex-col gap-1.5 overflow-auto rounded-lg border border-[var(--gallery-border)] bg-[var(--gallery-body-bg)] p-2 text-[var(--gallery-text-primary)] shadow-[var(--gallery-shadow-md)] backdrop-blur-[12px]";
 
-function getGroupLabel(group: GalleryGroupSlug): string {
+function getGroupLabel(
+  catalog: readonly GalleryCatalogEntry[],
+  group: GalleryGroupSlug,
+): string {
   if (group === "with-design-skill") return "With Design Skill";
   if (group === "with-ui-sh-skill") return "With UI SH Skill";
   if (group === "without-design-skill") return "Without skill";
-  return galleryManifest.find((entry) => entry.group === group)?.groupLabel ?? group;
+  return catalog.find((entry) => entry.group === group)?.groupLabel ?? group;
 }
 
 function getPaletteTone(group: GalleryGroupSlug, available = true) {
@@ -33,9 +41,13 @@ function getPaletteTone(group: GalleryGroupSlug, available = true) {
   return "text-[var(--gallery-accent)]";
 }
 
-function getModelOptions(currentEntry: GalleryEntry, iteration: IterationId) {
-  const byModel = new Map<ModelSlug, GalleryEntry[]>();
-  for (const entry of galleryManifest) {
+function getModelOptions(
+  catalog: readonly GalleryCatalogEntry[],
+  currentEntry: GalleryEntry,
+  iteration: IterationId,
+) {
+  const byModel = new Map<ModelSlug, GalleryCatalogEntry[]>();
+  for (const entry of catalog) {
     byModel.set(entry.model, [...(byModel.get(entry.model) ?? []), entry]);
   }
 
@@ -66,15 +78,19 @@ function getModelOptions(currentEntry: GalleryEntry, iteration: IterationId) {
     });
 }
 
-function getSkillOptions(currentEntry: GalleryEntry, iteration: IterationId) {
+function getSkillOptions(
+  catalog: readonly GalleryCatalogEntry[],
+  currentEntry: GalleryEntry,
+  iteration: IterationId,
+) {
   const groups = Array.from(
-    new Map(galleryManifest.map((entry) => [entry.group, entry.groupLabel])).entries(),
-    ([group, label]) => ({ group, label: getGroupLabel(group) || label }),
+    new Map(catalog.map((entry) => [entry.group, entry.groupLabel])).entries(),
+    ([group, label]) => ({ group, label: getGroupLabel(catalog, group) || label }),
   );
 
   return groups
     .map(({ group, label }) => {
-      const targetEntry = galleryManifest.find(
+      const targetEntry = catalog.find(
         (entry) => entry.group === group && entry.model === currentEntry.model,
       );
       return {
@@ -93,9 +109,11 @@ function getSkillOptions(currentEntry: GalleryEntry, iteration: IterationId) {
 export function VariantSwitcher({
   entry,
   iteration,
+  catalog,
 }: {
   entry: GalleryEntry;
   iteration: IterationId;
+  catalog: readonly GalleryCatalogEntry[];
 }) {
   const router = useRouter();
   const [openPicker, setOpenPicker] = useState<PickerMode>(null);
@@ -104,10 +122,13 @@ export function VariantSwitcher({
   const pickerRef = useRef<HTMLElement | null>(null);
   const compareSearchRef = useRef<HTMLInputElement | null>(null);
   const modelSearchRef = useRef<HTMLInputElement | null>(null);
-  const groupLabel = getGroupLabel(entry.group);
+  const groupLabel = getGroupLabel(catalog, entry.group);
   const isWithoutSkill = entry.group === "without-design-skill";
   const paletteTone = getPaletteTone(entry.group);
-  const modelOptions = useMemo(() => getModelOptions(entry, iteration), [entry, iteration]);
+  const modelOptions = useMemo(
+    () => getModelOptions(catalog, entry, iteration),
+    [catalog, entry, iteration],
+  );
   const compareOptions = useMemo(
     () =>
       modelOptions.map((option) => ({
@@ -129,7 +150,10 @@ export function VariantSwitcher({
       })),
     [entry.group, entry.model, iteration, modelOptions],
   );
-  const skillOptions = useMemo(() => getSkillOptions(entry, iteration), [entry, iteration]);
+  const skillOptions = useMemo(
+    () => getSkillOptions(catalog, entry, iteration),
+    [catalog, entry, iteration],
+  );
   const filteredCompareOptions = useMemo(() => {
     const query = compareSearch.trim().toLowerCase();
     if (!query) return compareOptions;
@@ -149,6 +173,13 @@ export function VariantSwitcher({
   const firstAvailableCompareMatch = filteredCompareOptions.find((option) => option.href);
   const firstAvailableModelMatch = filteredModelOptions.find((option) => option.href);
 
+  const togglePicker = (picker: Exclude<PickerMode, null>) => {
+    const nextPicker = openPicker === picker ? null : picker;
+    if (nextPicker === "compare") setCompareSearch("");
+    if (nextPicker === "model") setModelSearch("");
+    setOpenPicker(nextPicker);
+  };
+
   useEffect(() => {
     if (!openPicker) return;
 
@@ -176,20 +207,19 @@ export function VariantSwitcher({
       }
 
       event.preventDefault();
-      setOpenPicker((open) => (open === "model" ? null : "model"));
+      const nextPicker = openPicker === "model" ? null : "model";
+      if (nextPicker === "model") setModelSearch("");
+      setOpenPicker(nextPicker);
     }
 
     document.addEventListener("keydown", handleCommandPaletteShortcut);
     return () => {
       document.removeEventListener("keydown", handleCommandPaletteShortcut);
     };
-  }, []);
+  }, [openPicker]);
 
   useEffect(() => {
-    if (openPicker !== "compare") {
-      setCompareSearch("");
-      return;
-    }
+    if (openPicker !== "compare") return;
 
     const focusTimer = window.setTimeout(() => {
       compareSearchRef.current?.focus();
@@ -200,10 +230,7 @@ export function VariantSwitcher({
   }, [openPicker]);
 
   useEffect(() => {
-    if (openPicker !== "model") {
-      setModelSearch("");
-      return;
-    }
+    if (openPicker !== "model") return;
 
     const focusTimer = window.setTimeout(() => {
       modelSearchRef.current?.focus();
@@ -236,7 +263,7 @@ export function VariantSwitcher({
         aria-label={`Compare ${entry.modelLabel} iteration ${iteration}`}
         aria-expanded={openPicker === "compare"}
         className={clsx(switcherButtonClass, "text-[10px] font-semibold tracking-[0.12em]")}
-        onClick={() => setOpenPicker((open) => (open === "compare" ? null : "compare"))}
+        onClick={() => togglePicker("compare")}
       >
         VS
       </button>
@@ -332,7 +359,7 @@ export function VariantSwitcher({
           className={clsx(switcherButtonClass, "group/logo")}
           aria-label={`Switch model from ${entry.modelLabel}`}
           aria-expanded={openPicker === "model"}
-          onClick={() => setOpenPicker((open) => (open === "model" ? null : "model"))}
+          onClick={() => togglePicker("model")}
         >
           <ModelBrandLogo
             model={entry.model}
@@ -348,7 +375,7 @@ export function VariantSwitcher({
           className={clsx(switcherButtonClass, "group/skill relative size-7")}
           aria-label={`Switch skill set from ${groupLabel}`}
           aria-expanded={openPicker === "skill"}
-          onClick={() => setOpenPicker((open) => (open === "skill" ? null : "skill"))}
+          onClick={() => togglePicker("skill")}
         >
           <Palette
             className={`size-3.5 shrink-0 ${paletteTone}`}
diff --git a/src/components/game/model-lab-wordle.tsx b/src/components/game/model-lab-wordle.tsx
index 649e429..c250d4e 100644
--- a/src/components/game/model-lab-wordle.tsx
+++ b/src/components/game/model-lab-wordle.tsx
@@ -1,12 +1,11 @@
 "use client";
 
 import clsx from "clsx";
-import { toBlob } from "html-to-image";
 import { Check, ChevronDown, Share2 } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { ThemeAwareLogo } from "@/components/gallery/theme-aware-logo";
-import { galleryManifest } from "@/lib/gallery-manifest";
 import { buildPreviewHref, buildVariantHref } from "@/lib/gallery-paths";
+import type { GalleryCatalogEntry } from "@/lib/gallery-types";
 import { type LabSlug, getModelLab } from "@/lib/model-labs";
 
 type Round = {
@@ -82,14 +81,14 @@ function getGuessLabel(lab: LabSlug | null | undefined): string {
   return getGuessOption(lab)?.label ?? "";
 }
 
-function createRounds(): Round[] {
-  const pool = galleryManifest.flatMap((entry) =>
+function createRounds(catalog: readonly GalleryCatalogEntry[]): Round[] {
+  const pool = catalog.flatMap((entry) =>
     entry.iterations.map((iteration) => {
       const lab = getModelLab(entry.model);
       return {
-        id: `${entry.group}-${entry.model}-${iteration.id}`,
-        previewHref: buildPreviewHref(entry.group, entry.model, iteration.id),
-        liveHref: buildVariantHref(entry.group, entry.model, iteration.id),
+        id: `${entry.group}-${entry.model}-${iteration}`,
+        previewHref: buildPreviewHref(entry.group, entry.model, iteration),
+        liveHref: buildVariantHref(entry.group, entry.model, iteration),
         answer: lab.slug,
         answerLabel: getGuessLabel(lab.slug),
         modelLabel: entry.modelLabel,
@@ -201,7 +200,11 @@ function getGuessTone(round: Round, lab: LabSlug, selectedGuess: LabSlug | null)
   return "idle";
 }
 
-export function ModelLabWordle() {
+export function ModelLabWordle({
+  catalog,
+}: {
+  catalog: readonly GalleryCatalogEntry[];
+}) {
   const [rounds, setRounds] = useState<Round[]>([]);
   const [currentRound, setCurrentRound] = useState(0);
   const [dropdownOpen, setDropdownOpen] = useState(false);
@@ -286,13 +289,13 @@ export function ModelLabWordle() {
 
   useEffect(() => {
     const initTimer = setTimeout(() => {
-      setRounds(createRounds());
+      setRounds(createRounds(catalog));
     }, 0);
 
     return () => {
       clearTimeout(initTimer);
     };
-  }, []);
+  }, [catalog]);
 
   useEffect(() => {
     return () => {
@@ -449,7 +452,7 @@ export function ModelLabWordle() {
       imageShareTimerRef.current = null;
     }
 
-    setRounds(createRounds());
+    setRounds(createRounds(catalog));
     setCurrentRound(0);
     setDropdownOpen(false);
     setSelectedGuess(null);
@@ -483,6 +486,7 @@ export function ModelLabWordle() {
   }
 
   async function buildScoreImageBlob(): Promise<Blob> {
+    const { toBlob } = await import("html-to-image");
     const card = resultCardRef.current;
     if (!card) {
       throw new Error("Score card is unavailable.");
diff --git a/src/lib/compare-server.ts b/src/lib/compare-server.ts
new file mode 100644
index 0000000..f58ff36
--- /dev/null
+++ b/src/lib/compare-server.ts
@@ -0,0 +1,114 @@
+import "server-only";
+
+import {
+  buildCompareHref,
+  DEFAULT_COMPARE_STATE,
+  type CompareSelection,
+  type CompareState,
+} from "@/lib/compare";
+import { getGalleryEntry } from "@/lib/gallery-manifest";
+import { isGalleryGroup } from "@/lib/gallery-paths";
+import type { GalleryEntry, IterationId } from "@/lib/gallery-types";
+
+type SearchParamsValue = string | string[] | undefined;
+type SearchParamsLike = URLSearchParams | Record<string, SearchParamsValue>;
+type CompareSearchParamKey =
+  | "leftGroup"
+  | "leftModel"
+  | "leftIteration"
+  | "rightGroup"
+  | "rightModel"
+  | "rightIteration";
+
+const COMPARE_PARAM_KEYS = [
+  "leftGroup",
+  "leftModel",
+  "leftIteration",
+  "rightGroup",
+  "rightModel",
+  "rightIteration",
+] as const satisfies readonly CompareSearchParamKey[];
+
+function getSingleSearchParamValue(
+  searchParams: SearchParamsLike,
+  key: CompareSearchParamKey,
+): string | null | "multiple" {
+  if (searchParams instanceof URLSearchParams) {
+    const values = searchParams.getAll(key);
+    if (values.length === 0) return null;
+    if (values.length > 1) return "multiple";
+    return values[0] ?? "";
+  }
+
+  const value = searchParams[key];
+  if (typeof value === "undefined") return null;
+  return Array.isArray(value) ? "multiple" : value;
+}
+
+function isValidIterationForEntry(
+  entry: GalleryEntry,
+  iteration: string,
+): iteration is IterationId {
+  return entry.iterations.some((item) => item.id === iteration);
+}
+
+export function parseCompareSearchParams(
+  searchParams: SearchParamsLike,
+): CompareState | "default" | "invalid" {
+  const rawValues = Object.fromEntries(
+    COMPARE_PARAM_KEYS.map((key) => [key, getSingleSearchParamValue(searchParams, key)]),
+  ) as Record<CompareSearchParamKey, string | null | "multiple">;
+
+  if (!Object.values(rawValues).some((value) => value !== null)) return "default";
+  if (Object.values(rawValues).some((value) => value === null || value === "multiple")) {
+    return "invalid";
+  }
+
+  const leftGroup = rawValues.leftGroup as string;
+  const rightGroup = rawValues.rightGroup as string;
+  if (!isGalleryGroup(leftGroup) || !isGalleryGroup(rightGroup)) return "invalid";
+
+  const leftEntry = getGalleryEntry(leftGroup, rawValues.leftModel as string);
+  const rightEntry = getGalleryEntry(rightGroup, rawValues.rightModel as string);
+  if (!leftEntry || !rightEntry) return "invalid";
+
+  const leftIteration = rawValues.leftIteration as string;
+  const rightIteration = rawValues.rightIteration as string;
+  if (
+    !isValidIterationForEntry(leftEntry, leftIteration) ||
+    !isValidIterationForEntry(rightEntry, rightIteration)
+  ) {
+    return "invalid";
+  }
+
+  return {
+    left: { group: leftEntry.group, model: leftEntry.model, iteration: leftIteration },
+    right: { group: rightEntry.group, model: rightEntry.model, iteration: rightIteration },
+  };
+}
+
+function getCounterpartSelection(selection: CompareSelection): CompareSelection | null {
+  if (selection.group === "miscellaneous") return null;
+
+  const counterpartGroup =
+    selection.group === "with-design-skill"
+      ? "without-design-skill"
+      : "with-design-skill";
+  const counterpartEntry = getGalleryEntry(counterpartGroup, selection.model);
+  if (!counterpartEntry) return null;
+
+  return {
+    group: counterpartEntry.group,
+    model: counterpartEntry.model,
+    iteration: isValidIterationForEntry(counterpartEntry, selection.iteration)
+      ? selection.iteration
+      : "1",
+  };
+}
+
+export function buildCompareHrefForSelection(left: CompareSelection): string {
+  return buildCompareHref({
+    left,
+    right: getCounterpartSelection(left) ?? DEFAULT_COMPARE_STATE.right,
+  });
+}
diff --git a/src/lib/compare.ts b/src/lib/compare.ts
index b3a7084..9acbdb1 100644
--- a/src/lib/compare.ts
+++ b/src/lib/compare.ts
@@ -1,7 +1,5 @@
-import { galleryManifest, getGalleryEntry } from "@/lib/gallery-manifest";
-import { isGalleryGroup } from "@/lib/gallery-paths";
 import type {
-  GalleryEntry,
+  GalleryCatalogEntry,
   GalleryGroupSlug,
   IterationId,
   ModelSlug,
@@ -18,25 +16,6 @@ export type CompareState = {
   right: CompareSelection;
 };
 
-type SearchParamsValue = string | string[] | undefined;
-type SearchParamsLike = URLSearchParams | Record<string, SearchParamsValue>;
-type CompareSearchParamKey =
-  | "leftGroup"
-  | "leftModel"
-  | "leftIteration"
-  | "rightGroup"
-  | "rightModel"
-  | "rightIteration";
-
-const COMPARE_PARAM_KEYS = [
-  "leftGroup",
-  "leftModel",
-  "leftIteration",
-  "rightGroup",
-  "rightModel",
-  "rightIteration",
-] as const satisfies readonly CompareSearchParamKey[];
-
 export const compareGroupOrder = [
   "with-design-skill",
   "with-taste-skill",
@@ -58,59 +37,22 @@ export const DEFAULT_COMPARE_STATE: CompareState = {
   },
 };
 
-function getSingleSearchParamValue(
-  searchParams: SearchParamsLike,
-  key: CompareSearchParamKey,
-): string | null | "multiple" {
-  if (searchParams instanceof URLSearchParams) {
-    const values = searchParams.getAll(key);
-    if (values.length === 0) {
-      return null;
-    }
-    if (values.length > 1) {
-      return "multiple";
-    }
-    return values[0] ?? "";
-  }
-
-  const value = searchParams[key];
-  if (typeof value === "undefined") {
-    return null;
-  }
-  if (Array.isArray(value)) {
-    return "multiple";
-  }
-  return value;
-}
-
-function isValidIterationForEntry(entry: GalleryEntry, iteration: string): iteration is IterationId {
-  return entry.iterations.some((item) => item.id === iteration);
-}
-
-function getDefaultEntryForGroup(group: GalleryGroupSlug): GalleryEntry | null {
-  const models = getModelsForGroup(group);
-  if (models.length === 0) {
-    return null;
-  }
-
-  return models.find((entry) => entry.model === "gpt-5.4") ?? models[0] ?? null;
+export function getModelsForGroup(
+  catalog: readonly GalleryCatalogEntry[],
+  group: GalleryGroupSlug,
+): GalleryCatalogEntry[] {
+  return catalog.filter((entry) => entry.group === group);
 }
 
-export function getModelsForGroup(group: GalleryGroupSlug): GalleryEntry[] {
-  return galleryManifest.filter((entry) => entry.group === group);
-}
-
-export function getDefaultSelectionForGroup(group: GalleryGroupSlug): CompareSelection | null {
-  const entry = getDefaultEntryForGroup(group);
-  if (!entry) {
-    return null;
-  }
-
-  return {
-    group: entry.group,
-    model: entry.model,
-    iteration: "1",
-  };
+export function getDefaultSelectionForGroup(
+  catalog: readonly GalleryCatalogEntry[],
+  group: GalleryGroupSlug,
+): CompareSelection | null {
+  const models = getModelsForGroup(catalog, group);
+  const entry = models.find((item) => item.model === "gpt-5.4") ?? models[0];
+  return entry
+    ? { group: entry.group, model: entry.model, iteration: "1" }
+    : null;
 }
 
 export function buildCompareHref(state: CompareState): string {
@@ -125,88 +67,3 @@ export function buildCompareHref(state: CompareState): string {
 
   return `/compare?${params.toString()}`;
 }
-
-export function parseCompareSearchParams(
-  searchParams: SearchParamsLike,
-): CompareState | "default" | "invalid" {
-  const rawValues = Object.fromEntries(
-    COMPARE_PARAM_KEYS.map((key) => [key, getSingleSearchParamValue(searchParams, key)]),
-  ) as Record<CompareSearchParamKey, string | null | "multiple">;
-
-  const hasAnyParams = Object.values(rawValues).some((value) => value !== null);
-  if (!hasAnyParams) {
-    return "default";
-  }
-
-  if (Object.values(rawValues).some((value) => value === null || value === "multiple")) {
-    return "invalid";
-  }
-
-  const leftGroup = rawValues.leftGroup as string;
-  const leftModel = rawValues.leftModel as string;
-  const leftIteration = rawValues.leftIteration as string;
-  const rightGroup = rawValues.rightGroup as string;
-  const rightModel = rawValues.rightModel as string;
-  const rightIteration = rawValues.rightIteration as string;
-
-  if (
-    !isGalleryGroup(leftGroup) ||
-    !isGalleryGroup(rightGroup)
-  ) {
-    return "invalid";
-  }
-
-  const leftEntry = getGalleryEntry(leftGroup, leftModel);
-  const rightEntry = getGalleryEntry(rightGroup, rightModel);
-  if (!leftEntry || !rightEntry) {
-    return "invalid";
-  }
-
-  if (
-    !isValidIterationForEntry(leftEntry, leftIteration) ||
-    !isValidIterationForEntry(rightEntry, rightIteration)
-  ) {
-    return "invalid";
-  }
-
-  return {
-    left: {
-      group: leftEntry.group,
-      model: leftEntry.model,
-      iteration: leftIteration,
-    },
-    right: {
-      group: rightEntry.group,
-      model: rightEntry.model,
-      iteration: rightIteration,
-    },
-  };
-}
-
-export function getCounterpartSelection(selection: CompareSelection): CompareSelection | null {
-  if (selection.group === "miscellaneous") {
-    return null;
-  }
-
-  const counterpartGroup =
-    selection.group === "with-design-skill" ? "without-design-skill" : "with-design-skill";
-  const counterpartEntry = getGalleryEntry(counterpartGroup, selection.model);
-  if (!counterpartEntry) {
-    return null;
-  }
-
-  return {
-    group: counterpartEntry.group,
-    model: counterpartEntry.model,
-    iteration: isValidIterationForEntry(counterpartEntry, selection.iteration)
-      ? selection.iteration
-      : "1",
-  };
-}
-
-export function buildCompareHrefForSelection(left: CompareSelection): string {
-  return buildCompareHref({
-    left,
-    right: getCounterpartSelection(left) ?? DEFAULT_COMPARE_STATE.right,
-  });
-}
diff --git a/src/lib/gallery-anthropic-skill.ts b/src/lib/gallery-anthropic-skill.ts
index 918bd44..1b55e14 100644
--- a/src/lib/gallery-anthropic-skill.ts
+++ b/src/lib/gallery-anthropic-skill.ts
@@ -2,6 +2,9 @@
 export const ANTHROPIC_FRONTEND_DESIGN_SKILL_URL =
   "https://skills.sh/anthropics/skills/frontend-design";
 
+/** Taste Skill. */
+export const TASTE_SKILL_URL = "https://www.tasteskill.dev/";
+
 /** Uncodexify skill (skills.sh). */
 export const UNCODEXIFY_SKILL_URL =
   "https://skills.sh/cyxzdev/uncodixfy/uncodixfy";
diff --git a/src/lib/gallery-catalog.ts b/src/lib/gallery-catalog.ts
new file mode 100644
index 0000000..0359310
--- /dev/null
+++ b/src/lib/gallery-catalog.ts
@@ -0,0 +1,15 @@
+import "server-only";
+
+import { galleryManifest } from "@/lib/gallery-manifest";
+import type { GalleryCatalogEntry } from "@/lib/gallery-types";
+
+/** Avoid shipping summaries, source paths, and thumbnail metadata to client pickers. */
+export const galleryCatalog: GalleryCatalogEntry[] = galleryManifest.map(
+  ({ group, groupLabel, model, modelLabel, iterations }) => ({
+    group,
+    groupLabel,
+    model,
+    modelLabel,
+    iterations: iterations.map((iteration) => iteration.id),
+  }),
+);
diff --git a/src/lib/gallery-model-order.ts b/src/lib/gallery-model-order.ts
index 1169ace..d294dec 100644
--- a/src/lib/gallery-model-order.ts
+++ b/src/lib/gallery-model-order.ts
@@ -25,7 +25,9 @@ const MODEL_HOME_ORDER: Record<ModelSlug, { familyOrder: number; tier: number }>
   "kimi-k-2.6": { familyOrder: 7, tier: 26 },
 };
 
-export function sortGalleryEntriesForHome(entries: GalleryEntry[]) {
+export function sortGalleryEntriesForHome<
+  T extends Pick<GalleryEntry, "model" | "modelLabel">,
+>(entries: readonly T[]): T[] {
   return entries.toSorted((a, b) => {
     const aOrder = MODEL_HOME_ORDER[a.model];
     const bOrder = MODEL_HOME_ORDER[b.model];
diff --git a/src/lib/gallery-registry.ts b/src/lib/gallery-registry.ts
deleted file mode 100644
index 4155240..0000000
--- a/src/lib/gallery-registry.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import type { GalleryGroupSlug, ModelSlug, VariantModule } from "@/lib/gallery-types";
-import withComposer15 from "@/variants/with-design-skill/composer-1.5";
-import withComposer20 from "@/variants/with-design-skill/composer-2.0";
-import withComposer25 from "@/variants/with-design-skill/composer-2.5";
-import withFable from "@/variants/with-design-skill/fable";
-import withGemini from "@/variants/with-design-skill/gemini";
-import withGemini35Flash from "@/variants/with-design-skill/gemini-3.5-flash";
-import withGrok45 from "@/variants/with-design-skill/grok-4.5";
-import withGpt54 from "@/variants/with-design-skill/gpt-5.4";
-import withGpt55Low from "@/variants/with-design-skill/gpt-5.5-low";
-import withGpt55High from "@/variants/with-design-skill/gpt-5.5-high";
-import withKimi from "@/variants/with-design-skill/kimi-k-2.5";
-import withKimi26 from "@/variants/with-design-skill/kimi-k-2.6";
-import withOpus from "@/variants/with-design-skill/opus-4.6";
-import withOpus47 from "@/variants/with-design-skill/opus-4.7";
-import withOpus48 from "@/variants/with-design-skill/opus-4.8";
-import withGlm5Turbo from "@/variants/with-design-skill/glm-5-turbo";
-import withGlm51 from "@/variants/with-design-skill/glm-5.1";
-import withGlm52 from "@/variants/with-design-skill/glm-5.2";
-import withSonnet5 from "@/variants/with-design-skill/sonnet-5";
-import withSol from "@/variants/with-design-skill/sol";
-import withLuna from "@/variants/with-design-skill/luna";
-import withTerra from "@/variants/with-design-skill/terra";
-import withTasteFable from "@/variants/with-taste-skill/fable";
-import withTasteGrok45 from "@/variants/with-taste-skill/grok-4.5";
-import withTasteGlm52 from "@/variants/with-taste-skill/glm-5.2";
-import withTasteSonnet5 from "@/variants/with-taste-skill/sonnet-5";
-import withTasteSol from "@/variants/with-taste-skill/sol";
-import withTasteLuna from "@/variants/with-taste-skill/luna";
-import withTasteTerra from "@/variants/with-taste-skill/terra";
-import withUiShComposer20 from "@/variants/with-ui-sh-skill/composer-2.0";
-import withUiShGpt55Low from "@/variants/with-ui-sh-skill/gpt-5.5-low";
-import withUiShGpt55High from "@/variants/with-ui-sh-skill/gpt-5.5-high";
-import withUiShOpus47 from "@/variants/with-ui-sh-skill/opus-4.7";
-import miscGpt54 from "@/variants/miscellaneous/gpt-5.4";
-import withoutComposer15 from "@/variants/without-design-skill/composer-1.5";
-import withoutComposer20 from "@/variants/without-design-skill/composer-2.0";
-import withoutComposer25 from "@/variants/without-design-skill/composer-2.5";
-import withoutFable from "@/variants/without-design-skill/fable";
-import withoutGemini from "@/variants/without-design-skill/gemini";
-import withoutGemini35Flash from "@/variants/without-design-skill/gemini-3.5-flash";
-import withoutGrok45 from "@/variants/without-design-skill/grok-4.5";
-import withoutGpt54 from "@/variants/without-design-skill/gpt-5.4";
-import withoutGpt55Low from "@/variants/without-design-skill/gpt-5.5-low";
-import withoutGpt55High from "@/variants/without-design-skill/gpt-5.5-high";
-import withoutKimi from "@/variants/without-design-skill/kimi-k-2.5";
-import withoutKimi26 from "@/variants/without-design-skill/kimi-k-2.6";
-import withoutOpus from "@/variants/without-design-skill/opus-4.6";
-import withoutOpus47 from "@/variants/without-design-skill/opus-4.7";
-import withoutOpus48 from "@/variants/without-design-skill/opus-4.8";
-import withoutGlm5Turbo from "@/variants/without-design-skill/glm-5-turbo";
-import withoutGlm51 from "@/variants/without-design-skill/glm-5.1";
-import withoutGlm52 from "@/variants/without-design-skill/glm-5.2";
-import withoutSonnet5 from "@/variants/without-design-skill/sonnet-5";
-import withoutSol from "@/variants/without-design-skill/sol";
-import withoutLuna from "@/variants/without-design-skill/luna";
-import withoutTerra from "@/variants/without-design-skill/terra";
-
-type RegistryKey = `${GalleryGroupSlug}:${ModelSlug}`;
-
-const registry: Partial<Record<RegistryKey, VariantModule>> = {
-  "with-design-skill:composer-1.5": withComposer15,
-  "with-design-skill:composer-2.0": withComposer20,
-  "with-design-skill:composer-2.5": withComposer25,
-  "with-design-skill:fable": withFable,
-  "with-design-skill:gemini": withGemini,
-  "with-design-skill:gemini-3.5-flash": withGemini35Flash,
-  "with-design-skill:grok-4.5": withGrok45,
-  "with-design-skill:gpt-5.4": withGpt54,
-  "with-design-skill:gpt-5.5-low": withGpt55Low,
-  "with-design-skill:gpt-5.5-high": withGpt55High,
-  "with-design-skill:kimi-k-2.5": withKimi,
-  "with-design-skill:kimi-k-2.6": withKimi26,
-  "with-design-skill:opus-4.6": withOpus,
-  "with-design-skill:opus-4.7": withOpus47,
-  "with-design-skill:opus-4.8": withOpus48,
-  "with-design-skill:glm-5-turbo": withGlm5Turbo,
-  "with-design-skill:glm-5.1": withGlm51,
-  "with-design-skill:glm-5.2": withGlm52,
-  "with-design-skill:sonnet-5": withSonnet5,
-  "with-design-skill:sol": withSol,
-  "with-design-skill:luna": withLuna,
-  "with-design-skill:terra": withTerra,
-  "with-taste-skill:fable": withTasteFable,
-  "with-taste-skill:grok-4.5": withTasteGrok45,
-  "with-taste-skill:glm-5.2": withTasteGlm52,
-  "with-taste-skill:sonnet-5": withTasteSonnet5,
-  "with-taste-skill:sol": withTasteSol,
-  "with-taste-skill:luna": withTasteLuna,
-  "with-taste-skill:terra": withTasteTerra,
-  "with-ui-sh-skill:composer-2.0": withUiShComposer20,
-  "with-ui-sh-skill:gpt-5.5-low": withUiShGpt55Low,
-  "with-ui-sh-skill:gpt-5.5-high": withUiShGpt55High,
-  "with-ui-sh-skill:opus-4.7": withUiShOpus47,
-  "miscellaneous:gpt-5.4": miscGpt54,
-  "without-design-skill:composer-1.5": withoutComposer15,
-  "without-design-skill:composer-2.0": withoutComposer20,
-  "without-design-skill:composer-2.5": withoutComposer25,
-  "without-design-skill:fable": withoutFable,
-  "without-design-skill:gemini": withoutGemini,
-  "without-design-skill:gemini-3.5-flash": withoutGemini35Flash,
-  "without-design-skill:grok-4.5": withoutGrok45,
-  "without-design-skill:gpt-5.4": withoutGpt54,
-  "without-design-skill:gpt-5.5-low": withoutGpt55Low,
-  "without-design-skill:gpt-5.5-high": withoutGpt55High,
-  "without-design-skill:kimi-k-2.5": withoutKimi,
-  "without-design-skill:kimi-k-2.6": withoutKimi26,
-  "without-design-skill:opus-4.6": withoutOpus,
-  "without-design-skill:opus-4.7": withoutOpus47,
-  "without-design-skill:opus-4.8": withoutOpus48,
-  "without-design-skill:glm-5-turbo": withoutGlm5Turbo,
-  "without-design-skill:glm-5.1": withoutGlm51,
-  "without-design-skill:glm-5.2": withoutGlm52,
-  "without-design-skill:sonnet-5": withoutSonnet5,
-  "without-design-skill:sol": withoutSol,
-  "without-design-skill:luna": withoutLuna,
-  "without-design-skill:terra": withoutTerra,
-};
-
-export function getVariantModule(group: GalleryGroupSlug, model: ModelSlug) {
-  return registry[`${group}:${model}`];
-}
diff --git a/src/lib/gallery-types.ts b/src/lib/gallery-types.ts
index 1b939bf..d0fff7b 100644
--- a/src/lib/gallery-types.ts
+++ b/src/lib/gallery-types.ts
@@ -51,6 +51,14 @@ export interface GalleryEntry {
   iterations: GalleryIteration[];
 }
 
+/** The small, serializable subset used by interactive model/group pickers. */
+export type GalleryCatalogEntry = Pick<
+  GalleryEntry,
+  "group" | "groupLabel" | "model" | "modelLabel"
+> & {
+  iterations: IterationId[];
+};
+
 export interface VariantRenderProps {
   entry: GalleryEntry;
   iteration: IterationId;
diff --git a/tests/compare-routes.spec.ts b/tests/compare-routes.spec.ts
index 2b5f057..7131fbf 100644
--- a/tests/compare-routes.spec.ts
+++ b/tests/compare-routes.spec.ts
@@ -16,6 +16,45 @@ test("a fully valid compare URL renders two main compare panels", async ({ page
   await expect(page.locator("iframe")).toHaveCount(2);
 });
 
+test("compare previews load only their model-specific asset graph", async ({ page }) => {
+  await page.goto(DEFAULT_COMPARE_PATH);
+  const previewFrames = page.frames().filter((frame) => frame.url().includes("/preview/"));
+  expect(previewFrames).toHaveLength(2);
+  await Promise.all(previewFrames.map((frame) => frame.waitForLoadState("load")));
+
+  const resourceCounts = await Promise.all(
+    previewFrames.map((frame) =>
+      frame.evaluate(() => performance.getEntriesByType("resource").length),
+    ),
+  );
+  expect(Math.max(...resourceCounts)).toBeLessThan(40);
+});
+
+test("compare controls update the URL without a compare-route round trip", async ({ page }) => {
+  await page.goto(DEFAULT_COMPARE_PATH);
+  await page.waitForLoadState("networkidle");
+  await page.evaluate(() => performance.clearResourceTimings());
+
+  await page
+    .getByTestId("compare-panel-left")
+    .getByRole("button", { name: "2", exact: true })
+    .click();
+
+  await expect(page).toHaveURL(/leftIteration=2/);
+  await expect(page.getByTestId("compare-panel-left").locator("iframe")).toHaveAttribute(
+    "src",
+    "/preview/with-design-skill/gpt-5.4/2",
+  );
+
+  const compareRequests = await page.evaluate(() =>
+    performance
+      .getEntriesByType("resource")
+      .map((entry) => entry.name)
+      .filter((url) => url.includes("/compare?") && url.includes("leftIteration=2")),
+  );
+  expect(compareRequests).toEqual([]);
+});
+
 test("partial compare query strings 404", async ({ page }) => {
   const response = await page.goto("/compare?leftGroup=with-design-skill&leftModel=gpt-5.4");
   expect(response?.status()).toBe(404);

From d13cc73002fa0277aa4e6672348aecfd0225a341 Mon Sep 17 00:00:00 2001
From: Dara Adedeji <76637177+SunkenInTime@users.noreply.github.com>
Date: Sun, 12 Jul 2026 15:09:01 -0700
Subject: [PATCH 2/3] Reduce gallery interaction input delay

Disable automatic Next.js prefetching for large variant link lists and render gallery cards incrementally to avoid long main-thread tasks. Add production regression coverage for prefetch storms.
---
 src/app/[group]/[model]/page.tsx          |  2 ++
 src/app/globals.css                       | 10 +++---
 src/app/rankings/page.tsx                 |  2 ++
 src/components/gallery/gallery-card.tsx   |  3 ++
 src/components/gallery/gallery-shell.tsx  |  1 +
 src/components/gallery/variant-header.tsx |  7 ++--
 src/components/ranking-notes.tsx          |  1 +
 tests/gallery-routes.spec.ts              | 43 ++++++++++++++++++++++-
 8 files changed, 59 insertions(+), 10 deletions(-)

diff --git a/src/app/[group]/[model]/page.tsx b/src/app/[group]/[model]/page.tsx
index 6a85403..88a43a4 100644
--- a/src/app/[group]/[model]/page.tsx
+++ b/src/app/[group]/[model]/page.tsx
@@ -48,6 +48,7 @@ export default async function ModelPage({
                 model: entry.model,
                 iteration: "1",
               })}
+              prefetch={false}
               className="inline-flex items-center rounded-full border border-[var(--gallery-divider-strong)] bg-[var(--gallery-surface)] px-4 py-2 text-sm font-medium text-[var(--gallery-text-secondary)] transition-colors hover:border-[var(--gallery-text-quaternary)] hover:text-[var(--gallery-text-primary)]"
               aria-label="Compare this model"
             >
@@ -97,6 +98,7 @@ export default async function ModelPage({
                     model: entry.model,
                     iteration: iteration.id,
                   })}
+                  prefetch={false}
                   className="inline-flex text-sm font-medium text-[var(--gallery-text-secondary)] underline decoration-[var(--gallery-divider-strong)] underline-offset-4 transition-colors hover:text-[var(--gallery-text-primary)] hover:decoration-[var(--gallery-text-primary)]"
                   aria-label={`Compare ${entry.modelLabel} iteration ${iteration.id}`}
                 >
diff --git a/src/app/globals.css b/src/app/globals.css
index 36bec76..a0e2870 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -113,6 +113,10 @@ body {
 
 .gallery-card-shell {
   border-color: #d4d4d4;
+  /* Render long gallery grids incrementally instead of activating a whole
+     section in one main-thread task as it enters the viewport. */
+  content-visibility: auto;
+  contain-intrinsic-size: auto 28rem;
 }
 
 .gallery-card-shell:hover {
@@ -422,12 +426,6 @@ html {
   animation: gallery-toast-enter 160ms cubic-bezier(0.22, 1, 0.36, 1) both;
 }
 
-/* Skip paint/layout work for gallery groups well below the viewport. */
-.gallery-group-section {
-  content-visibility: auto;
-  contain-intrinsic-size: auto 72rem;
-}
-
 @media (prefers-reduced-motion: reduce) {
   html {
     scroll-behavior: auto;
diff --git a/src/app/rankings/page.tsx b/src/app/rankings/page.tsx
index a961a7b..589df5c 100644
--- a/src/app/rankings/page.tsx
+++ b/src/app/rankings/page.tsx
@@ -38,6 +38,7 @@ export default function RankingsPage() {
                   <h2 className="text-xl font-medium tracking-tight text-[var(--gallery-text-primary)]">
                     <Link
                       href={href}
+                      prefetch={false}
                       className="inline-flex items-center gap-2 transition-colors hover:text-[var(--gallery-text-secondary)]"
                     >
                       <span>{ranking.modelLabel}</span>
@@ -54,6 +55,7 @@ export default function RankingsPage() {
                 </div>
                 <Link
                   href={href}
+                  prefetch={false}
                   className="relative block aspect-[16/10] overflow-hidden rounded-lg border border-[var(--gallery-border)] bg-[var(--gallery-surface-muted)]"
                 >
                   {previewPath ? (
diff --git a/src/components/gallery/gallery-card.tsx b/src/components/gallery/gallery-card.tsx
index 7379afd..8986349 100644
--- a/src/components/gallery/gallery-card.tsx
+++ b/src/components/gallery/gallery-card.tsx
@@ -23,6 +23,7 @@ export function GalleryCard({
     >
       <Link
         href={buildVariantHref(entry.group, entry.model, entry.defaultIteration)}
+        prefetch={false}
         className="block bg-[var(--gallery-surface-muted)]"
       >
         <div className="relative aspect-[16/10]">
@@ -64,6 +65,7 @@ export function GalleryCard({
               <Link
                 key={iteration.id}
                 href={buildVariantHref(entry.group, entry.model, iteration.id)}
+                prefetch={false}
                 className="inline-flex size-8 items-center justify-center rounded-md border border-[var(--gallery-border)] bg-[var(--gallery-surface-subtle)] text-xs font-medium tabular-nums leading-none text-[var(--gallery-text-secondary)] transition-colors hover:border-[var(--gallery-divider-strong)] hover:bg-[var(--gallery-surface)] hover:text-[var(--gallery-text-primary)]"
               >
                 {iteration.id}
@@ -76,6 +78,7 @@ export function GalleryCard({
               model: entry.model,
               iteration: "1",
             })}
+            prefetch={false}
             className="inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-[var(--gallery-border)] bg-[var(--gallery-surface-subtle)] text-[var(--gallery-text-secondary)] transition-colors hover:border-[var(--gallery-divider-strong)] hover:bg-[var(--gallery-surface)] hover:text-[var(--gallery-text-primary)]"
             aria-label={`Compare ${entry.groupLabel} ${entry.modelLabel}`}
             title="Compare"
diff --git a/src/components/gallery/gallery-shell.tsx b/src/components/gallery/gallery-shell.tsx
index c7907d6..ba75289 100644
--- a/src/components/gallery/gallery-shell.tsx
+++ b/src/components/gallery/gallery-shell.tsx
@@ -42,6 +42,7 @@ export function IterationLinks({
           <Link
             key={iteration.id}
             href={buildVariantHref(entry.group, entry.model, iteration.id)}
+            prefetch={false}
             className={`rounded-md px-2.5 py-1 text-sm transition-colors ${
               active
                 ? "bg-[var(--gallery-accent)] text-[var(--gallery-accent-foreground)]"
diff --git a/src/components/gallery/variant-header.tsx b/src/components/gallery/variant-header.tsx
index 07c6331..389e3d4 100644
--- a/src/components/gallery/variant-header.tsx
+++ b/src/components/gallery/variant-header.tsx
@@ -333,7 +333,7 @@ export function VariantSwitcher({
             );
 
             return option.href ? (
-              <Link key={option.model} href={option.href} className={className} role="menuitem">
+              <Link key={option.model} href={option.href} prefetch={false} className={className} role="menuitem">
                 {content}
               </Link>
             ) : (
@@ -460,7 +460,7 @@ export function VariantSwitcher({
               );
 
               return option.href ? (
-                <Link key={option.model} href={option.href} className={className} role="menuitem">
+                <Link key={option.model} href={option.href} prefetch={false} className={className} role="menuitem">
                   {content}
                 </Link>
               ) : (
@@ -515,7 +515,7 @@ export function VariantSwitcher({
               );
 
               return option.href ? (
-                <Link key={option.group} href={option.href} className={className} role="menuitem">
+                <Link key={option.group} href={option.href} prefetch={false} className={className} role="menuitem">
                   {content}
                 </Link>
               ) : (
@@ -542,6 +542,7 @@ export function VariantSwitcher({
             <Link
               key={item.id}
               href={buildVariantHref(entry.group, entry.model, item.id)}
+              prefetch={false}
               aria-current={active ? "page" : undefined}
               aria-label={`Open iteration ${item.id}`}
               className={`gallery-variant-switcher__iteration inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-[11px] font-medium tabular-nums leading-none transition-colors ${
diff --git a/src/components/ranking-notes.tsx b/src/components/ranking-notes.tsx
index 1dd0dbb..7020aee 100644
--- a/src/components/ranking-notes.tsx
+++ b/src/components/ranking-notes.tsx
@@ -45,6 +45,7 @@ export function RankingNotes(props: {
         <Link
           key={key++}
           href={href}
+          prefetch={false}
           className="mx-0.5 inline-flex items-center rounded-md border border-[var(--gallery-border)] bg-[var(--gallery-surface-subtle)] px-1.5 py-0.5 align-baseline text-[13px] font-medium leading-snug text-[var(--gallery-text-primary)] underline-offset-2 transition-colors hover:border-[var(--gallery-divider-strong)] hover:bg-[var(--gallery-surface-muted)]"
           title={`Open ${label} in the gallery`}
         >
diff --git a/tests/gallery-routes.spec.ts b/tests/gallery-routes.spec.ts
index 5f68b83..2f98de5 100644
--- a/tests/gallery-routes.spec.ts
+++ b/tests/gallery-routes.spec.ts
@@ -89,11 +89,52 @@ test("home page sorts newer same-family models first", async ({ page }) => {
   }
 
   const withDesignSection = page.locator("section").filter({ has: page.getByRole("heading", { name: "With Design Skill" }) });
-  const cardLabels = await withDesignSection.getByTestId("gallery-card").locator("h3 span").allInnerTexts();
+  const cardLabels = await withDesignSection.getByTestId("gallery-card").locator("h3 span").allTextContents();
 
   expect(cardLabels.indexOf("Fable 5")).toBeLessThan(cardLabels.indexOf("Opus 4.8"));
 });
 
+test("large gallery link lists do not eagerly prefetch variant routes", async ({ page }) => {
+  const prefetchedVariantPaths = new Set<string>();
+  page.on("request", (request) => {
+    const url = new URL(request.url());
+    if (
+      url.searchParams.has("_rsc") &&
+      HOME_GALLERY_GROUPS.some((group) => url.pathname.startsWith(`/${group}/`))
+    ) {
+      prefetchedVariantPaths.add(url.pathname);
+    }
+  });
+
+  await page.goto("/");
+  await expect(page.getByRole("heading", { name: "Which AI Made This?" })).toBeVisible();
+  await page.waitForTimeout(1_000);
+
+  expect([...prefetchedVariantPaths]).toEqual([]);
+});
+
+test("opening the variant model picker does not prefetch every model", async ({ page }) => {
+  await page.goto("/with-design-skill/gpt-5.5-high/1");
+  await expect(page.getByRole("button", { name: /Switch model from/ })).toBeVisible();
+
+  const prefetchedVariantPaths = new Set<string>();
+  page.on("request", (request) => {
+    const url = new URL(request.url());
+    if (
+      url.searchParams.has("_rsc") &&
+      HOME_GALLERY_GROUPS.some((group) => url.pathname.startsWith(`/${group}/`))
+    ) {
+      prefetchedVariantPaths.add(url.pathname);
+    }
+  });
+
+  await page.getByRole("button", { name: /Switch model from/ }).click();
+  await expect(page.getByRole("menu", { name: "Switch model" })).toBeVisible();
+  await page.waitForTimeout(1_000);
+
+  expect([...prefetchedVariantPaths]).toEqual([]);
+});
+
 test("rankings page lists eight models with previews", async ({ page }) => {
   await page.goto("/rankings");
   await expect(page.getByRole("heading", { name: "Model rankings" })).toBeVisible();

From 7b7495a3b966c702f96e64a56ac60d4e3cb22b1f Mon Sep 17 00:00:00 2001
From: Dara Adedeji <76637177+SunkenInTime@users.noreply.github.com>
Date: Sun, 12 Jul 2026 18:07:59 -0700
Subject: [PATCH 3/3] Defer gallery work until user intent

Stop top navigation from prefetching heavy routes, ship archived cards as compact data, and lazy-render them in a transition only when requested. Add payload and prefetch regression coverage.
---
 src/app/experiments/page.tsx                  |  2 +-
 .../gallery/gallery-archive-grid.tsx          | 51 +++++++++++++++----
 src/components/gallery/gallery-card.tsx       | 20 +++++---
 .../gallery/gallery-group-section.tsx         | 47 +++++++++++++----
 .../gallery/gallery-rankings-nav.tsx          |  4 ++
 src/components/gallery/gallery-shell.tsx      |  3 +-
 src/components/gallery/variant-header.tsx     |  1 +
 tests/gallery-routes.spec.ts                  | 35 ++++++++++---
 8 files changed, 126 insertions(+), 37 deletions(-)

diff --git a/src/app/experiments/page.tsx b/src/app/experiments/page.tsx
index 17f73af..ebcad4b 100644
--- a/src/app/experiments/page.tsx
+++ b/src/app/experiments/page.tsx
@@ -208,7 +208,7 @@ export default function ExperimentsPage() {
           </p>
           <p className="mt-4 text-sm text-neutral-500">
             Back to the{" "}
-            <Link href="/" className="font-medium text-neutral-800 underline decoration-neutral-300 underline-offset-2 hover:text-[var(--gallery-accent)]">
+            <Link href="/" prefetch={false} className="font-medium text-neutral-800 underline decoration-neutral-300 underline-offset-2 hover:text-[var(--gallery-accent)]">
               main gallery
             </Link>
             .
diff --git a/src/components/gallery/gallery-archive-grid.tsx b/src/components/gallery/gallery-archive-grid.tsx
index 32bcd76..18adc64 100644
--- a/src/components/gallery/gallery-archive-grid.tsx
+++ b/src/components/gallery/gallery-archive-grid.tsx
@@ -1,13 +1,28 @@
 "use client";
 
-import { Fragment, useState, type ReactNode } from "react";
+import { Fragment, lazy, Suspense, useState, useTransition, type ReactNode } from "react";
+import type { GalleryCardEntry } from "@/components/gallery/gallery-card";
 
-type ArchiveGridItem = {
+type VisibleGridItem = {
   key: string;
-  archived: boolean;
+  archived: false;
   card: ReactNode;
 };
 
+type ArchivedGridItem = {
+  key: string;
+  archived: true;
+  entry: GalleryCardEntry;
+  compareHref: string;
+};
+
+type ArchiveGridItem = VisibleGridItem | ArchivedGridItem;
+
+const LazyGalleryCard = lazy(async () => {
+  const galleryCardModule = await import("@/components/gallery/gallery-card");
+  return { default: galleryCardModule.GalleryCard };
+});
+
 export function GalleryArchiveGrid({
   labelId,
   label,
@@ -20,6 +35,7 @@ export function GalleryArchiveGrid({
   hasArchived: boolean;
 }) {
   const [showArchived, setShowArchived] = useState(false);
+  const [isPending, startTransition] = useTransition();
 
   return (
     <section
@@ -36,8 +52,11 @@ export function GalleryArchiveGrid({
         {hasArchived ? (
           <button
             type="button"
-            onClick={() => setShowArchived((value) => !value)}
+            onClick={() => {
+              startTransition(() => setShowArchived((value) => !value));
+            }}
             aria-pressed={showArchived}
+            aria-busy={isPending}
             className="inline-flex shrink-0 items-center gap-1.5 rounded-md border border-[var(--gallery-divider-strong)] bg-[var(--gallery-surface)] px-3 py-1.5 text-sm font-medium tracking-tight text-[var(--gallery-text-primary)] shadow-[var(--gallery-shadow-sm)] transition-colors hover:border-[var(--gallery-text-quaternary)] hover:bg-[var(--gallery-surface-subtle)]"
           >
             <svg
@@ -59,11 +78,25 @@ export function GalleryArchiveGrid({
         ) : null}
       </div>
       <div className="grid gap-8 sm:grid-cols-2 xl:grid-cols-4 xl:gap-6">
-        {items.map((item) =>
-          item.archived && !showArchived ? null : (
-            <Fragment key={item.key}>{item.card}</Fragment>
-          ),
-        )}
+        {items.map((item) => {
+          if (!item.archived) {
+            return <Fragment key={item.key}>{item.card}</Fragment>;
+          }
+
+          return showArchived ? (
+            <Suspense
+              key={item.key}
+              fallback={
+                <article
+                  aria-hidden="true"
+                  className="gallery-card-shell min-h-80 rounded-lg border bg-[var(--gallery-surface)]"
+                />
+              }
+            >
+              <LazyGalleryCard entry={item.entry} compareHref={item.compareHref} />
+            </Suspense>
+          ) : null;
+        })}
       </div>
     </section>
   );
diff --git a/src/components/gallery/gallery-card.tsx b/src/components/gallery/gallery-card.tsx
index 8986349..700048d 100644
--- a/src/components/gallery/gallery-card.tsx
+++ b/src/components/gallery/gallery-card.tsx
@@ -3,16 +3,24 @@ import Link from "next/link";
 import { ArrowLeftRight } from "lucide-react";
 import { GalleryCardLeavingSoonBookmark } from "@/components/gallery/gallery-card-leaving-soon";
 import { ModelBrandLogo } from "@/components/gallery/model-brand-logo";
-import { buildCompareHrefForSelection } from "@/lib/compare-server";
 import { isGalleryModelLeavingSoon } from "@/lib/gallery-archived";
-import type { GalleryEntry } from "@/lib/gallery-types";
+import type { GalleryEntry, GalleryIteration } from "@/lib/gallery-types";
 import { buildVariantHref } from "@/lib/gallery-paths";
 
+export type GalleryCardEntry = Pick<
+  GalleryEntry,
+  "group" | "groupLabel" | "model" | "modelLabel" | "defaultIteration"
+> & {
+  iterations: Pick<GalleryIteration, "id" | "thumbnailPath">[];
+};
+
 export function GalleryCard({
   entry,
+  compareHref,
   preload = false,
 }: {
-  entry: GalleryEntry;
+  entry: GalleryCardEntry;
+  compareHref: string;
   preload?: boolean;
 }) {
   const leavingSoon = isGalleryModelLeavingSoon(entry.model);
@@ -73,11 +81,7 @@ export function GalleryCard({
             ))}
           </div>
           <Link
-            href={buildCompareHrefForSelection({
-              group: entry.group,
-              model: entry.model,
-              iteration: "1",
-            })}
+            href={compareHref}
             prefetch={false}
             className="inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-[var(--gallery-border)] bg-[var(--gallery-surface-subtle)] text-[var(--gallery-text-secondary)] transition-colors hover:border-[var(--gallery-divider-strong)] hover:bg-[var(--gallery-surface)] hover:text-[var(--gallery-text-primary)]"
             aria-label={`Compare ${entry.groupLabel} ${entry.modelLabel}`}
diff --git a/src/components/gallery/gallery-group-section.tsx b/src/components/gallery/gallery-group-section.tsx
index 136ac6c..36059f7 100644
--- a/src/components/gallery/gallery-group-section.tsx
+++ b/src/components/gallery/gallery-group-section.tsx
@@ -7,7 +7,9 @@ import {
 } from "@/lib/gallery-anthropic-skill";
 import { GalleryCard } from "@/components/gallery/gallery-card";
 import { GalleryArchiveGrid } from "@/components/gallery/gallery-archive-grid";
+import type { GalleryCardEntry } from "@/components/gallery/gallery-card";
 import { isGalleryModelArchivedWithinGroup } from "@/lib/gallery-archived";
+import { buildCompareHrefForSelection } from "@/lib/compare-server";
 
 export function GalleryGroupSection({
   group,
@@ -78,16 +80,41 @@ export function GalleryGroupSection({
   const firstVisibleEntry = preloadFirstImage
     ? entries.find((entry) => !isGalleryModelArchivedWithinGroup(entries, entry))
     : undefined;
-  const items = entries.map((entry) => ({
-    key: `${entry.group}-${entry.model}`,
-    archived: isGalleryModelArchivedWithinGroup(entries, entry),
-    card: (
-      <GalleryCard
-        entry={entry}
-        preload={firstVisibleEntry === entry}
-      />
-    ),
-  }));
+  const items = entries.map((entry) => {
+    const archived = isGalleryModelArchivedWithinGroup(entries, entry);
+    const cardEntry = {
+      group: entry.group,
+      groupLabel: entry.groupLabel,
+      model: entry.model,
+      modelLabel: entry.modelLabel,
+      defaultIteration: entry.defaultIteration,
+      iterations: entry.iterations.map(({ id, thumbnailPath }) => ({ id, thumbnailPath })),
+    } satisfies GalleryCardEntry;
+    const compareHref = buildCompareHrefForSelection({
+      group: entry.group,
+      model: entry.model,
+      iteration: "1",
+    });
+
+    return archived
+      ? {
+          key: `${entry.group}-${entry.model}`,
+          archived: true as const,
+          entry: cardEntry,
+          compareHref,
+        }
+      : {
+          key: `${entry.group}-${entry.model}`,
+          archived: false as const,
+          card: (
+            <GalleryCard
+              entry={cardEntry}
+              compareHref={compareHref}
+              preload={firstVisibleEntry === entry}
+            />
+          ),
+        };
+  });
 
   return (
     <GalleryArchiveGrid
diff --git a/src/components/gallery/gallery-rankings-nav.tsx b/src/components/gallery/gallery-rankings-nav.tsx
index 3da0b2a..8bc5511 100644
--- a/src/components/gallery/gallery-rankings-nav.tsx
+++ b/src/components/gallery/gallery-rankings-nav.tsx
@@ -34,6 +34,7 @@ export function GalleryRankingsNav({ current }: { current: GalleryNavPage }) {
     >
       <Link
         href="/"
+        prefetch={false}
         aria-label={homeShowsGalleryLabel ? undefined : "Gallery"}
         aria-current={onGalleryHome ? "page" : undefined}
         className={clsx(
@@ -57,6 +58,7 @@ export function GalleryRankingsNav({ current }: { current: GalleryNavPage }) {
 
       <Link
         href={buildCompareHref(DEFAULT_COMPARE_STATE)}
+        prefetch={false}
         aria-label={onCompare ? "Compare" : undefined}
         aria-current={onCompare ? "page" : undefined}
         className={clsx(
@@ -82,6 +84,7 @@ export function GalleryRankingsNav({ current }: { current: GalleryNavPage }) {
 
       <Link
         href="/lab-guess"
+        prefetch={false}
         aria-label={onLabGuess ? "Guess which" : undefined}
         aria-current={onLabGuess ? "page" : undefined}
         className={clsx(
@@ -107,6 +110,7 @@ export function GalleryRankingsNav({ current }: { current: GalleryNavPage }) {
 
       <Link
         href="/rankings"
+        prefetch={false}
         aria-label={onRankings ? "Rankings" : undefined}
         aria-current={onRankings ? "page" : undefined}
         className={clsx(
diff --git a/src/components/gallery/gallery-shell.tsx b/src/components/gallery/gallery-shell.tsx
index ba75289..17427e8 100644
--- a/src/components/gallery/gallery-shell.tsx
+++ b/src/components/gallery/gallery-shell.tsx
@@ -10,7 +10,7 @@ export function GalleryBreadcrumb({
 }) {
   return (
     <nav className="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-[var(--gallery-text-tertiary)]">
-      <Link href="/" className="inline-flex items-center gap-1.5 transition-colors hover:text-[var(--gallery-text-primary)]">
+      <Link href="/" prefetch={false} className="inline-flex items-center gap-1.5 transition-colors hover:text-[var(--gallery-text-primary)]">
         <ArrowLeft className="size-3.5 opacity-60" aria-hidden="true" />
         Gallery
       </Link>
@@ -19,6 +19,7 @@ export function GalleryBreadcrumb({
       </span>
       <Link
         href={buildModelHref(entry.group, entry.model)}
+        prefetch={false}
         className="transition-colors hover:text-[var(--gallery-text-primary)]"
       >
         {entry.modelLabel}
diff --git a/src/components/gallery/variant-header.tsx b/src/components/gallery/variant-header.tsx
index 389e3d4..1b9a7df 100644
--- a/src/components/gallery/variant-header.tsx
+++ b/src/components/gallery/variant-header.tsx
@@ -248,6 +248,7 @@ export function VariantSwitcher({
     >
       <Link
         href="/"
+        prefetch={false}
         aria-label="Back to Which AI Made This?"
         className={switcherButtonClass}
       >
diff --git a/tests/gallery-routes.spec.ts b/tests/gallery-routes.spec.ts
index 2f98de5..f5d7d3c 100644
--- a/tests/gallery-routes.spec.ts
+++ b/tests/gallery-routes.spec.ts
@@ -43,6 +43,12 @@ const routeSmokeCases = [
   ...sampleRouteSmokeCases.map((route) => ({ ...route, source: "sample" })),
 ];
 
+test("home keeps its initial document below the gallery payload budget", async ({ request }) => {
+  const response = await request.get("/");
+  expect(response.ok()).toBe(true);
+  expect((await response.body()).byteLength).toBeLessThan(450_000);
+});
+
 test("home page archives Opus 4.7 cards", async ({ page }) => {
   await page.goto("/");
   const opus47Cards = page.getByTestId("gallery-card").filter({ hasText: "Opus 4.7" });
@@ -94,15 +100,12 @@ test("home page sorts newer same-family models first", async ({ page }) => {
   expect(cardLabels.indexOf("Fable 5")).toBeLessThan(cardLabels.indexOf("Opus 4.8"));
 });
 
-test("large gallery link lists do not eagerly prefetch variant routes", async ({ page }) => {
-  const prefetchedVariantPaths = new Set<string>();
+test("the gallery does not eagerly prefetch off-page routes", async ({ page }) => {
+  const prefetchedPaths = new Set<string>();
   page.on("request", (request) => {
     const url = new URL(request.url());
-    if (
-      url.searchParams.has("_rsc") &&
-      HOME_GALLERY_GROUPS.some((group) => url.pathname.startsWith(`/${group}/`))
-    ) {
-      prefetchedVariantPaths.add(url.pathname);
+    if (url.searchParams.has("_rsc") && url.pathname !== "/") {
+      prefetchedPaths.add(url.pathname);
     }
   });
 
@@ -110,7 +113,23 @@ test("large gallery link lists do not eagerly prefetch variant routes", async ({
   await expect(page.getByRole("heading", { name: "Which AI Made This?" })).toBeVisible();
   await page.waitForTimeout(1_000);
 
-  expect([...prefetchedVariantPaths]).toEqual([]);
+  expect([...prefetchedPaths]).toEqual([]);
+});
+
+test("a variant does not eagerly prefetch the full gallery", async ({ page }) => {
+  const galleryPrefetches: string[] = [];
+  page.on("request", (request) => {
+    const url = new URL(request.url());
+    if (url.searchParams.has("_rsc") && url.pathname === "/") {
+      galleryPrefetches.push(url.href);
+    }
+  });
+
+  await page.goto("/with-design-skill/gpt-5.5-high/1");
+  await expect(page.getByRole("link", { name: /Back to Which AI Made This/ })).toBeVisible();
+  await page.waitForTimeout(1_000);
+
+  expect(galleryPrefetches).toEqual([]);
 });
 
 test("opening the variant model picker does not prefetch every model", async ({ page }) => {