diff --git a/.gitignore b/.gitignore
index 397d61a..d7f7401 100644
--- a/.gitignore
+++ b/.gitignore
@@ -49,6 +49,8 @@ next-env.d.ts
 
 # wrangler files
 .wrangler
+# wrangler's "is there a newer version" cache, written on every install.
+update-check
 .dev.vars*
 !.dev.vars.example
 !.env.example
diff --git a/e2e/helpers.ts b/e2e/helpers.ts
index c4e5b84..2c54984 100644
--- a/e2e/helpers.ts
+++ b/e2e/helpers.ts
@@ -19,3 +19,31 @@ export function aside(page: Page): Locator {
 export function asideRow(page: Page, name: string): Locator {
   return aside(page).getByRole("treeitem", { name, exact: true });
 }
+
+/**
+ * Drags horizontally across an element, in `steps` moves of `dx / steps` px.
+ *
+ * `pauseMs` between the moves is what controls the gesture's *velocity*, which
+ * the swipe recogniser weighs alongside distance: without a pause Playwright
+ * replays the whole drag in a couple of milliseconds, and every swipe — however
+ * short — reads as a flick.
+ */
+export async function dragHorizontally(
+  page: Page,
+  target: Locator,
+  { dx, steps = 8, pauseMs = 0 }: { dx: number; steps?: number; pauseMs?: number },
+) {
+  const box = await target.boundingBox();
+  if (!box) throw new Error("Swipe target has no bounding box");
+
+  const startX = box.x + box.width / 2;
+  const y = box.y + Math.min(box.height / 2, 160);
+
+  await page.mouse.move(startX, y);
+  await page.mouse.down();
+  for (let step = 1; step <= steps; step++) {
+    await page.mouse.move(startX + (dx * step) / steps, y);
+    if (pauseMs) await page.waitForTimeout(pauseMs);
+  }
+  await page.mouse.up();
+}
diff --git a/e2e/mobile.spec.ts b/e2e/mobile.spec.ts
new file mode 100644
index 0000000..f045949
--- /dev/null
+++ b/e2e/mobile.spec.ts
@@ -0,0 +1,130 @@
+import { test, expect, type Page } from "@playwright/test";
+import { dragHorizontally } from "./helpers";
+
+/**
+ * The touch layout's feed, which below `lg` replaces the aside entirely.
+ *
+ * Driven with the mouse rather than `page.touchscreen`: the gesture listens to
+ * pointer events, which both devices raise, and Playwright's touchscreen API
+ * cannot express a drag. What matters — the axis lock, the distance and
+ * velocity thresholds, the suppressed click — is identical either way.
+ */
+test.use({ viewport: { width: 390, height: 844 }, hasTouch: true });
+
+/** Waits for the mobile home rather than the aside `gotoApp` looks for. */
+async function gotoMobileApp(page: Page) {
+  await page.goto("/app");
+  await expect(page.getByRole("tab", { name: "Recent" })).toBeVisible();
+}
+
+function panel(page: Page) {
+  return page.getByRole("tabpanel");
+}
+
+async function expectSelected(page: Page, name: "Recent" | "My Space") {
+  await expect(page.getByRole("tab", { name })).toHaveAttribute("aria-selected", "true");
+}
+
+test("swipes between Recent and My Space, and back", async ({ page }) => {
+  await gotoMobileApp(page);
+  await expectSelected(page, "Recent");
+
+  await dragHorizontally(page, panel(page), { dx: -220 });
+  await expectSelected(page, "My Space");
+  // The seeded folder's row only exists in the structure tab, so the panel
+  // really did change and not just the pill.
+  await expect(panel(page).getByRole("button", { name: /welcome/ })).toBeVisible();
+
+  await dragHorizontally(page, panel(page), { dx: 220 });
+  await expectSelected(page, "Recent");
+});
+
+test("the switcher follows the finger before the swipe is released", async ({ page }) => {
+  await gotoMobileApp(page);
+
+  const box = await panel(page).boundingBox();
+  if (!box) throw new Error("Panel has no bounding box");
+  const startX = box.x + box.width / 2;
+  const y = box.y + 120;
+
+  const main = page.getByRole("main");
+  await page.mouse.move(startX, y);
+  await page.mouse.down();
+  await page.mouse.move(startX - 40, y);
+  await page.mouse.move(startX - 120, y);
+
+  // Mid-gesture the pill sits between the two tabs rather than waiting for the
+  // release, and its settle animation is suspended so it tracks the finger.
+  await expect(main).toHaveAttribute("data-swiping", "true");
+  const progress = await main.evaluate((el) =>
+    Number(getComputedStyle(el).getPropertyValue("--tab-progress")),
+  );
+  expect(progress).toBeGreaterThan(0);
+  expect(progress).toBeLessThan(1);
+
+  await page.mouse.up();
+  await expect(main).not.toHaveAttribute("data-swiping", "true");
+  await expectSelected(page, "My Space");
+});
+
+test("a swipe that falls short springs back", async ({ page }) => {
+  await gotoMobileApp(page);
+
+  // Under the commit distance, and slow enough not to count as a flick.
+  await dragHorizontally(page, panel(page), { dx: -60, pauseMs: 40 });
+  await expectSelected(page, "Recent");
+});
+
+test("a short flick still commits", async ({ page }) => {
+  await gotoMobileApp(page);
+
+  await dragHorizontally(page, panel(page), { dx: -60 });
+  await expectSelected(page, "My Space");
+});
+
+test("swiping past the last tab stays there", async ({ page }) => {
+  await gotoMobileApp(page);
+
+  // Right from the first tab: there is nothing before Recent to reveal.
+  await dragHorizontally(page, panel(page), { dx: 260 });
+  await expectSelected(page, "Recent");
+});
+
+test("a vertical drag scrolls the feed instead of changing tab", async ({ page }) => {
+  await gotoMobileApp(page);
+
+  const box = await panel(page).boundingBox();
+  if (!box) throw new Error("Panel has no bounding box");
+  const x = box.x + box.width / 2;
+  await page.mouse.move(x, box.y + 120);
+  await page.mouse.down();
+  // Mostly vertical, with the sideways wobble a real thumb adds.
+  for (let step = 1; step <= 8; step++) {
+    await page.mouse.move(x + step, box.y + 120 - step * 12);
+  }
+  await page.mouse.up();
+
+  await expectSelected(page, "Recent");
+});
+
+test("swiping off a snippet card does not open the snippet", async ({ page }) => {
+  await gotoMobileApp(page);
+
+  const card = page.getByRole("button", { name: "klipcode.md", exact: true }).first();
+  await expect(card).toBeVisible();
+
+  await dragHorizontally(page, card, { dx: -220 });
+
+  await expectSelected(page, "My Space");
+  await expect(page).toHaveURL(/\/app$/);
+});
+
+test("the tab buttons still switch on their own", async ({ page }) => {
+  await gotoMobileApp(page);
+
+  await page.getByRole("tab", { name: "My Space" }).click();
+  await expectSelected(page, "My Space");
+
+  await page.getByRole("tab", { name: "Recent" }).click();
+  await expectSelected(page, "Recent");
+});
diff --git a/src/__tests__/tabSwipe.test.ts b/src/__tests__/tabSwipe.test.ts
new file mode 100644
index 0000000..fca604f
--- /dev/null
+++ b/src/__tests__/tabSwipe.test.ts
@@ -0,0 +1,179 @@
+import { describe, it, expect } from "vitest";
+
+import {
+  applyTabSwipe,
+  contentShift,
+  detectSwipeAxis,
+  resolveSwipe,
+  setTabSwiping,
+  SWIPE_AXIS_SLOP,
+  SWIPE_COMMIT_RATIO,
+  SWIPE_COMMIT_VELOCITY,
+  TAB_PROGRESS_VAR,
+  TAB_SHIFT_VAR,
+  tabProgress,
+} from "@/lib/tabSwipe";
+
+/** The mobile feed: two tabs across a phone-width panel. */
+const WIDTH = 390;
+const COUNT = 2;
+
+/** Distance that is unambiguously past the commit threshold. */
+const FAR = WIDTH * SWIPE_COMMIT_RATIO + 1;
+/** Slow enough that only distance can commit the swipe. */
+const SLOW = 2000;
+
+// ── detectSwipeAxis() ─────────────────────────────────────────────────────────
+
+describe("detectSwipeAxis()", () => {
+  it("stays undecided until the finger has cleared the slop", () => {
+    expect(detectSwipeAxis(SWIPE_AXIS_SLOP - 1, 0)).toBeNull();
+    expect(detectSwipeAxis(0, SWIPE_AXIS_SLOP - 1)).toBeNull();
+    expect(detectSwipeAxis(0, 0)).toBeNull();
+  });
+
+  it("commits to the dominant axis once it has", () => {
+    expect(detectSwipeAxis(40, 5)).toBe("horizontal");
+    expect(detectSwipeAxis(-40, 5)).toBe("horizontal");
+    expect(detectSwipeAxis(5, 40)).toBe("vertical");
+    expect(detectSwipeAxis(5, -40)).toBe("vertical");
+  });
+
+  it("gives a tie to the scroll, which is what a list is expected to do", () => {
+    expect(detectSwipeAxis(30, 30)).toBe("vertical");
+  });
+
+  it("measures the slop on the axis that is actually moving", () => {
+    // A long vertical drag with a 2px horizontal wobble is a scroll.
+    expect(detectSwipeAxis(2, 200)).toBe("vertical");
+  });
+});
+
+// ── tabProgress() ─────────────────────────────────────────────────────────────
+
+describe("tabProgress()", () => {
+  it("moves toward the next tab as the finger goes left", () => {
+    expect(tabProgress(0, -WIDTH / 2, WIDTH, COUNT)).toBeCloseTo(0.5);
+    expect(tabProgress(0, -WIDTH, WIDTH, COUNT)).toBeCloseTo(1);
+  });
+
+  it("moves toward the previous tab as the finger goes right", () => {
+    expect(tabProgress(1, WIDTH / 4, WIDTH, COUNT)).toBeCloseTo(0.75);
+  });
+
+  it("never leaves the range of tabs that exist", () => {
+    expect(tabProgress(0, WIDTH, WIDTH, COUNT)).toBe(0);
+    expect(tabProgress(1, -WIDTH * 3, WIDTH, COUNT)).toBe(COUNT - 1);
+  });
+
+  it("holds still for a degenerate surface", () => {
+    expect(tabProgress(1, -200, 0, COUNT)).toBe(1);
+    expect(tabProgress(0, -200, WIDTH, 1)).toBe(0);
+  });
+});
+
+// ── contentShift() ────────────────────────────────────────────────────────────
+
+describe("contentShift()", () => {
+  it("follows the finger, damped, in the same direction", () => {
+    const shift = contentShift(0, -100, WIDTH, COUNT);
+    expect(shift).toBeLessThan(0);
+    expect(Math.abs(shift)).toBeLessThan(100);
+  });
+
+  it("resists much harder when there is no tab to reveal", () => {
+    const free = Math.abs(contentShift(0, -100, WIDTH, COUNT));
+    const againstTheEdge = Math.abs(contentShift(0, 100, WIDTH, COUNT));
+    expect(againstTheEdge).toBeGreaterThan(0);
+    expect(againstTheEdge).toBeLessThan(free);
+  });
+
+  it("caps the follow however far the finger goes", () => {
+    const far = Math.abs(contentShift(0, -5000, WIDTH, COUNT));
+    const further = Math.abs(contentShift(0, -50_000, WIDTH, COUNT));
+    expect(far).toBe(further);
+    expect(far).toBeLessThanOrEqual(56);
+  });
+
+  it("does not move at all without a gesture, or without a surface", () => {
+    expect(contentShift(0, 0, WIDTH, COUNT)).toBe(0);
+    expect(contentShift(0, -100, 0, COUNT)).toBe(0);
+  });
+});
+
+// ── resolveSwipe() ────────────────────────────────────────────────────────────
+
+describe("resolveSwipe()", () => {
+  it("moves to the next tab on a long drag left", () => {
+    expect(resolveSwipe(0, -FAR, SLOW, WIDTH, COUNT)).toBe(1);
+  });
+
+  it("moves back on a long drag right", () => {
+    expect(resolveSwipe(1, FAR, SLOW, WIDTH, COUNT)).toBe(0);
+  });
+
+  it("springs back when a slow drag falls short", () => {
+    const short = WIDTH * SWIPE_COMMIT_RATIO - 1;
+    expect(resolveSwipe(0, -short, SLOW, WIDTH, COUNT)).toBe(0);
+  });
+
+  it("commits a short drag that was flicked", () => {
+    const short = WIDTH * SWIPE_COMMIT_RATIO - 1;
+    const quick = short / (SWIPE_COMMIT_VELOCITY * 2);
+    expect(resolveSwipe(0, -short, quick, WIDTH, COUNT)).toBe(1);
+  });
+
+  it("ignores a flick too small to be a gesture at all", () => {
+    // Below the axis slop nothing was ever painted, so nothing may commit.
+    expect(resolveSwipe(0, -(SWIPE_AXIS_SLOP - 1), 1, WIDTH, COUNT)).toBe(0);
+  });
+
+  it("stays put at the ends", () => {
+    expect(resolveSwipe(0, FAR, SLOW, WIDTH, COUNT)).toBe(0);
+    expect(resolveSwipe(1, -FAR, SLOW, WIDTH, COUNT)).toBe(1);
+  });
+
+  it("can still commit when the surface has no measurable width", () => {
+    expect(resolveSwipe(0, -100, 10, WIDTH, COUNT)).toBe(1);
+  });
+
+  it("does nothing with fewer than two tabs", () => {
+    expect(resolveSwipe(0, -FAR, SLOW, WIDTH, 1)).toBe(0);
+  });
+});
+
+// ── painting ──────────────────────────────────────────────────────────────────
+
+describe("applyTabSwipe() / setTabSwiping()", () => {
+  /** A stand-in for the container element: only `style` and `dataset` matter. */
+  function fakeElement() {
+    const properties = new Map<string, string>();
+    return {
+      dataset: {} as Record<string, string | undefined>,
+      style: {
+        setProperty: (name: string, value: string) => void properties.set(name, value),
+      },
+      read: (name: string) => properties.get(name),
+    };
+  }
+
+  it("writes both custom properties, the shift in px", () => {
+    const el = fakeElement();
+    applyTabSwipe(el as unknown as HTMLElement, 0.25, -12.5);
+    expect(el.read(TAB_PROGRESS_VAR)).toBe("0.25");
+    expect(el.read(TAB_SHIFT_VAR)).toBe("-12.5px");
+  });
+
+  it("adds and removes the flag that suspends the settle animation", () => {
+    const el = fakeElement();
+    setTabSwiping(el as unknown as HTMLElement, true);
+    expect(el.dataset.swiping).toBe("true");
+    setTabSwiping(el as unknown as HTMLElement, false);
+    expect("swiping" in el.dataset).toBe(false);
+  });
+
+  it("tolerates an element that is not mounted", () => {
+    expect(() => applyTabSwipe(null, 1, 0)).not.toThrow();
+    expect(() => setTabSwiping(null, true)).not.toThrow();
+  });
+});
diff --git a/src/components/MobileHome/FeedTabs.tsx b/src/components/MobileHome/FeedTabs.tsx
index c7f850a..e2e1bc4 100644
--- a/src/components/MobileHome/FeedTabs.tsx
+++ b/src/components/MobileHome/FeedTabs.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { SWIPE_TRANSITION, TAB_PROGRESS_VAR } from "@/lib/tabSwipe";
 import { cn } from "@/lib/utils";
 
 /**
@@ -16,14 +17,14 @@ import { cn } from "@/lib/utils";
  * segment is exactly half, the pill moves by its own width, and its inner copy
  * counter-slides by half of its own doubled width. No refs, no measuring, no
  * resize observer.
+ *
+ * The pill's position is not read from `active` but from {@link
+ * TAB_PROGRESS_VAR}, inherited from the ancestor `useSwipeTabs` writes to. A
+ * press moves that property between whole numbers and the transition below
+ * animates the gap; a swipe moves it continuously and suspends the transition.
+ * One pill, one animation, two ways to ask for it.
  */
 
-/** Tailwind v4 compiles `translate-x-full` to the `translate` property, not to
- *  `transform` — transitioning the wrong one leaves the pill snapping. Kept as
- *  classes rather than an inline style so `motion-reduce` can still win. */
-const SLIDE =
-  "transition-[translate] duration-[420ms] ease-[cubic-bezier(0.34,1.4,0.64,1)] motion-reduce:transition-none";
-
 /** The three stacked copies of the row must agree on their columns exactly. */
 const ROW = "flex h-11 items-center";
 const CELL = "flex-1 truncate px-3 text-center text-[13.5px] font-medium";
@@ -47,13 +48,8 @@ export function FeedTabs<T extends string>({
   panelId: string;
   onSelect: (id: T) => void;
 }) {
-  const shifted = active === tabs[1].id;
-
   return (
-    <div
-      role="tablist"
-      className="relative h-11 overflow-hidden rounded-full bg-ink/[0.06]"
-    >
+    <div role="tablist" className="relative h-11 overflow-hidden rounded-full bg-ink/[0.06]">
       <div aria-hidden="true" className={cn(ROW, "absolute inset-0")}>
         {tabs.map((t) => (
           <span key={t.id} className={cn(CELL, "text-faint")}>
@@ -66,17 +62,13 @@ export function FeedTabs<T extends string>({
         aria-hidden="true"
         className={cn(
           "absolute inset-y-0 left-0 w-1/2 overflow-hidden rounded-full bg-ink",
-          SLIDE,
-          shifted && "translate-x-full",
+          SWIPE_TRANSITION,
         )}
+        style={{ translate: `calc(var(${TAB_PROGRESS_VAR}, 0) * 100%)` }}
       >
         <div
-          className={cn(
-            ROW,
-            "absolute inset-y-0 left-0 w-[200%]",
-            SLIDE,
-            shifted && "-translate-x-1/2",
-          )}
+          className={cn(ROW, "absolute inset-y-0 left-0 w-[200%]", SWIPE_TRANSITION)}
+          style={{ translate: `calc(var(${TAB_PROGRESS_VAR}, 0) * -50%)` }}
         >
           {tabs.map((t) => (
             <span key={t.id} className={cn(CELL, "text-background")}>
diff --git a/src/components/MobileHome/MobileHome.tsx b/src/components/MobileHome/MobileHome.tsx
index 80210ec..4b6e331 100644
--- a/src/components/MobileHome/MobileHome.tsx
+++ b/src/components/MobileHome/MobileHome.tsx
@@ -19,7 +19,9 @@ import { ContextMenu, type ContextMenuGroup } from "@/components/ContextMenu/Con
 import type { MenuTarget } from "@/components/Aside/types";
 import { useContextMenuGroups } from "@/components/Aside/useContextMenuGroups";
 import { sortByPinThenAlpha } from "@/components/Aside/utils";
+import { useSwipeTabs } from "@/hooks/useSwipeTabs";
 import { TOUCH_TARGET } from "@/lib/constants/layout";
+import { SWIPE_GROUP, SWIPE_TRANSITION, TAB_SHIFT_VAR } from "@/lib/tabSwipe";
 import { cn } from "@/lib/utils";
 import { Spinner } from "@/ui/Spinner";
 
@@ -30,8 +32,10 @@ import { FolderGroup, NewFolderCard } from "./FolderGroup";
 import { orderRecentSnippets } from "./ordering";
 import type { MobileHomeProps } from "./types";
 
-/** The mobile home is one list; the tabs only change what fills it. */
-type FeedTab = "recent" | "space";
+/** The mobile home is one list; the tabs only change what fills it. In order,
+ *  because a swipe moves between neighbours and has to know which is which. */
+const FEED_TABS = ["recent", "space"] as const;
+type FeedTab = (typeof FEED_TABS)[number];
 
 /**
  * The workspace as a full-screen destination, for touch layouts.
@@ -49,6 +53,11 @@ type FeedTab = "recent" | "space";
  * machinery for them bought this screen nothing. Everything else a row can do
  * still comes from the shared {@link useContextMenuGroups} builder, so the two
  * shells can never drift on what "delete" or "pin" means.
+ *
+ * Deliberately present instead: a horizontal drag anywhere across the list
+ * moves between the two tabs (see {@link useSwipeTabs}). Reaching a 44px pill
+ * at the top of the screen is the one thing a thumb is worst at, and it was
+ * the only way through.
  */
 export function MobileHome({
   user,
@@ -79,6 +88,8 @@ export function MobileHome({
   const tabsId = useId();
   const panelId = `${tabsId}-panel`;
 
+  const swipe = useSwipeTabs({ ids: FEED_TABS, active: tab, onSelect: setTab });
+
   /* ── Data shaping ──────────────────────────────────────────────────────── */
 
   const foldersByParent = useMemo(() => {
@@ -319,7 +330,11 @@ export function MobileHome({
       <main
         id="main-content"
         tabIndex={-1}
-        className="relative flex h-dvh flex-col overflow-hidden bg-background focus:outline-none"
+        {...swipe.containerProps}
+        className={cn(
+          "relative flex h-dvh flex-col overflow-hidden bg-background focus:outline-none",
+          SWIPE_GROUP,
+        )}
       >
         {/* ── Identity ── */}
         <header className="flex shrink-0 items-center gap-2.5 px-4 pb-1 pt-3">
@@ -415,11 +430,22 @@ export function MobileHome({
           />
         </div>
 
+        {/* The swipe surface. `touch-pan-y` hands vertical drags to the
+            browser's own scrolling — which then cancels our pointer — and
+            keeps horizontal ones for us. The list gives way with the finger
+            rather than sliding a whole page across: there is no second panel
+            mounted behind it, and pretending otherwise would be a lie the
+            release has to undo. */}
         <div
           id={panelId}
           role="tabpanel"
           aria-labelledby={`${tabsId}-${tab}`}
-          className="flex-1 overflow-y-auto overscroll-contain px-4 pb-28"
+          {...swipe.surfaceProps}
+          style={{ translate: `var(${TAB_SHIFT_VAR}, 0px)` }}
+          className={cn(
+            "flex-1 touch-pan-y overflow-y-auto overscroll-contain px-4 pb-28",
+            SWIPE_TRANSITION,
+          )}
         >
           {tab === "recent" ? (
             recents.length === 0 ? (
diff --git a/src/hooks/useSwipeTabs.ts b/src/hooks/useSwipeTabs.ts
new file mode 100644
index 0000000..6fe8ec2
--- /dev/null
+++ b/src/hooks/useSwipeTabs.ts
@@ -0,0 +1,163 @@
+"use client";
+
+import { useRef, type CSSProperties, type MouseEvent, type PointerEvent, type Ref } from "react";
+
+import {
+  applyTabSwipe,
+  contentShift,
+  detectSwipeAxis,
+  resolveSwipe,
+  setTabSwiping,
+  TAB_PROGRESS_VAR,
+  TAB_SHIFT_VAR,
+  tabProgress,
+  type SwipeAxis,
+} from "@/lib/tabSwipe";
+
+interface Gesture {
+  pointerId: number;
+  startX: number;
+  startY: number;
+  startedAt: number;
+  /** Width of the swipe surface, measured once so a resize mid-drag can't
+   *  make the pill jump. */
+  width: number;
+  /** `null` until the finger has moved far enough to commit to one. */
+  axis: SwipeAxis | null;
+}
+
+export interface SwipeTabs {
+  /** For the ancestor both the switcher and the panel live under: it carries
+   *  the custom properties they animate off. */
+  containerProps: { ref: Ref<HTMLElement | null>; style: CSSProperties };
+  /** For the element the finger actually lands on. */
+  surfaceProps: {
+    onPointerDown: (e: PointerEvent<HTMLElement>) => void;
+    onPointerMove: (e: PointerEvent<HTMLElement>) => void;
+    onPointerUp: (e: PointerEvent<HTMLElement>) => void;
+    onPointerCancel: (e: PointerEvent<HTMLElement>) => void;
+    onClickCapture: (e: MouseEvent<HTMLElement>) => void;
+  };
+}
+
+/**
+ * Makes a horizontal drag across a surface move between tabs.
+ *
+ * Tapping a tab and swiping the panel are the same movement here: both end up
+ * as a fractional position in {@link TAB_PROGRESS_VAR}, so the switcher only
+ * has one animation to get right and it cannot drift between the two ways of
+ * asking for it. React renders the resting position; the gesture writes the
+ * in-between values directly to the DOM and hands control back by writing the
+ * settled one when the finger lifts.
+ *
+ * Vertical drags are left entirely alone — the surface keeps `touch-action:
+ * pan-y`, so the browser scrolls the list natively and cancels the pointer,
+ * rather than us re-implementing momentum scrolling on the main thread.
+ */
+export function useSwipeTabs<T extends string>({
+  ids,
+  active,
+  onSelect,
+}: {
+  ids: readonly T[];
+  active: T;
+  onSelect: (id: T) => void;
+}): SwipeTabs {
+  const containerRef = useRef<HTMLElement | null>(null);
+  const gesture = useRef<Gesture | null>(null);
+  /** A drag that ends on a card would otherwise open it — the browser still
+   *  fires a click for the pointer that started there. */
+  const swallowClick = useRef(false);
+
+  const index = Math.max(0, ids.indexOf(active));
+
+  function paint(dx: number, width: number) {
+    applyTabSwipe(
+      containerRef.current,
+      tabProgress(index, dx, width, ids.length),
+      contentShift(index, dx, width, ids.length),
+    );
+  }
+
+  function settle(next: number) {
+    setTabSwiping(containerRef.current, false);
+    applyTabSwipe(containerRef.current, next, 0);
+    if (next !== index) onSelect(ids[next]);
+  }
+
+  function onPointerDown(e: PointerEvent<HTMLElement>) {
+    swallowClick.current = false;
+    if (!e.isPrimary || ids.length < 2 || gesture.current) return;
+    // Text fields own their own horizontal drags (caret placement, selection).
+    if ((e.target as HTMLElement | null)?.closest("input, textarea, [contenteditable='true']")) {
+      return;
+    }
+    gesture.current = {
+      pointerId: e.pointerId,
+      startX: e.clientX,
+      startY: e.clientY,
+      startedAt: e.timeStamp,
+      width: e.currentTarget.getBoundingClientRect().width,
+      axis: null,
+    };
+  }
+
+  function onPointerMove(e: PointerEvent<HTMLElement>) {
+    const g = gesture.current;
+    if (!g || e.pointerId !== g.pointerId) return;
+
+    const dx = e.clientX - g.startX;
+    if (!g.axis) {
+      const axis = detectSwipeAxis(dx, e.clientY - g.startY);
+      if (!axis) return;
+      if (axis === "vertical") {
+        // The list is scrolling. Bow out for the rest of this gesture instead
+        // of fighting the browser for the same finger.
+        gesture.current = null;
+        return;
+      }
+      g.axis = "horizontal";
+      swallowClick.current = true;
+      setTabSwiping(containerRef.current, true);
+      // Capture keeps the gesture alive when the finger leaves the panel —
+      // over the tab strip, or off the edge of the screen.
+      e.currentTarget.setPointerCapture(g.pointerId);
+    }
+
+    paint(dx, g.width);
+  }
+
+  function onPointerUp(e: PointerEvent<HTMLElement>) {
+    const g = gesture.current;
+    if (!g || e.pointerId !== g.pointerId) return;
+    gesture.current = null;
+    // Nothing was painted for a tap or a scroll, so there is nothing to settle.
+    if (g.axis !== "horizontal") return;
+    settle(resolveSwipe(index, e.clientX - g.startX, e.timeStamp - g.startedAt, g.width, ids.length));
+  }
+
+  function onPointerCancel(e: PointerEvent<HTMLElement>) {
+    const g = gesture.current;
+    if (!g || e.pointerId !== g.pointerId) return;
+    gesture.current = null;
+    if (g.axis !== "horizontal") return;
+    settle(index);
+  }
+
+  function onClickCapture(e: MouseEvent<HTMLElement>) {
+    if (!swallowClick.current) return;
+    swallowClick.current = false;
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  return {
+    containerProps: {
+      ref: containerRef,
+      // React owns the resting position: a tab pressed with the keyboard or a
+      // finger animates through the very same property a swipe drives.
+      style: { [TAB_PROGRESS_VAR]: index, [TAB_SHIFT_VAR]: "0px" } as CSSProperties,
+    },
+    surfaceProps: { onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onClickCapture },
+  };
+}
diff --git a/src/lib/tabSwipe.ts b/src/lib/tabSwipe.ts
new file mode 100644
index 0000000..4628129
--- /dev/null
+++ b/src/lib/tabSwipe.ts
@@ -0,0 +1,144 @@
+/**
+ * The swipe-between-tabs gesture: its maths, its painting, and the two classes
+ * that let a stylesheet follow a finger.
+ *
+ * A horizontal drag across the mobile feed moves between Recent and My Space,
+ * so the tabs stop being the only way in. Nothing here touches React state: a
+ * gesture writes {@link TAB_PROGRESS_VAR} and {@link TAB_SHIFT_VAR} straight to
+ * the DOM on every pointer move — exactly as the aside's resize handle writes
+ * its width — because routing 60 updates a second through a render would
+ * re-render every card in the feed to move a 200px pill.
+ *
+ * The custom properties are inherited, so the switcher and the list read the
+ * same two numbers from a shared ancestor without either knowing about the
+ * other. React owns their resting values; a gesture only borrows them, and
+ * writes the settled value back itself when the finger lifts.
+ */
+
+/** How far a finger must travel before the gesture commits to an axis. Below
+ *  this nothing moves, so a tap on a card is never a 3px swipe. */
+export const SWIPE_AXIS_SLOP = 12;
+
+/** Fraction of the panel's width that reads as a deliberate drag. */
+export const SWIPE_COMMIT_RATIO = 0.28;
+
+/** px/ms above which a flick commits however short it was. Without it, a fast
+ *  confident swipe that only crosses a third of the screen would spring back. */
+export const SWIPE_COMMIT_VELOCITY = 0.4;
+
+/** The list follows the finger at this fraction of its travel. Deliberately
+ *  small: the list is not a carousel — there is no second page sliding in
+ *  behind it — so it acknowledges the gesture rather than pretending to be
+ *  dragged by it. */
+const CONTENT_TRAVEL = 0.18;
+
+/** And at this fraction of that once there is no further tab to reveal, which
+ *  is what makes the first and last tab feel like ends rather than dead pixels. */
+const EDGE_RESISTANCE = 0.35;
+
+/** Hard cap on the list's follow, in px. */
+const MAX_CONTENT_SHIFT = 56;
+
+/** Position between the tabs, as a fractional index (0 = first, 1 = second). */
+export const TAB_PROGRESS_VAR = "--tab-progress";
+
+/** How far the list itself has given way to the finger, in px. */
+export const TAB_SHIFT_VAR = "--tab-shift";
+
+/** Marks the ancestor that owns the two custom properties. Anything animating
+ *  off them pairs it with {@link SWIPE_TRANSITION}. */
+export const SWIPE_GROUP = "group/swipe";
+
+/**
+ * The spring every swipe-driven element settles with — and, crucially, does
+ * *not* animate with while a finger is down: a 420ms ease between the finger
+ * and the pill would leave the pill trailing the gesture that is supposed to be
+ * moving it.
+ *
+ * Tailwind v4 compiles translate utilities to the `translate` property, not to
+ * `transform`, so that is what is transitioned here.
+ */
+export const SWIPE_TRANSITION =
+  "transition-[translate] duration-[420ms] ease-[cubic-bezier(0.34,1.4,0.64,1)] " +
+  "group-data-[swiping]/swipe:transition-none motion-reduce:transition-none";
+
+export type SwipeAxis = "horizontal" | "vertical";
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+/**
+ * Which way a gesture is going, or `null` while it is still too small to tell.
+ *
+ * The panel scrolls vertically, so the two axes cannot both be live: whichever
+ * the finger commits to first owns the rest of the gesture. Ties go to the
+ * scroll, which is the movement a list is expected to make.
+ */
+export function detectSwipeAxis(
+  dx: number,
+  dy: number,
+  slop: number = SWIPE_AXIS_SLOP,
+): SwipeAxis | null {
+  const absX = Math.abs(dx);
+  const absY = Math.abs(dy);
+  if (Math.max(absX, absY) < slop) return null;
+  return absX > absY ? "horizontal" : "vertical";
+}
+
+/**
+ * Where the switcher's pill sits mid-gesture, as a fractional tab index.
+ *
+ * Dragging left (negative `dx`) pulls the next tab in, so progress rises. It
+ * never leaves the range of real tabs — the pill has nowhere to go past the
+ * ends, and {@link contentShift} is what expresses the overshoot instead.
+ */
+export function tabProgress(index: number, dx: number, width: number, count: number): number {
+  if (!(width > 0) || count < 2) return index;
+  return clamp(index - dx / width, 0, count - 1);
+}
+
+/** How far the list gives way to the finger, in px, damped past the ends. */
+export function contentShift(index: number, dx: number, width: number, count: number): number {
+  if (!(width > 0) || count < 2) return 0;
+  // The part of the drag that maps onto a tab that actually exists...
+  const travelled = (index - tabProgress(index, dx, width, count)) * width;
+  // ...and the part pulling against an end.
+  const overflow = dx - travelled;
+  const shift = (travelled + overflow * EDGE_RESISTANCE) * CONTENT_TRAVEL;
+  return clamp(shift, -MAX_CONTENT_SHIFT, MAX_CONTENT_SHIFT);
+}
+
+/**
+ * The tab a released gesture lands on: the neighbour if the drag was long
+ * enough or fast enough, otherwise the one it started from.
+ */
+export function resolveSwipe(
+  index: number,
+  dx: number,
+  elapsedMs: number,
+  width: number,
+  count: number,
+): number {
+  if (count < 2) return index;
+  const distance = Math.abs(dx);
+  if (distance < SWIPE_AXIS_SLOP) return index;
+  const velocity = elapsedMs > 0 ? distance / elapsedMs : Infinity;
+  const far = width > 0 && distance >= width * SWIPE_COMMIT_RATIO;
+  if (!far && velocity < SWIPE_COMMIT_VELOCITY) return index;
+  return clamp(index + (dx < 0 ? 1 : -1), 0, count - 1);
+}
+
+/** Paints a position immediately, bypassing React. */
+export function applyTabSwipe(el: HTMLElement | null, progress: number, shift: number): void {
+  if (!el) return;
+  el.style.setProperty(TAB_PROGRESS_VAR, String(progress));
+  el.style.setProperty(TAB_SHIFT_VAR, `${shift}px`);
+}
+
+/** Suspends the settle animation for as long as the finger is driving it. */
+export function setTabSwiping(el: HTMLElement | null, swiping: boolean): void {
+  if (!el) return;
+  if (swiping) el.dataset.swiping = "true";
+  else delete el.dataset.swiping;
+}