From c3f9f66619a93750a5a94cb3d22b8b0b82768607 Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Thu, 22 Oct 2026 15:16:28 +0200
Subject: [PATCH 1/4] fix(docs): center the landing canvas before its first
 paint after a client navigation

---
 docs/build.ts         |  4 +++-
 e2e/navigation.e2e.ts | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/docs/build.ts b/docs/build.ts
index e908372b..5e27141c 100644
--- a/docs/build.ts
+++ b/docs/build.ts
@@ -775,7 +775,9 @@ for (const canvas of document.querySelectorAll(".canvas")) {
     canvas.dataset.view = name;
     for (const b of canvas.querySelectorAll(".canvas-bar [data-view]")) b.setAttribute("aria-pressed", b.dataset.view === name);
     if (keep) try { localStorage.setItem("comark-view", name) } catch {}
-    if (name === "canvas") { draw(); run() } else halt();
+    // Measured now rather than left to the ResizeObserver, which reports after a client-side navigation has painted
+    // the cards uncentered.
+    if (name === "canvas") { vw = viewport.clientWidth; vh = viewport.clientHeight; draw(); run() } else halt();
   };
   new ResizeObserver(([e]) => { vw = e.contentRect.width; vh = e.contentRect.height; draw() }).observe(viewport);
   viewport.addEventListener("pointerdown", e => {
diff --git a/e2e/navigation.e2e.ts b/e2e/navigation.e2e.ts
index 97641a79..a41a5404 100644
--- a/e2e/navigation.e2e.ts
+++ b/e2e/navigation.e2e.ts
@@ -25,3 +25,21 @@ test("client navigation preserves the app and reinitializes page scripts", async
     ),
   ).toBe(marker);
 });
+
+test("the landing canvas paints its cards centered after a client navigation", async ({ page }) => {
+  await page.goto("/zoom/");
+  // Every frame's position of the first card, from the click until the canvas has settled.
+  const positions = await page.evaluate(async () => {
+    const seen: number[] = [];
+    document.querySelector<HTMLAnchorElement>('header a[href="/"]')!.click();
+    const start = performance.now();
+    while (performance.now() - start < 1500) {
+      await new Promise(requestAnimationFrame);
+      const card = document.querySelector(".canvas-stage .demo");
+      if (card) seen.push(Math.round(card.getBoundingClientRect().x));
+    }
+    return seen;
+  });
+  expect(positions.length).toBeGreaterThan(0);
+  expect(new Set(positions).size).toBe(1);
+});

From 73327e269e162efc006c16fd319b59d554f72588 Mon Sep 17 00:00:00 2001
From: "vitehub-bot[bot]" <320448255+vitehub-bot[bot]@users.noreply.github.com>
Date: Thu, 22 Oct 2026 15:55:53 +0200
Subject: [PATCH 2/4] test(docs): assert landing canvas centering

---
 docs/build.ts         |  3 +--
 e2e/navigation.e2e.ts | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/docs/build.ts b/docs/build.ts
index 5e27141c..8bce6ab3 100644
--- a/docs/build.ts
+++ b/docs/build.ts
@@ -775,8 +775,7 @@ for (const canvas of document.querySelectorAll(".canvas")) {
     canvas.dataset.view = name;
     for (const b of canvas.querySelectorAll(".canvas-bar [data-view]")) b.setAttribute("aria-pressed", b.dataset.view === name);
     if (keep) try { localStorage.setItem("comark-view", name) } catch {}
-    // Measured now rather than left to the ResizeObserver, which reports after a client-side navigation has painted
-    // the cards uncentered.
+    // Measure during view activation so navigation can draw with the viewport size before its first paint.
     if (name === "canvas") { vw = viewport.clientWidth; vh = viewport.clientHeight; draw(); run() } else halt();
   };
   new ResizeObserver(([e]) => { vw = e.contentRect.width; vh = e.contentRect.height; draw() }).observe(viewport);
diff --git a/e2e/navigation.e2e.ts b/e2e/navigation.e2e.ts
index a41a5404..1b07d7bf 100644
--- a/e2e/navigation.e2e.ts
+++ b/e2e/navigation.e2e.ts
@@ -31,15 +31,20 @@ test("the landing canvas paints its cards centered after a client navigation", a
   // Every frame's position of the first card, from the click until the canvas has settled.
   const positions = await page.evaluate(async () => {
     const seen: number[] = [];
+    const view = document.querySelector<HTMLElement>(".canvas-viewport")!;
+    const expected = ((view.clientWidth - 300) % 320 + 320) % 320 / 2;
     document.querySelector<HTMLAnchorElement>('header a[href="/"]')!.click();
     const start = performance.now();
     while (performance.now() - start < 1500) {
       await new Promise(requestAnimationFrame);
-      const card = document.querySelector(".canvas-stage .demo");
-      if (card) seen.push(Math.round(card.getBoundingClientRect().x));
+      const card = [...document.querySelectorAll<HTMLElement>(".canvas-stage .demo")].find(
+        card => Number.parseFloat(card.style.left) === 0,
+      );
+      if (card) seen.push(Math.round(card.getBoundingClientRect().x - view.getBoundingClientRect().x));
     }
-    return seen;
+    return { seen, expected: Math.round(expected) };
   });
-  expect(positions.length).toBeGreaterThan(0);
-  expect(new Set(positions).size).toBe(1);
+  expect(positions.seen.length).toBeGreaterThan(0);
+  expect(new Set(positions.seen).size).toBe(1);
+  expect(positions.seen[0]).toBe(positions.expected);
 });

From 3c71d1646c641cb3afd3e5028b00d9a66dd0e62e Mon Sep 17 00:00:00 2001
From: "vitehub-bot[bot]" <320448255+vitehub-bot[bot]@users.noreply.github.com>
Date: Thu, 22 Oct 2026 16:10:47 +0200
Subject: [PATCH 3/4] test(docs): wait for landing canvas after navigation

---
 e2e/navigation.e2e.ts | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/e2e/navigation.e2e.ts b/e2e/navigation.e2e.ts
index 1b07d7bf..9683bf51 100644
--- a/e2e/navigation.e2e.ts
+++ b/e2e/navigation.e2e.ts
@@ -31,17 +31,20 @@ test("the landing canvas paints its cards centered after a client navigation", a
   // Every frame's position of the first card, from the click until the canvas has settled.
   const positions = await page.evaluate(async () => {
     const seen: number[] = [];
-    const view = document.querySelector<HTMLElement>(".canvas-viewport")!;
-    const expected = ((view.clientWidth - 300) % 320 + 320) % 320 / 2;
     document.querySelector<HTMLAnchorElement>('header a[href="/"]')!.click();
     const start = performance.now();
     while (performance.now() - start < 1500) {
       await new Promise(requestAnimationFrame);
+      const view = document.querySelector<HTMLElement>(".canvas-viewport");
+      if (!view) continue;
       const card = [...document.querySelectorAll<HTMLElement>(".canvas-stage .demo")].find(
-        card => Number.parseFloat(card.style.left) === 0,
+        (card) => Number.parseFloat(card.style.left) === 0,
       );
-      if (card) seen.push(Math.round(card.getBoundingClientRect().x - view.getBoundingClientRect().x));
+      if (card)
+        seen.push(Math.round(card.getBoundingClientRect().x - view.getBoundingClientRect().x));
     }
+    const view = document.querySelector<HTMLElement>(".canvas-viewport")!;
+    const expected = ((((view.clientWidth - 300) % 320) + 320) % 320) / 2;
     return { seen, expected: Math.round(expected) };
   });
   expect(positions.seen.length).toBeGreaterThan(0);

From 04c3dba7ad313ea06421ec6e68545a8dd1fb1cbf Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Thu, 22 Oct 2026 17:36:04 +0200
Subject: [PATCH 4/4] feat(docs): fill the landing canvas with every example
 and turn chart cards through their charts

- The canvas holds the landing's demos plus every package page's examples (45 cards instead of 15), in a fixed shuffle with no two of one package in a row. Each column's step is the one that keeps copies of a card farthest apart over the columns a screen holds, so no card shows twice on screen.
- Cards without a height in their markup are measured once off screen and kept for the visit. The site's PNGs get their width and height at build time, so a card measures as it will show.
- The two chart cards turn through the chart examples while hovered, crossfading SVGs drawn at build time. The per-bar and line-drawing animations, which repainted the SVG every frame, are gone.
- Card loops start moving as soon as the pointer arrives instead of holding first, and they animate opacity and transforms only, with no blur.
- `.demo` is `contain: strict`, and its hidden Markdown is `content-visibility: hidden` until shown.
- The icon demo is gone: its logos filled the card at 2.25rem with the sentence hidden. The icon examples show icons inline at text size.
- References light up in turn instead of vanishing, which made a card look like it had lost its links.
- The github references demo, which repeated the page's References example, shows once.
---
 docs/build.ts       | 209 +++++++++++++++++++++++++-------
 docs/pages/index.md |  10 +-
 docs/style.css      | 281 +++++++++++++++-----------------------------
 e2e/docs.e2e.ts     |  56 +++++++++
 4 files changed, 320 insertions(+), 236 deletions(-)

diff --git a/docs/build.ts b/docs/build.ts
index 8bce6ab3..a81e8c68 100644
--- a/docs/build.ts
+++ b/docs/build.ts
@@ -437,6 +437,18 @@ const presets = parsed.flatMap((page) =>
     }))
     .filter((preset) => playable(preset.source)),
 );
+// The size of each PNG the pages show, read from its header, so a still reserves its room before the image loads.
+const publicDir = new URL("public/", root);
+const imageSizes = new Map(
+  await Promise.all(
+    (await readdir(publicDir))
+      .filter((file) => file.endsWith(".png"))
+      .map(async (file) => {
+        const head = await readFile(new URL(file, publicDir));
+        return [file, [head.readUInt32BE(16), head.readUInt32BE(20)]] as const;
+      }),
+  ),
+);
 // A still of a rendered document: no scripts, its plugins' styles collected into `styles` to go in the page once,
 // no ids, since a page holds many, and a chart without its data table, so the still is all plot.
 const stillOf = (html: string, styles: Set<string>) =>
@@ -445,6 +457,10 @@ const stillOf = (html: string, styles: Set<string>) =>
     .replace(/<script>[\s\S]*?<\/script>/g, "")
     .replace(/<details class="cch-data">[\s\S]*?<\/details>/g, "")
     .replace(/\s(id|for|aria-controls|aria-labelledby)="[^"]*"/g, "")
+    .replace(/<img\b([^>]*?) src="\/([\w-]+\.png)"/g, (tag, rest: string, file: string) => {
+      const size = imageSizes.get(file);
+      return size && !/\swidth=/.test(rest) ? `${tag} width="${size[0]}" height="${size[1]}"` : tag;
+    })
     .replace(/<img\b/g, '<img loading="lazy" draggable="false"');
 // A small still of each preset for the playground's column, with a gray box for each embedded player, so the column
 // loads nothing but the pages' own images. The playground scales each still to its card.
@@ -481,47 +497,116 @@ async function lintReport(source: string) {
   return `<div class="term">${lines.map((line, i) => `<span class="term-line" style="--i:${i}">${line}</span>`).join("")}</div>`;
 }
 
-// The index's packages, twice over: a canvas of cards, each drawn live by the plugins from the Markdown in its `demo`
-// and animated by the stylesheet, and the list it replaces without the script, for keyboards, and on request.
 const demoStyles = new Set<string>();
+const slugify = (text: string) =>
+  text
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-|-$/g, "");
+// Every page's top examples, include's too, which the playground leaves out since it can't read files.
+const pageExamples = parsed.flatMap((page) =>
+  page.section.npm
+    ? page.document.nodes
+        .filter(isElement)
+        .filter(([tag]) => tag === "examples")
+        .flatMap(([, , ...panels]) => panels.filter(isElement))
+        .map(([, attrs, ...children]) => ({
+          pkg: page.section,
+          label: str(attrs.label),
+          source: textContent(children.find(isPre) ?? ["pre", {}]),
+        }))
+    : [],
+);
+async function renderDemo(slug: string, source: string) {
+  if (slug === "lint") return lintReport(source);
+  const document = await parseMarkdown(source, { plugins: contentPlugins() });
+  if (document.meta.issues.length)
+    throw new Error(`The ${slug} demo:\n${document.meta.issues.join("\n")}`);
+  let html = (await renderHtmlFromDocument(document, { components })).replace(
+    /<iframe\b[^>]*><\/iframe>/g,
+    `<span class="demo-player"><span class="demo-play">${playIcon}</span><span class="demo-progress"></span></span>`,
+  );
+  // Tabs show their strip once their script runs, which a card doesn't have.
+  html = html.replaceAll('<div class="ct"', '<div class="ct" data-tabs-ready');
+  // An include shows what it reads, since the page alone doesn't say.
+  if (slug === "include")
+    html = `<p class="demo-directive"><code>${escapeHtml(source.trim())}</code></p>${html}`;
+  return stillOf(html, demoStyles);
+}
+interface Demo {
+  pkg: Section;
+  label: string;
+  source: string;
+  /** The card's height in pixels; without one, the canvas measures the card once. */
+  height?: number;
+  /** Stills the card turns through while the pointer is on it, after its own. */
+  variants?: string[];
+}
+async function demoCard({ pkg, label, source, height, variants = [] }: Demo) {
+  const page = await renderDemo(pkg.slug, source);
+  const screen = variants.length
+    ? `<div class="demo-variants">${[page, ...variants].map((still, i) => `<div class="demo-variant"${i ? "" : " data-on"}>${still}</div>`).join("")}</div>`
+    : page;
+  const tag = label ? ` demo-${pkg.slug}-${slugify(label)}` : "";
+  return (
+    `<article class="demo demo-${pkg.slug}${tag}" data-package="${pkg.slug}"${height ? ` data-h="${height}" style="height:${height}px"` : ""}>` +
+    `<a class="demo-link" href="${href(pkg.slug)}" draggable="false" tabindex="-1">${siteIcon(pkg.icon!, 15)}<strong>${escapeHtml(pkg.label)}</strong>${label ? `<span>${escapeHtml(label.toLowerCase())}</span>` : ""}${siteIcon("arrow-up-right", 14)}</a>` +
+    `<button type="button" class="demo-md" tabindex="-1" title="Show the Markdown" aria-label="Show the Markdown">${siteIcon("code-xml", 15)}</button>` +
+    `<button type="button" class="demo-copy" data-copy="pnpm add ${escapeHtml(pkg.npm!)}" tabindex="-1" title="Copy pnpm add ${escapeHtml(pkg.npm!)}">${copyIcon}${checkIcon}</button>` +
+    // A card plays its loop while the pointer is on it; its Markdown button shows what it was drawn from.
+    `<div class="demo-screen" inert><div class="demo-page">${screen}</div><div class="demo-source">${highlight(source.trimEnd())}</div></div></article>`
+  );
+}
+// The cards in a fixed shuffle, so neighbours on the canvas are mostly of different packages, and never two of one
+// package in a row.
+function deal(demos: Demo[]) {
+  let seed = 7;
+  const random = () => (seed = (seed * 16807) % 2147483647) / 2147483647;
+  const deck = demos
+    .map((demo) => ({ demo, key: random() }))
+    .sort((a, b) => a.key - b.key)
+    .map(({ demo }) => demo);
+  const dealt: Demo[] = [];
+  while (deck.length) {
+    const at = deck.findIndex((demo) => demo.pkg.slug !== dealt.at(-1)?.pkg.slug);
+    dealt.push(...deck.splice(Math.max(0, at), 1));
+  }
+  return dealt;
+}
+
+// The index's packages, twice over: a canvas of cards, each drawn live by the plugins from the Markdown in its `demo`
+// or in a page's examples and animated by the stylesheet, and the list it replaces without the script, for keyboards,
+// and on request.
 const packageGrid: NodeHandler = async ([, , ...children]) => {
-  const demos = await Promise.all(
-    children.filter(isElement).map(async ([, attrs, ...content]) => {
-      const pkg = sections.find((section) => section.npm && section.slug === str(attrs.package));
-      if (!pkg?.npm) throw new Error(`A demo names no package: "${str(attrs.package)}".`);
-      const pre = content.find(isPre);
-      if (!pre) throw new Error(`The ${pkg.slug} demo needs a fenced code block.`);
-      const source = textContent(pre);
-      let html: string;
-      if (pkg.slug === "lint") html = await lintReport(source);
-      else {
-        const document = await parseMarkdown(source, { plugins: contentPlugins() });
-        if (document.meta.issues.length)
-          throw new Error(`The ${pkg.slug} demo:\n${document.meta.issues.join("\n")}`);
-        html = (await renderHtmlFromDocument(document, { components })).replace(
-          /<iframe\b[^>]*><\/iframe>/g,
-          `<span class="demo-player"><span class="demo-play">${playIcon}</span><span class="demo-progress"></span></span>`,
-        );
-      }
-      // The canvas stacks cards in columns from their heights, so it never measures one.
-      const height = Number(attrs.height);
-      if (!height) throw new Error(`The ${pkg.slug} demo needs a \`height\` in pixels.`);
-      const label = str(attrs.label);
-      // An include shows what it reads, since the page alone doesn't say.
-      // Tabs show their strip once their script runs, which a card doesn't have.
-      html = html.replaceAll('<div class="ct"', '<div class="ct" data-tabs-ready');
-      if (pkg.slug === "include")
-        html = `<p class="demo-directive"><code>${escapeHtml(source.trim())}</code></p>${html}`;
-      return (
-        `<article class="demo demo-${pkg.slug}${label ? ` demo-${pkg.slug}-${label}` : ""}" data-h="${height}" style="height:${height}px">` +
-        `<a class="demo-link" href="${href(pkg.slug)}" draggable="false" tabindex="-1">${siteIcon(pkg.icon, 15)}<strong>${escapeHtml(pkg.label)}</strong>${label ? `<span>${escapeHtml(label)}</span>` : ""}${siteIcon("arrow-up-right", 14)}</a>` +
-        `<button type="button" class="demo-md" tabindex="-1" title="Show the Markdown" aria-label="Show the Markdown">${siteIcon("code-xml", 15)}</button>` +
-        `<button type="button" class="demo-copy" data-copy="pnpm add ${escapeHtml(pkg.npm)}" tabindex="-1" title="Copy pnpm add ${escapeHtml(pkg.npm)}">${copyIcon}${checkIcon}</button>` +
-        // A card plays its loop while the pointer is on it; its Markdown button shows what it was drawn from.
-        `<div class="demo-screen" inert><div class="demo-page">${stillOf(html, demoStyles)}</div><div class="demo-source">${highlight(source.trimEnd())}</div></div></article>`
-      );
-    }),
+  const landingDemos: Demo[] = children.filter(isElement).map(([, attrs, ...content]) => {
+    const pkg = sections.find((section) => section.npm && section.slug === str(attrs.package));
+    if (!pkg?.npm) throw new Error(`A demo names no package: "${str(attrs.package)}".`);
+    const pre = content.find(isPre);
+    if (!pre) throw new Error(`The ${pkg.slug} demo needs a fenced code block.`);
+    return {
+      pkg,
+      label: str(attrs.label),
+      source: textContent(pre),
+      height: Number(attrs.height) || undefined,
+    };
+  });
+  // Charts don't get a card per example: the landing's chart cards turn through them instead, each its share.
+  const chartCards = landingDemos.filter((demo) => demo.pkg.slug === "charts");
+  const charts = pageExamples.filter((example) => example.pkg.slug === "charts");
+  const chartStills = await Promise.all(
+    charts.map((example) => renderDemo("charts", example.source)),
+  );
+  for (const [i, card] of chartCards.entries()) {
+    card.variants = chartStills.filter((_, j) => j % chartCards.length === i);
+    // Its height is the tallest chart it turns through, which the canvas measures.
+    card.height = undefined;
+  }
+  // An example the landing already shows, such as github's references, shows once.
+  const shown = new Set(landingDemos.map((demo) => demo.source.trim()));
+  const others: Demo[] = pageExamples.filter(
+    (example) => example.pkg.slug !== "charts" && !shown.has(example.source.trim()),
   );
+  const demos = await Promise.all(deal([...landingDemos, ...others]).map(demoCard));
   const list = sections
     .filter((section) => section.npm)
     .map(
@@ -717,22 +802,42 @@ const copied = async button => {
 for (const button of document.querySelectorAll(".grid-copy")) button.addEventListener("click", () => copied(button));
 // The index's canvas: columns of package cards without end, each running through every card from its own start, so
 // neighbours differ from column to column. Only the cards in view are in the page, cloned from the template as they
-// come in, and each card's height is in its markup, so nothing is measured. It holds still: it follows a drag and
-// coasts to rest after it, and pans sideways with a trackpad.
+// come in, at heights known before any is shown. It holds still: it follows a drag and coasts to rest after it, and
+// pans sideways with a trackpad.
 const mod = (a, n) => ((a % n) + n) % n;
 for (const canvas of document.querySelectorAll(".canvas")) {
   const viewport = canvas.querySelector(".canvas-viewport"), stage = canvas.querySelector(".canvas-stage"), dots = canvas.querySelector(".canvas-dots");
   const list = canvas.querySelector(".grid");
   const cards = [...canvas.querySelector(".canvas-cards").content.children];
-  const n = cards.length, heights = cards.map(c => Number(c.dataset.h)), gap = 20, pitch = 300 + gap, pad = 160;
-  const period = heights.reduce((sum, h) => sum + h + gap, 0);
+  const n = cards.length, gap = 20, pitch = 300 + gap, pad = 160;
+  let heights = [], period = 0;
+  // A card without a height in its markup is measured off screen at the canvas's first draw, once per visit, so
+  // coming back to the page measures nothing. Its images carry their size, so it measures as it will show.
+  const measured = window.comarkCardHeights ??= [];
+  const measure = () => {
+    const probe = document.createElement("div");
+    probe.className = "canvas-probe";
+    const unsized = cards.flatMap((c, i) => c.dataset.h || measured[i] ? [] : [i]);
+    const clones = unsized.map(i => probe.appendChild(cards[i].cloneNode(true)));
+    stage.append(probe);
+    unsized.forEach((i, j) => measured[i] = Math.min(420, Math.max(120, Math.ceil(clones[j].getBoundingClientRect().height))));
+    probe.remove();
+    cards.forEach((card, i) => { if (!card.dataset.h) { card.dataset.h = measured[i]; card.style.height = measured[i] + "px" } });
+    heights = cards.map(c => Number(c.dataset.h));
+    period = heights.reduce((sum, h) => sum + h + gap, 0);
+  };
+  // Each column starts \`step\` cards on from the one before, so a card shows again in the columns k over, k*step cards
+  // away. The step that keeps those farthest apart over the columns a screen holds keeps copies off one screen.
   const gcd = (a, b) => b ? gcd(b, a % b) : a;
-  let step = Math.max(1, Math.round(n * 0.4));
-  while (gcd(step, n) !== 1) step++;
+  const apart = s => Math.min(...[1, 2, 3, 4, 5, 6].map(k => { const d = mod(k * s, n); return Math.min(d, n - d) }));
+  let step = 1;
+  for (let s = 2; s < n; s++) if (gcd(s, n) === 1 && apart(s) > apart(step)) step = s;
   const live = new Map(), pools = cards.map(() => []);
   let x = 0, y = -48, vw = 0, vh = 0, vx = 0, vy = 0, last = 0, frame = 0, down, dragging = false, moved = false, samples = [];
   let placed = false;
   const draw = () => {
+    if (!vw) return;
+    if (!period) measure();
     // Centered on the first column, once there's a width to center in.
     if (!placed && vw) { x = -mod(vw - 300, pitch) / 2; placed = true }
     stage.style.transform = "translate3d(" + -x + "px," + -y + "px,0)";
@@ -815,6 +920,22 @@ for (const canvas of document.querySelectorAll(".canvas")) {
     if (copy) copied(copy);
   }, true);
   viewport.addEventListener("dragstart", e => e.preventDefault());
+  // A chart card turns through its charts while the pointer is on it: the first turn soon, then one every few seconds.
+  let turning, turner = 0;
+  const turn = card => {
+    const variants = [...card.querySelectorAll(".demo-variant")], on = variants.findIndex(v => v.hasAttribute("data-on"));
+    variants[on].removeAttribute("data-on"); variants[(on + 1) % variants.length].setAttribute("data-on", "");
+  };
+  const settle = () => { clearTimeout(turner); clearInterval(turner); turning = undefined };
+  viewport.addEventListener("pointerover", e => {
+    const card = e.target.closest(".demo");
+    if (card === turning) return;
+    settle();
+    if (!card?.querySelector(".demo-variants") || reduce.matches) return;
+    turning = card;
+    turner = setTimeout(() => { turn(card); turner = setInterval(() => card.isConnected ? turn(card) : settle(), 2800) }, 700);
+  });
+  viewport.addEventListener("pointerleave", settle);
   viewport.addEventListener("wheel", e => {
     if (Math.abs(e.deltaX) <= Math.abs(e.deltaY)) return;
     e.preventDefault(); x += e.deltaX * (e.deltaMode ? 16 : 1); canvas.dataset.dragged = ""; draw();
diff --git a/docs/pages/index.md b/docs/pages/index.md
index 62725b9e..361d3b14 100644
--- a/docs/pages/index.md
+++ b/docs/pages/index.md
@@ -21,7 +21,7 @@ Moon and Vibes are in here now.
 ```
 :::
 
-:::demo{package="charts" height=360}
+:::demo{package="charts"}
 ```md
 ::chart{title="Pigeons on the roof"}
 | weekday | pigeons |
@@ -102,12 +102,6 @@ function countPigeons(roof) {
 ````
 :::
 
-:::demo{package="icon" height=176}
-```md
-Built with :icon{name="logos:vue" label="Vue"} :icon{name="logos:vitejs" label="Vite"} :icon{name="logos:cloudflare-icon" label="Cloudflare"} :icon{name="logos:pnpm" label="pnpm"} :icon{name="logos:typescript-icon" label="TypeScript"}
-```
-:::
-
 :::demo{package="carousel" height=224}
 ```md
 ::carousel{title="Filters"}
@@ -146,7 +140,7 @@ Thanks @onmax: this fixes #51, and onmax/comark-plugins#73 builds on it.
 ```
 :::
 
-:::demo{package="charts" label="line" height=372}
+:::demo{package="charts"}
 ```md
 ::chart{type="line" title="Coffee cups and commits"}
 | month | coffee cups | commits |
diff --git a/docs/style.css b/docs/style.css
index 96ba649f..c5cb8030 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -709,6 +709,22 @@ kbd {
     0 1px 2px rgb(0 0 0 / 0.05),
     0 16px 32px -16px rgb(0 0 0 / 0.18);
   transition: box-shadow 200ms ease;
+  /* Its size is in its markup, so adding a card to the stage lays out and paints that card alone. */
+  contain: strict;
+}
+
+/* Cards without a height are measured once in here, at their content's height. */
+.canvas-probe {
+  position: absolute;
+  width: 300px;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.canvas-probe .demo {
+  position: relative;
+  height: auto;
+  contain: none;
 }
 
 .demo-link {
@@ -729,7 +745,11 @@ kbd {
 }
 
 .demo-link span {
+  min-width: 0;
+  overflow: hidden;
   color: var(--faint);
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .demo-link .ci:last-child {
@@ -903,6 +923,8 @@ kbd {
   position: absolute;
   inset: 0;
   overflow: hidden;
+  /* Skipped until it shows, so a card added to the stage styles and lays out only its page. */
+  content-visibility: hidden;
   background: var(--card);
   opacity: 0;
   filter: blur(4px);
@@ -925,6 +947,7 @@ kbd {
 
 @media (hover: hover) {
   .demo:has(.demo-md:hover) .demo-source {
+    content-visibility: visible;
     opacity: 1;
     filter: none;
   }
@@ -950,9 +973,6 @@ kbd {
 .demo-include .demo-directive + p,
 .demo-diff tr,
 .demo-diff ins,
-.demo-charts .mark-rect path,
-.demo-charts .layer_1_marks text,
-.demo-charts-line .mark-line path,
 .demo-github-references a {
   animation-duration: 7s;
   animation-timing-function: var(--ease-out);
@@ -979,50 +999,40 @@ kbd {
 }
 
 @keyframes demo-draw {
-  0%,
-  6% {
+  0% {
     clip-path: inset(-150% -150% -150% -150%);
   }
 
-  10% {
+  4% {
     clip-path: inset(-150% -150% -150% 100%);
   }
 
-  11% {
+  5% {
     clip-path: inset(-150% 100% -150% -150%);
   }
 
-  22%,
+  16%,
   100% {
     clip-path: inset(-150% -150% -150% -150%);
   }
 }
 
 @keyframes demo-rise {
-  0%,
-  6% {
+  0% {
     opacity: 1;
     translate: 0;
-    filter: none;
   }
 
+  4%,
   10% {
     opacity: 0;
     translate: 0 6px;
-    filter: blur(4px);
-  }
-
-  18% {
-    opacity: 0;
-    translate: 0 6px;
-    filter: blur(4px);
   }
 
-  26%,
+  18%,
   100% {
     opacity: 1;
     translate: 0;
-    filter: none;
   }
 }
 
@@ -1046,30 +1056,29 @@ kbd {
 
 @keyframes demo-strike {
   0%,
-  12%,
   100% {
     opacity: 1;
   }
 
-  22%,
-  30% {
+  10%,
+  18% {
     opacity: 0.35;
   }
 }
 
 @keyframes demo-slide {
   0%,
-  20% {
+  8% {
     opacity: 1;
     translate: 0;
   }
 
-  24% {
+  12% {
     opacity: 0;
     translate: -12px 0;
   }
 
-  34%,
+  22%,
   100% {
     opacity: 1;
     translate: 0;
@@ -1078,112 +1087,38 @@ kbd {
 
 @keyframes demo-light {
   0%,
-  30%,
-  60%,
+  18%,
+  48%,
   100% {
     filter: none;
   }
 
-  40% {
+  28% {
     filter: brightness(1.35) saturate(1.3);
   }
 }
 
-/* charts: the bars grow from the axis in turn, then their labels; the line draws itself. */
+/* charts: the card turns through its charts while the pointer is on it, fading one into the next. Only opacity and
+   a short slide move, which the compositor draws without repainting the SVG. */
 .demo-charts {
   --z: 0.62;
 }
 
-.demo-charts .mark-rect path {
-  transform-box: fill-box;
-  transform-origin: 50% 100%;
-  animation-name: demo-grow;
-}
-
-.demo-charts .layer_1_marks text {
-  animation-name: demo-fade;
-}
-
-.demo-charts .mark-rect path:nth-child(2),
-.demo-charts .layer_1_marks text:nth-child(2) {
-  animation-delay: 90ms;
-}
-
-.demo-charts .mark-rect path:nth-child(3),
-.demo-charts .layer_1_marks text:nth-child(3) {
-  animation-delay: 180ms;
-}
-
-.demo-charts .mark-rect path:nth-child(4),
-.demo-charts .layer_1_marks text:nth-child(4) {
-  animation-delay: 270ms;
-}
-
-.demo-charts .mark-rect path:nth-child(5),
-.demo-charts .layer_1_marks text:nth-child(5) {
-  animation-delay: 360ms;
-}
-
-@keyframes demo-grow {
-  0%,
-  6% {
-    scale: 1 1;
-  }
-
-  10%,
-  12% {
-    scale: 1 0;
-  }
-
-  24%,
-  100% {
-    scale: 1 1;
-  }
-}
-
-@keyframes demo-fade {
-  0%,
-  6% {
-    opacity: 1;
-  }
-
-  9%,
-  20% {
-    opacity: 0;
-  }
-
-  28%,
-  100% {
-    opacity: 1;
-  }
-}
-
-.demo-charts-line .mark-line path {
-  stroke-dasharray: 1200;
-  animation-name: demo-line;
-  animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
+.demo-variants {
+  display: grid;
+  align-items: start;
 }
 
-.demo-charts-line .mark-line + .mark-line path,
-.demo-charts-line .mark-line:nth-of-type(2) path {
-  animation-delay: 250ms;
+.demo-variant {
+  grid-area: 1 / 1;
+  transition:
+    opacity 450ms ease,
+    translate 450ms var(--ease-out);
 }
 
-@keyframes demo-line {
-  0%,
-  6% {
-    stroke-dashoffset: 0;
-  }
-
-  9%,
-  12% {
-    stroke-dashoffset: 1200;
-  }
-
-  40%,
-  100% {
-    stroke-dashoffset: 0;
-  }
+.demo-variant:not([data-on]) {
+  opacity: 0;
+  translate: 0 8px;
 }
 
 /* chips: each link turns into its chip in turn. */
@@ -1212,47 +1147,24 @@ kbd {
 }
 
 @keyframes demo-pop {
-  0%,
-  6% {
+  0% {
     opacity: 1;
     scale: 1;
-    filter: none;
   }
 
-  9%,
-  12% {
+  3%,
+  6% {
     opacity: 0;
     scale: 0.6;
-    filter: blur(4px);
   }
 
-  20%,
+  14%,
   100% {
     opacity: 1;
     scale: 1;
-    filter: none;
   }
 }
 
-/* icon: a row of logos, large enough to read as icons. */
-.demo-icon {
-  --z: 1;
-}
-
-.demo-icon p {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.875rem 1rem;
-  margin: 0;
-  font-size: 0;
-}
-
-.demo-icon .ci {
-  --comark-icon-size: 2.25rem;
-  font-size: 1rem;
-}
-
 /* github: the callouts land one after the other; the references light up in turn. */
 .demo-github .cgc {
   animation-name: demo-rise;
@@ -1263,7 +1175,21 @@ kbd {
 }
 
 .demo-github-references a {
-  animation-name: demo-pop;
+  border-radius: 4px;
+  animation-name: demo-tint;
+}
+
+@keyframes demo-tint {
+  0%,
+  16%,
+  100% {
+    background-color: transparent;
+  }
+
+  5%,
+  10% {
+    background-color: color-mix(in oklch, #3b82f6 20%, transparent);
+  }
 }
 
 .demo-github-references a:nth-of-type(2) {
@@ -1334,20 +1260,17 @@ kbd {
   31% {
     opacity: 1;
     translate: 0;
-    filter: none;
   }
 
   35%,
   97% {
     opacity: 0;
     translate: 0 4px;
-    filter: blur(2px);
   }
 
   100% {
     opacity: 1;
     translate: 0;
-    filter: none;
   }
 }
 
@@ -1376,17 +1299,14 @@ kbd {
 
 @keyframes demo-zoom {
   0%,
-  14%,
-  58%,
+  48%,
   100% {
     scale: 1;
-    box-shadow: 0 0 0 0 rgb(0 0 0 / 0);
   }
 
-  24%,
-  46% {
+  12%,
+  36% {
     scale: 1.28;
-    box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.45);
   }
 }
 
@@ -1402,21 +1322,21 @@ kbd {
 }
 
 @keyframes demo-slides {
-  0%,
-  28% {
+  0% {
     translate: 0;
   }
 
-  33%,
-  61% {
+  5%,
+  30% {
     translate: -100% 0;
   }
 
-  66%,
-  94% {
+  35%,
+  60% {
     translate: -200% 0;
   }
 
+  65%,
   100% {
     translate: 0;
   }
@@ -1442,50 +1362,45 @@ kbd {
 
 @keyframes demo-press {
   0%,
-  20%,
-  26%,
+  9%,
   100% {
     scale: 1;
   }
 
-  23% {
+  4% {
     scale: 0.9;
   }
 }
 
 @keyframes demo-icon-out {
   0%,
-  23%,
-  60%,
+  4%,
+  43%,
   100% {
     opacity: 1;
     scale: 1;
-    filter: none;
   }
 
-  27%,
-  56% {
+  8%,
+  39% {
     opacity: 0;
     scale: 0.25;
-    filter: blur(4px);
   }
 }
 
 @keyframes demo-icon-in {
   0%,
-  23%,
-  60%,
+  4%,
+  43%,
   100% {
     opacity: 0;
     scale: 0.25;
-    filter: blur(4px);
   }
 
-  27%,
-  56% {
+  8%,
+  39% {
     opacity: 1;
     scale: 1;
-    filter: none;
   }
 }
 
@@ -1515,19 +1430,18 @@ kbd {
 }
 
 @keyframes demo-unfold {
-  0%,
-  6% {
+  0% {
     opacity: 1;
     clip-path: inset(0);
   }
 
-  10%,
-  14% {
+  4%,
+  8% {
     opacity: 0;
     clip-path: inset(0 0 100% 0);
   }
 
-  26%,
+  20%,
   100% {
     opacity: 1;
     clip-path: inset(0);
@@ -1641,17 +1555,16 @@ kbd {
 }
 
 @keyframes demo-print {
-  0%,
-  4% {
+  0% {
     opacity: 1;
   }
 
-  6%,
-  10% {
+  2%,
+  6% {
     opacity: 0;
   }
 
-  11%,
+  7%,
   100% {
     opacity: 1;
   }
diff --git a/e2e/docs.e2e.ts b/e2e/docs.e2e.ts
index 049cf19b..dc98a24b 100644
--- a/e2e/docs.e2e.ts
+++ b/e2e/docs.e2e.ts
@@ -72,6 +72,62 @@ test("the index's canvas drags, coasts, and opens the card it was clicked on", a
   await expect(page).toHaveURL(card!.href);
 });
 
+test("the index's canvas shows every example once on screen, each at its own height", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.locator(".canvas-viewport").scrollIntoViewIfNeeded();
+  const { cards, onScreen, unsized } = await page.evaluate(() => {
+    const view = document.querySelector(".canvas-viewport")!.getBoundingClientRect();
+    const live = [...document.querySelectorAll<HTMLElement>(".canvas-stage .demo")];
+    const seen = live.filter((demo) => {
+      const r = demo.getBoundingClientRect();
+      return (
+        r.right > view.left && r.left < view.right && r.bottom > view.top && r.top < view.bottom
+      );
+    });
+    return {
+      cards:
+        document.querySelector<HTMLTemplateElement>("template.canvas-cards")!.content.children
+          .length,
+      onScreen: seen.map((demo) => demo.querySelector(".demo-source")!.textContent),
+      unsized: live.filter((demo) => !demo.style.height).length,
+    };
+  });
+  // The landing's demos and every package page's examples.
+  expect(cards).toBeGreaterThan(40);
+  expect(onScreen.length).toBeGreaterThan(8);
+  expect(new Set(onScreen).size).toBe(onScreen.length);
+  expect(unsized).toBe(0);
+});
+
+test("a chart card turns through its charts while the pointer is on it", async ({ page }) => {
+  await page.goto("/");
+  await page.locator(".canvas-viewport").scrollIntoViewIfNeeded();
+  // A chart card in view, placed where the pointer can reach it.
+  const at = await page.evaluate(() => {
+    const stage = document.querySelector<HTMLElement>(".canvas-stage")!;
+    const card = document
+      .querySelector<HTMLTemplateElement>("template.canvas-cards")!
+      .content.querySelector(".demo-charts")!
+      .cloneNode(true) as HTMLElement;
+    const [, x, y] = /translate3d\((-?[\d.]+)px, ?(-?[\d.]+)px/
+      .exec(stage.style.transform)!
+      .map(Number);
+    card.style.left = `${-x + 400}px`;
+    card.style.top = `${-y + 40}px`;
+    card.style.zIndex = "5";
+    card.id = "turning";
+    stage.append(card);
+    const r = card.getBoundingClientRect();
+    return { x: r.left + r.width / 2, y: r.top + 80 };
+  });
+  const on = page.locator("#turning .demo-variant[data-on]");
+  const first = await on.innerHTML();
+  await page.mouse.move(at.x, at.y);
+  await expect.poll(() => on.innerHTML(), { timeout: 3000 }).not.toBe(first);
+});
+
 test("the index's canvas switches to the list, and remembers it", async ({ page }) => {
   await page.goto("/");
   const canvas = page.locator(".canvas");