diff --git a/AGENTS.md b/AGENTS.md
index 943ce04..0e6fb14 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -236,3 +236,4 @@ Questions for the lab go to Dr Jodie Rummer (`@JodieRummer`) on GitHub: label th
 
 - Security scans (#144): use Snyk CLI >=1.1308.3 with `test --all-projects --dev` for the pnpm 12 multi-document lockfile. Remaining upstream advisories and mitigations are tracked in docs/dev/SNYK-144.md.
 - Leaflet treats string tooltips as HTML. Pass a DOM element populated with `textContent` for workbook-derived point and move labels, including when rebuilding overlays.
+- Leaflet polylines are pointer-only by default. Keep move paths keyboard-focusable, with focus tooltips and Enter/Space popup handlers; the SVG fallback uses the shared chart `markKeys` contract.
diff --git a/e2e/map-keyboard.spec.ts b/e2e/map-keyboard.spec.ts
new file mode 100644
index 0000000..72d8764
--- /dev/null
+++ b/e2e/map-keyboard.spec.ts
@@ -0,0 +1,48 @@
+import { expect, test } from '@playwright/test';
+
+test('move lines expose their details to the keyboard after overlay toggles', async ({ page }) => {
+	await page.route(/server\.arcgisonline\.com|tile\.openstreetmap\.org/, (route) => route.abort());
+	await page.goto('/recaptures');
+	const map = page.getByRole('region', {
+		name: "Map of recaptured sharks' moves between nurseries"
+	});
+	const line = map.locator('.ps-line-0[role="button"]').first();
+	await expect(line).toBeVisible();
+	const label = await line.getAttribute('aria-label');
+	await line.focus();
+	await expect(map.locator('.leaflet-tooltip').last()).toHaveText(label!);
+	await line.press('Enter');
+	await expect(map.locator('.leaflet-popup-content')).toContainText(label!);
+	await line.press('Escape');
+	await expect(map.locator('.leaflet-popup-content')).toHaveCount(0);
+	// Re-adding an overlay creates another path element: it must retain the handlers.
+	const toggle = map.getByRole('checkbox', { name: /Blacktip.*moves/i });
+	await toggle.uncheck();
+	await toggle.check();
+	await line.focus();
+	await line.press('Space');
+	await expect(map.locator('.leaflet-popup-content')).toContainText(label!);
+});
+
+test('SVG map fallback supports the shared arrow-key chart controls', async ({ page }) => {
+	// Keep the hydrated SVG fallback by preventing the lazy Leaflet module from loading.
+	await page.route('**/*.js', async (route) => {
+		const response = await route.fetch();
+		const body = await response.text();
+		if (body.includes('Leaflet') && body.includes('1.9.4')) await route.abort();
+		else await route.fulfill({ response, body });
+	});
+	await page.goto('/recaptures');
+	const map = page.locator('.chart-card').filter({
+		has: page.getByRole('heading', { name: 'Moves between nurseries on the map', exact: true })
+	});
+	const svg = map.locator('svg[role="application"]');
+	await expect(svg).toBeVisible();
+	await svg.focus();
+	await svg.press('Home');
+	await expect(map.locator('.tip')).toContainText('Moves');
+	await svg.press('End');
+	await expect(map.locator('.tip')).toContainText('Same-nursery recaptures');
+	await svg.press('Escape');
+	await expect(map.locator('.tip')).toHaveCount(0);
+});
diff --git a/src/lib/components/InteractiveMap.svelte b/src/lib/components/InteractiveMap.svelte
index 3d53030..86afa1d 100644
--- a/src/lib/components/InteractiveMap.svelte
+++ b/src/lib/components/InteractiveMap.svelte
@@ -1,5 +1,12 @@
 <script lang="ts" module>
-	import type { MapPoint } from './MooreaMap.svelte';
+	import type { MapLine, MapPoint } from './MooreaMap.svelte';
+
+	export interface MapLineLayer {
+		name: string;
+		/** CSS colour, applied through CSS so it follows the theme. */
+		color: string;
+		lines: MapLine[];
+	}
 
 	export interface MapLayer {
 		name: string;
@@ -12,6 +19,8 @@
 		radius?: number;
 		/** Value that gets the largest circle; fix it to keep sizes comparable as points change. */
 		max?: number;
+		/** Radius in px of the largest sized circle (default 18). */
+		maxRadius?: number;
 	}
 
 	/** Base maps (#29). Hosts must match img-src in vite.config.ts. */
@@ -41,6 +50,10 @@
 
 	let {
 		layers,
+		lineLayers = [],
+		lineLabel = '',
+		lineMax: fixedLineMax,
+		traveller,
 		label,
 		valueLabel = '',
 		format = (v: number) => String(Math.round(v)),
@@ -49,6 +62,18 @@
 		fallback
 	}: {
 		layers: MapLayer[];
+		/** Lines drawn under the circles, width by value, one toggle per layer. */
+		lineLayers?: MapLineLayer[];
+		lineLabel?: string;
+		/** Value that gets the widest line; fix it so widths don't jump as lines are added. */
+		lineMax?: number;
+		/** A dot that glides from `from` to `to` whenever `key` changes (a Play button). */
+		traveller?: {
+			key: string | number;
+			from: { lat: number; lon: number };
+			to: { lat: number; lon: number };
+			color: string;
+		};
 		/** Accessible name of the map region. */
 		label: string;
 		valueLabel?: string;
@@ -64,6 +89,12 @@
 		columns: ['layer', 'name', 'lat', 'lon', valueLabel || 'value'],
 		rows: layers.flatMap((l) => l.points.map((p) => [l.name, p.label, p.lat, p.lon, p.value]))
 	}));
+	registerCsv(() => ({
+		columns: ['layer', 'line', 'from lat', 'from lon', 'to lat', 'to lon', lineLabel || 'value'],
+		rows: lineLayers.flatMap((g) =>
+			g.lines.map((l) => [g.name, l.label, l.from.lat, l.from.lon, l.to.lat, l.to.lon, l.value])
+		)
+	}));
 
 	let el = $state<HTMLDivElement>();
 	let ready = $state(false);
@@ -74,14 +105,46 @@
 		return span;
 	}
 
-	function popup(p: MapPoint) {
+	// Leaflet paths have pointer handlers but are not keyboard controls by default.
+	function keyboardLine(line: import('leaflet').Polyline, label: string) {
+		line.on('add', () => {
+			const path = line.getElement() as SVGElement | undefined;
+			if (!path) return;
+			path.setAttribute('tabindex', '0');
+			path.setAttribute('role', 'button');
+			path.setAttribute('aria-label', label);
+			path.onfocus = () => line.openTooltip();
+			path.onblur = () => line.closeTooltip();
+			path.onkeydown = (e) => {
+				if (e.key === 'Enter' || e.key === ' ') {
+					e.preventDefault();
+					e.stopPropagation();
+					if (e.key === 'Enter') line.openPopup();
+				} else if (e.key === 'Escape') {
+					line.closePopup();
+					line.closeTooltip();
+				}
+			};
+			path.onkeyup = (e) => {
+				if (e.key === ' ') {
+					e.preventDefault();
+					e.stopPropagation();
+					line.openPopup();
+				}
+			};
+		});
+		return line;
+	}
+
+	function popup(p: MapPoint | MapLine, unit = valueLabel) {
+		const href = 'href' in p ? p.href : undefined;
 		const box = document.createElement('div');
-		const title = document.createElement(p.href ? 'a' : 'strong');
+		const title = document.createElement(href ? 'a' : 'strong');
 		title.textContent = p.label;
-		if (p.href) (title as HTMLAnchorElement).href = p.href;
+		if (href) (title as HTMLAnchorElement).href = href;
 		box.append(title);
 		for (const line of [
-			p.value != null && valueLabel ? `${valueLabel}: ${format(p.value)}` : null,
+			p.value != null && unit ? `${unit}: ${format(p.value)}` : null,
 			p.sub ?? null
 		]) {
 			if (!line) continue;
@@ -95,7 +158,7 @@
 	let map = $state.raw<import('leaflet').Map>();
 	let leaflet: typeof import('leaflet') | undefined;
 	let drawn: {
-		groups: import('leaflet').LayerGroup[];
+		groups: { key: string; group: import('leaflet').LayerGroup }[];
 		control: import('leaflet').Control.Layers;
 	}[] = [];
 	let bases: Record<string, import('leaflet').TileLayer> = {};
@@ -143,17 +206,44 @@
 		const m = map;
 		const L = leaflet;
 		const current = layers;
+		const currentLines = lineLayers;
 		if (!m || !L || !el) return;
 		const hidden = new Set(
-			drawn.length
-				? current.map((l, i) => (drawn[0].groups[i] && !m.hasLayer(drawn[0].groups[i]) ? i : -1))
-				: []
+			drawn.flatMap((d) => d.groups.filter((g) => !m.hasLayer(g.group)).map((g) => g.key))
 		);
 		for (const d of drawn) {
-			d.groups.forEach((g) => g.remove());
+			d.groups.forEach((g) => g.group.remove());
 			d.control.remove();
 		}
 		const overlays: Record<string, import('leaflet').LayerGroup> = {};
+		const lineMax =
+			fixedLineMax ??
+			Math.max(1e-9, ...currentLines.flatMap((g) => g.lines.map((l) => l.value ?? 1)));
+		const lineGroups = currentLines.map((g, i) => {
+			const group = L.layerGroup();
+			for (const l of g.lines)
+				keyboardLine(
+					L.polyline(
+						[
+							[l.from.lat, l.from.lon],
+							[l.to.lat, l.to.lon]
+						],
+						{
+							weight: 1.5 + 6 * Math.sqrt((l.value ?? 1) / lineMax),
+							className: `ps-line ps-line-${i}`,
+							lineCap: 'round'
+						}
+					),
+					l.label
+				)
+					.bindTooltip(tooltip(l.label))
+					.bindPopup(() => popup(l, lineLabel))
+					.addTo(group);
+			const key = `line:${i}`;
+			if (!hidden.has(key)) group.addTo(m);
+			overlays[`<span class="ps-key ps-line-key ps-line-${i}"></span>${g.name}`] = group;
+			return { key, group };
+		});
 		const groups = current.map((layer, i) => {
 			const max = layer.max ?? Math.max(1e-9, ...layer.points.map((p) => p.value ?? 0));
 			const group = L.layerGroup();
@@ -162,7 +252,9 @@
 				const r = empty
 					? 5
 					: layer.sized
-						? 5 + 13 * Math.sqrt(Math.min(1, Math.max(0, p.value ?? 0) / max))
+						? 5 +
+							((layer.maxRadius ?? 18) - 5) *
+								Math.sqrt(Math.min(1, Math.max(0, p.value ?? 0) / max))
 						: (layer.radius ?? 5);
 				L.circleMarker([p.lat, p.lon], {
 					radius: r,
@@ -172,17 +264,60 @@
 					.bindPopup(() => popup(p))
 					.addTo(group);
 			}
-			if (!hidden.has(i)) group.addTo(m);
+			const key = `layer:${i}`;
+			if (!hidden.has(key)) group.addTo(m);
 			overlays[`<span class="ps-key ps-layer-${i}"></span>${layer.name}`] = group;
-			return group;
+			return { key, group };
 		});
 		const control = L.control
-			.layers(bases, current.length > 1 ? overlays : {}, { collapsed: el.clientWidth < 560 })
+			.layers(bases, current.length + currentLines.length > 1 ? overlays : {}, {
+				collapsed: el.clientWidth < 560
+			})
 			.addTo(m);
-		drawn = [{ groups, control }];
+		drawn = [{ groups: [...lineGroups, ...groups], control }];
 	});
 
-	const style = $derived(layers.map((l, i) => `--ps-layer-${i}: ${l.color}`).join('; '));
+	// Glide a dot along the traveller's line; reduced motion (#32) just places it at the end.
+	let dot: import('leaflet').CircleMarker | undefined;
+	$effect(() => {
+		const m = map;
+		const L = leaflet;
+		const t = traveller;
+		if (!m || !L) return;
+		dot?.remove();
+		dot = undefined;
+		if (!t) return;
+		const still = matchMedia('(prefers-reduced-motion: reduce)').matches;
+		const at = (f: number): [number, number] => [
+			t.from.lat + (t.to.lat - t.from.lat) * f,
+			t.from.lon + (t.to.lon - t.from.lon) * f
+		];
+		const marker = L.circleMarker(at(still ? 1 : 0), {
+			radius: 7,
+			className: 'ps-traveller',
+			interactive: false
+		}).addTo(m);
+		(marker.getElement() as SVGElement | undefined)?.style.setProperty('fill', t.color);
+		dot = marker;
+		if (still) return;
+		const start = performance.now();
+		let frame = 0;
+		const step = (now: number) => {
+			const f = Math.min(1, (now - start) / 800);
+			const eased = f < 0.5 ? 2 * f * f : 1 - (-2 * f + 2) ** 2 / 2;
+			marker.setLatLng(at(eased));
+			if (f < 1) frame = requestAnimationFrame(step);
+		};
+		frame = requestAnimationFrame(step);
+		return () => cancelAnimationFrame(frame);
+	});
+
+	const style = $derived(
+		[
+			...layers.map((l, i) => `--ps-layer-${i}: ${l.color}`),
+			...lineLayers.map((l, i) => `--ps-line-${i}: ${l.color}`)
+		].join('; ')
+	);
 </script>
 
 {#if ready}
@@ -195,7 +330,14 @@
 	></div>
 	<p class="hint">Drag to pan, use + / − to zoom. Select a circle for details.</p>
 {:else}
-	<MooreaMap points={fallback ?? layers[0]?.points ?? []} {valueLabel} {format} csv={false} />
+	<MooreaMap
+		points={fallback ?? layers[0]?.points ?? []}
+		lines={lineLayers.flatMap((g) => g.lines.map((l) => ({ ...l, color: g.color })))}
+		{lineLabel}
+		{valueLabel}
+		{format}
+		csv={false}
+	/>
 {/if}
 
 <style>
@@ -252,6 +394,31 @@
 		font-weight: 650;
 		color: #1d5fb8;
 	}
+	.map :global(.ps-traveller) {
+		stroke: #fff;
+		stroke-width: 2px;
+		fill-opacity: 1;
+	}
+	.map :global(.leaflet-interactive.ps-line) {
+		stroke-opacity: 0.75;
+	}
+	.map :global(.ps-line:focus-visible) {
+		outline: 2px solid var(--ink);
+		outline-offset: 4px;
+	}
+	.map :global(.ps-line-key) {
+		border-radius: 2px;
+		height: 4px;
+		vertical-align: 2px;
+	}
+	.map :global(.ps-line-0) {
+		stroke: var(--ps-line-0);
+		background: var(--ps-line-0);
+	}
+	.map :global(.ps-line-1) {
+		stroke: var(--ps-line-1);
+		background: var(--ps-line-1);
+	}
 	.map :global(.ps-layer-0) {
 		fill: var(--ps-layer-0);
 		background: var(--ps-layer-0);
diff --git a/src/lib/components/MooreaMap.svelte b/src/lib/components/MooreaMap.svelte
index f8da3c6..43ef31c 100644
--- a/src/lib/components/MooreaMap.svelte
+++ b/src/lib/components/MooreaMap.svelte
@@ -9,15 +9,30 @@
 		href?: string;
 		sub?: string;
 	}
+
+	/** A straight line between two places, e.g. a shark's move between nurseries. */
+	export interface MapLine {
+		id: string;
+		label: string;
+		from: { lat: number; lon: number };
+		to: { lat: number; lon: number };
+		/** Sets the line width (relative to the largest). */
+		value?: number;
+		color?: string;
+		sub?: string;
+	}
 </script>
 
 <script lang="ts">
 	import outline from '#lib/moorea-outline.json';
 	import Tip, { type TipState } from './charts/Tip.svelte';
 	import { registerCsv } from './charts/csv';
+	import { KEYS_HINT, markAt, markKeys, pointerIn } from './charts/marks';
 
 	let {
 		points,
+		lines = [],
+		lineLabel = '',
 		valueLabel = '',
 		format = (v: number) => String(Math.round(v)),
 		showLabels = true,
@@ -25,6 +40,9 @@
 		csv = true
 	}: {
 		points: MapPoint[];
+		/** Drawn under the circles; width by value. */
+		lines?: MapLine[];
+		lineLabel?: string;
 		valueLabel?: string;
 		format?: (v: number) => string;
 		showLabels?: boolean;
@@ -37,6 +55,12 @@
 		columns: ['name', 'lat', 'lon', valueLabel || 'value'],
 		rows: csv ? points.map((p) => [p.label, p.lat, p.lon, p.value]) : []
 	}));
+	registerCsv(() => ({
+		columns: ['line', 'from lat', 'from lon', 'to lat', 'to lon', lineLabel || 'value'],
+		rows: csv
+			? lines.map((l) => [l.label, l.from.lat, l.from.lon, l.to.lat, l.to.lon, l.value])
+			: []
+	}));
 
 	let width = $state(640);
 	const lat0 = -17.53;
@@ -91,12 +115,23 @@
 		});
 	});
 
+	const lineMax = $derived(Math.max(1e-9, ...lines.map((l) => l.value ?? 1)));
+	const lineW = (v: number | undefined) => 1.5 + 6 * Math.sqrt((v ?? 1) / lineMax);
+
 	let tip = $state<TipState | null>(null);
-	function show(e: PointerEvent, p: MapPoint) {
-		const wrap = (e.currentTarget as Element).closest('.wrap')!.getBoundingClientRect();
+	function showLine(at: { x: number; y: number }, l: MapLine) {
+		tip = {
+			...at,
+			title: l.label,
+			lines: [
+				...(l.value != null && lineLabel ? [{ label: lineLabel, value: format(l.value) }] : []),
+				...(l.sub ? [{ value: l.sub }] : [])
+			]
+		};
+	}
+	function show(at: { x: number; y: number }, p: MapPoint) {
 		tip = {
-			x: e.clientX - wrap.left,
-			y: e.clientY - wrap.top,
+			...at,
 			title: p.label,
 			lines: [
 				...(p.value != null ? [{ label: valueLabel, value: format(p.value) }] : []),
@@ -104,21 +139,48 @@
 			]
 		};
 	}
+	let svg = $state<SVGSVGElement>();
+	const keys = markKeys({
+		count: () => lines.length + sorted.length,
+		show: (i) =>
+			markAt(svg, i, (at) => {
+				if (i < lines.length) showLine(at, lines[i]);
+				else show(at, sorted[i - lines.length]);
+			}),
+		hide: () => (tip = null),
+		href: (i) => sorted[i - lines.length]?.href
+	});
 </script>
 
 <div class="wrap" bind:clientWidth={width}>
 	<svg
+		bind:this={svg}
 		class="chart-svg"
 		viewBox={`0 0 ${width} ${h}`}
 		{width}
 		height={h}
-		role={points.some((p) => p.href) ? 'group' : 'img'}
-		aria-label={`Map of Moorea${valueLabel ? ` showing ${valueLabel}` : ''}`}
+		{...keys}
+		aria-label={`Map of Moorea${valueLabel ? ` showing ${valueLabel}` : ''}. ${KEYS_HINT}`}
 		onpointerleave={() => (tip = null)}
 	>
 		<rect {width} height={h} fill="var(--accent-wash)" rx="10" />
 		<path d={path} fill="var(--surface)" stroke="var(--axis)" stroke-width="1" />
-		{#each sorted as p (p.id)}
+		{#each lines as l, i (l.id)}
+			<line
+				x1={px(l.from.lon)}
+				y1={py(l.from.lat)}
+				x2={px(l.to.lon)}
+				y2={py(l.to.lat)}
+				stroke={l.color ?? 'var(--series-1)'}
+				stroke-width={lineW(l.value)}
+				stroke-linecap="round"
+				stroke-opacity="0.7"
+				role="presentation"
+				data-mark={i}
+				onpointermove={(e) => showLine(pointerIn(e), l)}
+			/>
+		{/each}
+		{#each sorted as p, i (p.id)}
 			{@const x = px(p.lon)}
 			{@const y = py(p.lat)}
 			<svelte:element
@@ -136,7 +198,8 @@
 					stroke="var(--surface)"
 					stroke-width="2"
 					role="presentation"
-					onpointermove={(e) => show(e, p)}
+					data-mark={lines.length + i}
+					onpointermove={(e) => show(pointerIn(e), p)}
 				/>
 			</svelte:element>
 		{/each}
diff --git a/src/routes/recaptures/+page.server.ts b/src/routes/recaptures/+page.server.ts
index b2eb722..889b204 100644
--- a/src/routes/recaptures/+page.server.ts
+++ b/src/routes/recaptures/+page.server.ts
@@ -40,6 +40,61 @@ export const load: PageServerLoad = () =>
 			const k = Math.cos((sa.lat * Math.PI) / 180);
 			return Math.hypot((sa.lat - sb.lat) * 110.574, (sa.lon - sb.lon) * 111.32 * k);
 		};
+		// Moves drawn on the map (#173): one line per nursery pair and species, both directions
+		// pooled. Sharks with identity conflicts are left out.
+		const conflicts = new Set(d.individuals.filter((i) => i.conflict).map((i) => i.id));
+		const place = (id: string | null) => {
+			const s = id ? d.siteById.get(id) : null;
+			return s?.lat != null && s.lon != null ? { lat: s.lat, lon: s.lon } : null;
+		};
+		const moveLines = (['Cm', 'Na'] as const).map((sp) => {
+			const byPair = new Map<string, { a: string; b: string; ab: number; ba: number }>();
+			for (const p of moved) {
+				if (p.species !== sp || conflicts.has(p.id)) continue;
+				const [a, b] = [p.a.siteId!, p.b.siteId!].sort();
+				const e = byPair.get(`${a}|${b}`) ?? { a, b, ab: 0, ba: 0 };
+				if (p.a.siteId === a) e.ab++;
+				else e.ba++;
+				byPair.set(`${a}|${b}`, e);
+			}
+			return {
+				species: sp,
+				lines: [...byPair.values()].flatMap((e) => {
+					const from = place(e.a);
+					const to = place(e.b);
+					if (!from || !to) return [];
+					const [na, nb] = [siteName(d, e.a), siteName(d, e.b)];
+					return [
+						{
+							id: `${sp}-${e.a}-${e.b}`,
+							label: `${na} ↔ ${nb}`,
+							from,
+							to,
+							value: e.ab + e.ba,
+							sub: `${na} → ${nb}: ${e.ab} · ${nb} → ${na}: ${e.ba} · ${round(dist(e.a, e.b), 1)} km`
+						}
+					];
+				})
+			};
+		});
+		const stayed = nurseries.flatMap((id) => {
+			const at = place(id);
+			if (!at) return [];
+			const n = pairs.filter(
+				(p) => p.a.siteId === id && p.b.siteId === id && !conflicts.has(p.id)
+			).length;
+			const out = moved.filter((p) => p.a.siteId === id && !conflicts.has(p.id)).length;
+			return [
+				{
+					id,
+					label: siteName(d, id),
+					...at,
+					value: n,
+					href: `/nurseries/${id}`,
+					sub: `${n} recaptured at the same nursery, ${out} next caught elsewhere`
+				}
+			];
+		});
 		const longest = moved
 			.map((p) => ({
 				id: p.id,
@@ -112,6 +167,9 @@ export const load: PageServerLoad = () =>
 			bySpecies: rateBy((c) => c.species, ['Cm', 'Na']),
 			nurseryNames: nurseries.map((id) => siteName(d, id)),
 			matrix,
+			moveLines,
+			stayed,
+			conflictsLeftOut: moved.filter((p) => conflicts.has(p.id)).length,
 			fidelity: pairs.length ? round(same / pairs.length, 3) : null,
 			pairs: pairs.length,
 			medianDays: median(pairs.map((p) => p.days)),
diff --git a/src/routes/recaptures/+page.svelte b/src/routes/recaptures/+page.svelte
index 1620976..0f6afce 100644
--- a/src/routes/recaptures/+page.svelte
+++ b/src/routes/recaptures/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import ChartCard from '#lib/components/ChartCard.svelte';
 	import DataTable from '#lib/components/DataTable.svelte';
+	import InteractiveMap from '#lib/components/InteractiveMap.svelte';
 	import StatTile from '#lib/components/StatTile.svelte';
 	import BarChart from '#lib/components/charts/BarChart.svelte';
 	import Heatmap from '#lib/components/charts/Heatmap.svelte';
@@ -95,6 +96,36 @@
 		</ChartCard>
 	</section>
 
+	<section class="section">
+		<ChartCard
+			title="Moves between nurseries on the map"
+			papers={['bouyoucos2020homerange']}
+			subtitle="Lines join the nurseries where a shark was caught one time and the next, both directions pooled; thicker is more moves. Grey circles: recaptures at the same nursery. Each shark's own page can play its moves one by one."
+			note={`Lines join capture sites; they are not the route a shark swam. A shark can pass other nurseries, or move and come back, between two captures.${data.conflictsLeftOut ? ` ${num(data.conflictsLeftOut)} moves by sharks with conflicting records are left out.` : ''}`}
+		>
+			<InteractiveMap
+				label="Map of recaptured sharks' moves between nurseries"
+				valueLabel="Same-nursery recaptures"
+				lineLabel="Moves"
+				height={480}
+				layers={[
+					{
+						name: 'Same-nursery recaptures',
+						color: 'var(--muted)',
+						sized: true,
+						maxRadius: 10,
+						points: data.stayed
+					}
+				]}
+				lineLayers={data.moveLines.map((m) => ({
+					name: `${speciesName(m.species)} moves`,
+					color: SPECIES[m.species].color,
+					lines: m.lines
+				}))}
+			/>
+		</ChartCard>
+	</section>
+
 	<section class="section">
 		<ChartCard
 			title="Where recaptured sharks move"
diff --git a/src/routes/sharks/[id]/+page.server.ts b/src/routes/sharks/[id]/+page.server.ts
index 06a9e20..85d8bec 100644
--- a/src/routes/sharks/[id]/+page.server.ts
+++ b/src/routes/sharks/[id]/+page.server.ts
@@ -43,6 +43,30 @@ export const load: PageServerLoad = ({ params }) => {
 			relMass: l.relMassKg,
 			notes: l.notes
 		})),
+		// Consecutive captures at different nurseries, in order (#173).
+		moves: caps.flatMap((c, i) => {
+			const prev = caps[i - 1];
+			if (!prev || !prev.siteId || !c.siteId || prev.siteId === c.siteId) return [];
+			const a = d.siteById.get(prev.siteId);
+			const b = d.siteById.get(c.siteId);
+			if (a?.lat == null || a.lon == null || b?.lat == null || b.lon == null) return [];
+			return [
+				{
+					id: `move-${i}`,
+					at: i,
+					label: `${a.name} → ${b.name}`,
+					from: { lat: a.lat, lon: a.lon },
+					to: { lat: b.lat, lon: b.lon },
+					sub: `Capture ${i} to ${i + 1}: ${prev.date ?? '?'} → ${c.date ?? '?'}`
+				}
+			];
+		}),
+		// Every capture with a place, in order, for the map's Play button.
+		track: caps.flatMap((c, i) => {
+			const s = c.siteId ? d.siteById.get(c.siteId) : null;
+			if (s?.lat == null || s.lon == null) return [];
+			return [{ n: i + 1, date: c.date, site: s.name, lat: s.lat, lon: s.lon, tl: c.tlMm }];
+		}),
 		map: sites
 			.map((s) => d.siteById.get(s)!)
 			.filter((s) => s?.lat != null)
@@ -52,7 +76,8 @@ export const load: PageServerLoad = ({ params }) => {
 				lat: s.lat!,
 				lon: s.lon!,
 				value: caps.filter((c) => c.siteId === s.id).length,
-				href: `/nurseries/${s.id}`
+				href: `/nurseries/${s.id}`,
+				sub: `Capture ${caps.flatMap((c, i) => (c.siteId === s.id ? [i + 1] : [])).join(', ')}`
 			}))
 	};
 };
diff --git a/src/routes/sharks/[id]/+page.svelte b/src/routes/sharks/[id]/+page.svelte
index 6920bd5..a9ea060 100644
--- a/src/routes/sharks/[id]/+page.svelte
+++ b/src/routes/sharks/[id]/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import ChartCard from '#lib/components/ChartCard.svelte';
 	import DataTable from '#lib/components/DataTable.svelte';
+	import InteractiveMap from '#lib/components/InteractiveMap.svelte';
 	import MooreaMap from '#lib/components/MooreaMap.svelte';
 	import LineChart from '#lib/components/charts/LineChart.svelte';
 	import { toDay } from '#lib/components/charts/scale';
@@ -11,6 +12,36 @@
 	let { data }: PageProps = $props();
 	const ind = $derived(data.ind);
 	const growth = $derived(data.captures.filter((c) => c.date && c.tl != null));
+
+	// Play this shark's captures in order (#173): lines appear as it moves, a dot glides along.
+	const stops = $derived(data.track.length);
+	let step = $state(Number.MAX_SAFE_INTEGER);
+	const at = $derived(Math.min(step, stops));
+	const current = $derived(at < stops ? data.track[at] : null);
+	// An unlocated capture breaks the path: do not animate across that unknown stop.
+	const previous = $derived(
+		current && at > 0 && data.track[at - 1].n === current.n - 1 ? data.track[at - 1] : null
+	);
+	const color = $derived(speciesColor(ind.species));
+	const shownMoves = $derived(
+		current ? data.moves.filter((m) => m.at + 1 <= current.n) : data.moves
+	);
+	let timer: ReturnType<typeof setInterval> | undefined;
+	let playing = $state(false);
+	function stop() {
+		clearInterval(timer);
+		playing = false;
+	}
+	function play() {
+		if (playing) return stop();
+		if (at >= stops - 1) step = 0;
+		playing = true;
+		timer = setInterval(() => {
+			if (step >= stops - 1) stop();
+			else step = Math.min(step, stops) + 1;
+		}, 1400);
+	}
+	$effect(() => stop);
 </script>
 
 <div class="container">
@@ -52,8 +83,67 @@
 			</ChartCard>
 		{/if}
 		{#if data.map.length}
-			<ChartCard title="Where it was caught" subtitle="Circle size = number of captures">
-				<MooreaMap points={data.map} maxR={12} valueLabel="Captures" />
+			<ChartCard
+				title="Where it was caught"
+				subtitle={data.moves.length
+					? 'Circle size = number of captures. Lines join consecutive captures at different nurseries (not the route swum). Play steps through the captures in order.'
+					: 'Circle size = number of captures'}
+			>
+				{#if data.moves.length}
+					<div class="player">
+						<button type="button" class="play" onclick={play} aria-pressed={playing}>
+							{playing ? 'Pause' : 'Play'}
+						</button>
+						<label for="capture-slider">Capture</label>
+						<input
+							id="capture-slider"
+							type="range"
+							min="0"
+							max={stops}
+							step="1"
+							value={at}
+							oninput={(e) => {
+								stop();
+								step = Number(e.currentTarget.value);
+							}}
+							aria-valuetext={current
+								? `Capture ${current.n}: ${current.site}, ${date(current.date)}`
+								: 'All captures'}
+						/>
+						<output for="capture-slider" aria-live="polite">
+							{#if current}
+								<strong>Capture {current.n} of {ind.nCaptures}</strong>
+								· {date(current.date)} · {current.site}{current.tl != null
+									? ` · ${num(current.tl)} mm`
+									: ''}{previous && previous.site !== current.site
+									? ` (moved from ${previous.site})`
+									: ''}
+							{:else}
+								<strong>All captures</strong>
+							{/if}
+						</output>
+					</div>
+					<InteractiveMap
+						label={`Map of where shark ${ind.id} was caught`}
+						valueLabel="Captures"
+						height={340}
+						layers={[
+							{ name: 'Capture sites', color, sized: true, maxRadius: 12, points: data.map }
+						]}
+						lineLayers={[{ name: 'Moves', color, lines: shownMoves }]}
+						lineMax={4}
+						traveller={current
+							? {
+									key: at,
+									from: previous ?? current,
+									to: current,
+									color
+								}
+							: undefined}
+					/>
+				{:else}
+					<MooreaMap points={data.map} maxR={12} valueLabel="Captures" />
+				{/if}
 			</ChartCard>
 		{/if}
 	</section>
@@ -99,6 +189,32 @@
 </div>
 
 <style>
+	.player {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 8px 12px;
+		margin-bottom: 12px;
+		font-size: 0.9rem;
+	}
+	.player input {
+		flex: 1 1 140px;
+		accent-color: var(--series-1);
+	}
+	.player output {
+		flex: 1 1 100%;
+		min-height: 1.5em;
+		color: var(--ink);
+	}
+	.play {
+		font: inherit;
+		padding: 4px 12px;
+		border-radius: 999px;
+		border: 1px solid var(--hairline);
+		background: var(--surface-2);
+		color: var(--ink);
+		cursor: pointer;
+	}
 	.id {
 		font-weight: 400;
 		color: var(--ink-2);