diff --git a/docs/src/components/home/MediaBackdrop.astro b/docs/src/components/home/MediaBackdrop.astro
index cb877e56..0d3e1525 100644
--- a/docs/src/components/home/MediaBackdrop.astro
+++ b/docs/src/components/home/MediaBackdrop.astro
@@ -5,9 +5,12 @@ import type { HomepageMedia } from "@/lib/homepageItems";
 
 interface Props {
   media: HomepageMedia;
+  // Fills the whole frame instead of matching the media's own shape, for
+  // frames that hold more than the media, such as a caption.
+  cover?: boolean;
 }
 
-const { media } = Astro.props;
+const { media, cover = false } = Astro.props;
 
 // A small copy is enough once it's blurred. Videos use their poster, which
 // the page loads anyway.
@@ -27,5 +30,8 @@ const src =
   aria-hidden="true"
   loading="lazy"
   decoding="async"
-  class="pointer-events-none absolute inset-0 size-full scale-110 object-contain opacity-40 blur-3xl"
+  class:list={[
+    "pointer-events-none absolute inset-0 size-full scale-110 opacity-40 blur-3xl",
+    cover ? "object-cover" : "object-contain",
+  ]}
 />
diff --git a/docs/src/components/home/presentations/AutoplayControl.astro b/docs/src/components/home/presentations/AutoplayControl.astro
index b86869d1..0a9750fd 100644
--- a/docs/src/components/home/presentations/AutoplayControl.astro
+++ b/docs/src/components/home/presentations/AutoplayControl.astro
@@ -2,10 +2,12 @@
 interface Props {
   // What the button plays, for its label: "Pause Network features".
   name: string;
+  // Round, borderless and grey, to sit beside the gallery's dot pill.
+  round?: boolean;
   class?: string;
 }
 
-const { name, class: className } = Astro.props;
+const { name, round = false, class: className } = Astro.props;
 ---
 
 <!-- Pauses, plays and replays the presentation's autoplay
@@ -18,7 +20,10 @@ const { name, class: className } = Astro.props;
   data-autoplay-status="playing"
   aria-label={`Pause ${name}`}
   class:list={[
-    "group grid size-9 flex-none cursor-pointer place-items-center rounded-lg border border-border bg-card text-text-dark transition-colors hover:border-primary hover:bg-primary/8",
+    "group grid size-9 flex-none cursor-pointer place-items-center text-text-dark transition-colors",
+    round
+      ? "rounded-full bg-surface hover:bg-surface-hover"
+      : "rounded-lg border border-border bg-card hover:border-primary hover:bg-primary/8",
     className,
   ]}
 >
diff --git a/docs/src/components/home/presentations/Gallery.astro b/docs/src/components/home/presentations/Gallery.astro
index ac65d4b2..c5691c2e 100644
--- a/docs/src/components/home/presentations/Gallery.astro
+++ b/docs/src/components/home/presentations/Gallery.astro
@@ -14,8 +14,6 @@ interface Props {
 }
 
 const { id, chapterName, items } = Astro.props;
-const arrowButtonClass =
-  "grid size-9 flex-none cursor-pointer place-items-center rounded-lg border border-border bg-card text-caption text-text-dark transition-colors hover:border-primary hover:bg-primary/8 disabled:cursor-default disabled:border-border disabled:bg-card disabled:opacity-35";
 ---
 
 <!-- Full-bleed track; `--edge` lines the first slide up with the chapter text. -->
@@ -40,41 +38,55 @@ const arrowButtonClass =
           aria-roledescription="slide"
           aria-label={`${index + 1} of ${items.length}`}
           data-current={index === 0 ? "" : undefined}
-          class="group flex max-w-full shrink-0 basis-[min(880px,84vw)] snap-start flex-col overflow-hidden rounded-lg border border-border bg-card transition-colors duration-500 ease-smooth motion-reduce:transition-none data-current:border-[color-mix(in_srgb,var(--chapter)_45%,var(--color-border))]"
+          style={`--slide-offset: ${Math.min(index, 1)}; --slide-distance: ${Math.min(index, 1)}`}
+          class="group relative flex aspect-square max-w-full shrink-0 basis-[min(880px,84vw)] snap-start flex-col overflow-hidden rounded-lg bg-surface sm:aspect-[3/2]"
         >
-          {/* The frame has a fixed shape so every slide lines up, and the
-              media letterboxes inside it rather than cropping. 4:3 on phones
-              splits the difference between the landscape and square media;
-              16:9 from sm fits most of it exactly. Neighbouring slides dim
-              their media only, so their captions stay readable. */}
-          <div class="relative aspect-[4/3] overflow-hidden border-b border-border bg-surface opacity-50 transition-opacity duration-500 ease-smooth group-data-current:opacity-100 motion-reduce:transition-none sm:aspect-video">
-            <MediaBackdrop media={item.media} />
-            <Media
-              media={item.media}
-              sizes="(min-width: 1048px) 880px, 84vw"
-              class="absolute inset-0 size-full object-contain"
-            />
+          {/* The card has a fixed shape so every slide lines up. A blurred
+              copy of the media fills it, so the caption sits on the media's
+              own colours, and the media letterboxes under the caption rather
+              than cropping. As a slide scrolls away from its resting place
+              (`--slide-offset`, set by the script below), its media dims,
+              shrinks and lags behind, and the backdrop swells and drifts
+              further; the captions stay readable. */}
+          <div class="absolute inset-0 opacity-[calc(1_-_var(--slide-distance)*0.5)] motion-safe:translate-x-[calc(var(--slide-offset)*-10%)] motion-safe:scale-[calc(1_+_var(--slide-distance)*0.2)]">
+            <MediaBackdrop media={item.media} cover />
           </div>
-          <p class="px-4 pt-3.5 pb-4 text-small text-muted sm:px-[22px] sm:pt-[18px] sm:pb-5">
-            <b class="mb-0.5 block text-copy text-muted transition-colors duration-500 ease-smooth group-data-current:text-text-dark motion-reduce:transition-none">
-              {item.title}
-            </b>
+          <p class="relative max-w-[34ch] p-6 text-intro font-semibold text-muted sm:p-9 sm:text-title-4 md:text-title-3">
+            <span
+              data-gallery-title
+              class="text-muted transition-colors duration-300 ease-smooth group-data-current:text-text-dark motion-reduce:transition-none"
+            >
+              {item.title}.
+            </span>{" "}
             {item.description}
           </p>
+          {/* The media shrinks to fit rather than filling the space, so its
+              rounded corners sit on its own edges. A video has no size until
+              its poster loads, so it holds 16:9 until then. */}
+          <div class="relative min-h-0 flex-1 opacity-[calc(1_-_var(--slide-distance)*0.5)]">
+            <div class="absolute inset-0 flex items-center justify-center px-6 pb-6 sm:px-9 sm:pb-9">
+              <Media
+                media={item.media}
+                sizes="(min-width: 1048px) 880px, 84vw"
+                class="aspect-[auto_16/9] h-auto max-h-full w-auto max-w-full rounded-lg motion-safe:translate-x-[calc(var(--slide-offset)*-10%)] motion-safe:scale-[calc(1_-_var(--slide-distance)*0.1)]"
+              />
+            </div>
+          </div>
         </div>
       ))
     }
   </div>
 
-  <!-- The picker line draws itself and the buttons slide in as the controls
-       scroll in (src/styles/animations.css). -->
+  <!-- The picker dots draw themselves and the autoplay button slides in as
+       the controls scroll in (src/styles/animations.css). -->
   <div
     class="mt-[22px] flex items-center gap-2.5 px-(--edge)"
     data-draw-row
     style={`--draw-count: ${items.length}`}
   >
     <p class="sr-only" aria-live="polite" data-gallery-status></p>
-    <div class="mr-auto flex max-w-[420px] flex-1 items-center gap-1.5">
+    <!-- A pill of dots; the current slide's dot stretches into a bar. -->
+    <div class="flex h-9 items-center gap-3 rounded-full bg-surface px-4">
       {
         items.map((item, index) => (
           <button
@@ -85,62 +97,39 @@ const arrowButtonClass =
             aria-label={`Show highlight ${index + 1}: ${item.title}`}
             data-draw
             style={`--draw-index: ${index}`}
-            class="relative h-[3px] flex-1 cursor-pointer rounded-sm bg-border after:absolute after:inset-x-0 after:-inset-y-2.5 aria-[current=true]:bg-muted"
+            class="group/dot relative h-[8px] w-[8px] flex-none cursor-pointer rounded-full bg-muted transition-[width,background-color] duration-500 ease-smooth after:absolute after:-inset-x-1.5 after:-inset-y-3.5 hover:bg-text-soft aria-[current=true]:w-[48px] aria-[current=true]:cursor-default aria-[current=true]:bg-muted motion-reduce:transition-none"
           >
-            {/* Fills up while autoplay shows the slide. */}
-            <span
-              data-autoplay-fill
-              class="absolute inset-0 origin-left scale-x-0 rounded-[inherit] bg-primary"
-            />
+            {/* Fills up while autoplay shows the slide; it slides in rather
+                than stretching, so its leading edge stays round. */}
+            <span class="absolute inset-0 overflow-hidden rounded-[inherit]">
+              <span
+                data-autoplay-fill
+                class="absolute inset-0 translate-x-[calc(var(--autoplay-fill,0)*100%_-_100%)] rounded-[inherit] bg-text-dark opacity-0 group-aria-[current=true]/dot:opacity-100"
+              />
+            </span>
           </button>
         ))
       }
     </div>
-    <button
-      type="button"
-      data-gallery-prev
-      aria-controls={`${id}-track`}
-      aria-label="Previous highlight"
-      class={arrowButtonClass}
-      data-draw-control
-      disabled
-    >
-      ←
-    </button>
-    <AutoplayControl name={`${chapterName} highlights`} />
-    <button
-      type="button"
-      data-gallery-next
-      aria-controls={`${id}-track`}
-      aria-label="Next highlight"
-      class={arrowButtonClass}
-      data-draw-control
-    >
-      →
-    </button>
+    <AutoplayControl name={`${chapterName} highlights`} round />
   </div>
 </div>
 
 <script>
   import { createAutoplay } from "@/lib/utils/autoplay";
-  import { nearestIndex } from "@/lib/utils/presentationIndex";
-
-  // The pickers and arrows scroll the track to a slide. Swipes, trackpad
-  // scrolls and arrow keys on the focused track scroll it natively, and the
-  // current slide follows once the track settles. Autoplay moves through the
-  // slides and plays the current slide's video; neighbouring slides are on
-  // screen too, but their videos stay on their posters.
+  import { slidePosition } from "@/lib/utils/presentationIndex";
+
+  // The pickers scroll the track to a slide. Swipes, trackpad scrolls and
+  // arrow keys on the focused track scroll it natively, and the current slide
+  // follows as soon as the track passes halfway to the next one. Autoplay
+  // moves through the slides and plays the current slide's video;
+  // neighbouring slides are on screen too, but their videos stay on their
+  // posters.
   function initGalleries() {
     document
       .querySelectorAll<HTMLElement>('[data-presentation-root="gallery"]')
       .forEach((root) => {
         const track = root.querySelector<HTMLElement>("[data-gallery-track]");
-        const prev = root.querySelector<HTMLButtonElement>(
-          "[data-gallery-prev]",
-        );
-        const next = root.querySelector<HTMLButtonElement>(
-          "[data-gallery-next]",
-        );
         const control = root.querySelector<HTMLButtonElement>(
           "[data-autoplay-control]",
         );
@@ -153,18 +142,39 @@ const arrowButtonClass =
         const pickers = [
           ...root.querySelectorAll<HTMLButtonElement>("[data-gallery-picker]"),
         ];
-        if (!track || !prev || !next || !control || slides.length === 0) {
-          return;
-        }
+        if (!track || !control || slides.length === 0) return;
 
         let current = 0;
-        // Set while the track scrolls to a picked slide, so the scroll it
-        // causes doesn't pick another one.
+        // Set while the track scrolls to a picked slide, so the slides it
+        // passes on the way don't become current.
         let picked: number | undefined;
         let settle: number | undefined;
 
-        const starts = () =>
-          slides.map((slide) => slide.offsetLeft - slides[0].offsetLeft);
+        // Where the track rests for each slide; the last slides may stop
+        // short of their start.
+        const rests = () => {
+          const end = track.scrollWidth - track.clientWidth;
+          return slides.map((slide) =>
+            Math.min(slide.offsetLeft - slides[0].offsetLeft, end),
+          );
+        };
+        const position = () => slidePosition(rests(), track.scrollLeft);
+
+        // Tells each slide how far it is from its resting place, from -1
+        // (a slide to the left) to 1 (a slide to the right), for its scroll
+        // effects.
+        const follow = () => {
+          const at = position();
+          slides.forEach((slide, i) => {
+            const offset = Math.max(-1, Math.min(1, i - at));
+            slide.style.setProperty("--slide-offset", String(offset));
+            slide.style.setProperty(
+              "--slide-distance",
+              String(Math.abs(offset)),
+            );
+          });
+          return at;
+        };
 
         // Marks a slide current. Autoplay's own moves aren't announced, so a
         // screen reader isn't interrupted every few seconds.
@@ -177,21 +187,14 @@ const arrowButtonClass =
             picker.setAttribute("aria-current", String(i === index)),
           );
           if (status && announce) {
-            status.textContent = `Highlight ${index + 1} of ${slides.length}: ${slides[index].querySelector("b")?.textContent?.trim() ?? ""}`;
+            status.textContent = `Highlight ${index + 1} of ${slides.length}: ${slides[index].querySelector("[data-gallery-title]")?.textContent?.trim() ?? ""}`;
           }
-          prev.disabled = index === 0;
-          next.disabled = index === slides.length - 1;
         };
 
-        // Where the track scrolls to for a slide; the last slides may stop
-        // short of their start.
-        const scrollTarget = (index: number) =>
-          Math.min(starts()[index], track.scrollWidth - track.clientWidth);
-
         // Marks a slide current and scrolls the track to it.
         const goTo = (index: number, announce = true) => {
           mark(index, announce);
-          const left = scrollTarget(index);
+          const left = rests()[index];
           // Already there: no scroll follows to clear `picked`.
           if (Math.abs(track.scrollLeft - left) < 1) return;
           picked = index;
@@ -209,51 +212,42 @@ const arrowButtonClass =
           control,
           show: (index) => goTo(index, false),
         });
-        // The visitor picked a slide with a picker or an arrow.
-        const pickSlide = (index: number) => {
-          goTo(index);
+
+        // The visitor brought another slide in by scrolling.
+        const scrolledTo = (index: number) => {
+          if (index === current) return;
+          mark(index);
           autoplay.pick(index);
         };
 
         pickers.forEach((picker, index) =>
-          picker.addEventListener("click", () => pickSlide(index)),
-        );
-        prev.addEventListener("click", () =>
-          pickSlide(Math.max(0, current - 1)),
-        );
-        next.addEventListener("click", () =>
-          pickSlide(Math.min(slides.length - 1, current + 1)),
+          picker.addEventListener("click", () => {
+            goTo(index);
+            autoplay.pick(index);
+          }),
         );
 
         track.addEventListener(
           "scroll",
           () => {
+            // Scroll events come at most once a frame, so the effects can
+            // follow every one.
+            const at = follow();
+            if (picked === undefined) scrolledTo(Math.round(at));
+            // A swipe that interrupted the scroll to a picked slide picks by
+            // position once the track settles.
             window.clearTimeout(settle);
             settle = window.setTimeout(() => {
-              // A picked slide the track reached stays current, even if
-              // another slide's start is nearer. A swipe that interrupted the
-              // scroll to it picks by position instead.
-              const target =
-                picked === undefined ? undefined : scrollTarget(picked);
+              if (picked === undefined) return;
+              const reached = Math.abs(track.scrollLeft - rests()[picked]) < 2;
               picked = undefined;
-              if (
-                target !== undefined &&
-                Math.abs(track.scrollLeft - target) < 2
-              )
-                return;
-              const index = nearestIndex(
-                starts(),
-                track.scrollLeft,
-                track.scrollWidth - track.clientWidth,
-              );
-              if (index !== current) {
-                mark(index);
-                autoplay.pick(index);
-              }
+              if (!reached) scrolledTo(Math.round(position()));
             }, 120);
           },
           { passive: true },
         );
+
+        follow();
       });
   }
 
diff --git a/docs/src/components/home/presentations/Tabs.astro b/docs/src/components/home/presentations/Tabs.astro
index b2302d51..9f39ebf8 100644
--- a/docs/src/components/home/presentations/Tabs.astro
+++ b/docs/src/components/home/presentations/Tabs.astro
@@ -104,7 +104,7 @@ const { id, chapterName, items, aside } = Astro.props;
               >
                 <span
                   data-autoplay-fill
-                  class="absolute inset-0 origin-left scale-x-0 bg-primary"
+                  class="absolute inset-0 origin-left scale-x-[var(--autoplay-fill,0)] bg-primary"
                 />
               </span>
               <span
diff --git a/docs/src/lib/utils/autoplay.ts b/docs/src/lib/utils/autoplay.ts
index 4faed1a3..e3f73150 100644
--- a/docs/src/lib/utils/autoplay.ts
+++ b/docs/src/lib/utils/autoplay.ts
@@ -17,7 +17,8 @@ const IMAGE_MS = 5000;
 const MAX_FRAME_MS = 100;
 
 interface AutoplayItem {
-  // The fill of the item's progress bar.
+  // The fill of the item's progress bar. Autoplay sets its `--autoplay-fill`,
+  // from 0 to 1, and the presentation draws the fill from that.
   fill: HTMLElement | null;
   video: HTMLVideoElement | null;
 }
@@ -69,7 +70,7 @@ export function createAutoplay({
   const render = () => {
     progressFills(state, progress()).forEach((fill, index) => {
       const bar = items[index].fill;
-      if (bar) bar.style.scale = `${fill} 1`;
+      bar?.style.setProperty("--autoplay-fill", String(fill));
     });
   };
 
diff --git a/docs/src/lib/utils/presentationIndex.ts b/docs/src/lib/utils/presentationIndex.ts
index eb6c5f6f..dc5f8ec2 100644
--- a/docs/src/lib/utils/presentationIndex.ts
+++ b/docs/src/lib/utils/presentationIndex.ts
@@ -22,22 +22,19 @@ export function indexForKey(
   return step === undefined ? undefined : (current + step + count) % count;
 }
 
-// The slide whose start is closest to `position`, the track's scroll offset.
-// A track scrolled to `end` (its largest offset) settles on the last slide,
-// which on wide screens cannot scroll all the way to its start.
-export function nearestIndex(
-  starts: readonly number[],
-  position: number,
-  end = Infinity,
-) {
-  if (position >= end - 1) return starts.length - 1;
-  let nearest = 0;
-  starts.forEach((start, index) => {
-    if (Math.abs(start - position) < Math.abs(starts[nearest] - position)) {
-      nearest = index;
-    }
-  });
-  return nearest;
+// How many slides along a track is at `position`, its scroll offset: 2 when
+// it rests on the third slide, 2.5 halfway to the fourth. `rests` are the
+// offsets the track rests at for each slide, in order; on wide screens the
+// last slides rest at the track's end, short of their start. Round it for the
+// nearest slide.
+export function slidePosition(rests: readonly number[], position: number) {
+  if (position <= rests[0]) return 0;
+  for (let index = 0; index < rests.length - 1; index++) {
+    const from = rests[index];
+    const to = rests[index + 1];
+    if (position < to) return index + (position - from) / (to - from);
+  }
+  return rests.length - 1;
 }
 
 interface ScrollRow {
diff --git a/docs/tests/build-output.test.js b/docs/tests/build-output.test.js
index e9d0c0bc..89632a08 100644
--- a/docs/tests/build-output.test.js
+++ b/docs/tests/build-output.test.js
@@ -380,10 +380,8 @@ test("homepage galleries follow the ARIA carousel pattern", () => {
       slides.map((_, index) => index === 0),
       `${id}: first slide current`,
     );
-    // The visual counter is aria-hidden; slide changes are announced here.
+    // Slide changes are announced here.
     assert.match(body, /<[^>]*aria-live="polite"[^>]*data-gallery-status/, id);
-    assert.match(body, /<button[^>]*aria-label="Previous highlight"/);
-    assert.match(body, /<button[^>]*aria-label="Next highlight"/);
   }
 });
 
diff --git a/docs/tests/presentation-index.test.js b/docs/tests/presentation-index.test.js
index 7736f9a6..f1da71b0 100644
--- a/docs/tests/presentation-index.test.js
+++ b/docs/tests/presentation-index.test.js
@@ -3,8 +3,8 @@ import assert from "node:assert/strict";
 
 import {
   indexForKey,
-  nearestIndex,
   scrollToReveal,
+  slidePosition,
 } from "../src/lib/utils/presentationIndex.ts";
 
 test("arrow keys along the orientation move to the neighbouring item", () => {
@@ -31,22 +31,36 @@ test("keys across the orientation, and other keys, do nothing", () => {
   assert.equal(indexForKey("Enter", 1, 4, "horizontal"), undefined);
 });
 
-test("a swipe settles on the slide whose start is closest to the scroll position", () => {
-  // Slide starts of a track with 900px slides and a 20px gap.
-  const starts = [0, 920, 1840, 2760];
-  assert.equal(nearestIndex(starts, 0), 0);
-  assert.equal(nearestIndex(starts, 400), 0);
-  assert.equal(nearestIndex(starts, 500), 1);
-  assert.equal(nearestIndex(starts, 1900), 2);
-  // Scrolled past the last start, as the end of a track can be.
-  assert.equal(nearestIndex(starts, 3200), 3);
+test("the track's position counts slides, with fractions between them", () => {
+  // Where the track rests for each slide: 900px slides and a 20px gap.
+  const rests = [0, 920, 1840, 2760];
+  assert.equal(slidePosition(rests, 0), 0);
+  assert.equal(slidePosition(rests, 460), 0.5);
+  assert.equal(slidePosition(rests, 920), 1);
+  assert.equal(slidePosition(rests, 2070), 2.25);
+  assert.equal(slidePosition(rests, 2760), 3);
 });
 
-test("a track scrolled all the way to its end settles on the last slide", () => {
-  // On wide screens the last slides cannot scroll to their start.
-  const starts = [0, 920, 1840, 2760];
-  assert.equal(nearestIndex(starts, 2300, 2300), 3);
-  assert.equal(nearestIndex(starts, 1900, 2300), 2);
+test("the position stays within the first and last slide", () => {
+  // Overscroll past either end, as a trackpad bounce can report.
+  const rests = [0, 920, 1840, 2760];
+  assert.equal(slidePosition(rests, -40), 0);
+  assert.equal(slidePosition(rests, 3200), 3);
+});
+
+test("slides that rest short of their start still count as whole slides", () => {
+  // On wide screens the last slide cannot scroll to its start, so it rests at
+  // the end of the track, 2300 instead of 2760.
+  const rests = [0, 920, 1840, 2300];
+  assert.equal(slidePosition(rests, 2070), 2.5);
+  assert.equal(slidePosition(rests, 2300), 3);
+});
+
+test("a swipe settles on the nearest slide", () => {
+  const rests = [0, 920, 1840, 2760];
+  assert.equal(Math.round(slidePosition(rests, 400)), 0);
+  assert.equal(Math.round(slidePosition(rests, 500)), 1);
+  assert.equal(Math.round(slidePosition(rests, 1900)), 2);
 });
 
 test("a tab already inside the scrolling row needs no scroll", () => {