diff --git a/web/src/lib/components/repo/StarButton.stories.svelte b/web/src/lib/components/repo/StarButton.stories.svelte
index 75e244297..b2874a3a9 100644
--- a/web/src/lib/components/repo/StarButton.stories.svelte
+++ b/web/src/lib/components/repo/StarButton.stories.svelte
@@ -37,29 +37,29 @@
 	};
 
 	const starred = async ({ canvas }: PlayContext) => {
-		const button = await canvas.findByRole("button", { name: "Starred" });
+		const button = await canvas.findByRole("button", { name: "Unstar" });
 		await waitFor(() => expect(button).toBeEnabled());
 	};
 
-	// clicking star: the icon swaps to a spinner while the write is in flight,
-	// then settles on "Starred" with the filled star icon
+	// clicking star: the icon swaps to a spinner while the write is in flight, then the
+	// star swaps to star-off and the label crossfades to "Unstar"
 	const starring = async ({ canvas }: PlayContext) => {
 		const button = await canvas.findByRole("button", { name: "Star" });
 		await userEvent.click(button);
-		await waitFor(() => expect(canvas.getByRole("button", { name: "Starred" })).toBeVisible());
+		await waitFor(() => expect(canvas.getByRole("button", { name: "Unstar" })).toBeVisible());
 	};
 
-	// a hung write: the button stays on "Star" with the icon replaced by a spinner
+	// a hung write: the button commits to "Unstar" straight away and stays there while the
+	// write is still out, with only aria-busy reporting that it has not settled
 	const starringLoading = async ({ canvas }: PlayContext) => {
 		const button = await canvas.findByRole("button", { name: "Star" });
 		await userEvent.click(button);
-		await waitFor(() => expect(button).toHaveAttribute("aria-busy", "true"));
-		await expect(button).toHaveTextContent("Star");
-		await expect(button).toBeDisabled();
+		await waitFor(() => expect(button).toHaveAccessibleName("Unstar"));
+		await expect(button).toHaveAttribute("aria-busy", "true");
 	};
 
 	const unstarring = async ({ canvas }: PlayContext) => {
-		const button = await canvas.findByRole("button", { name: "Starred" });
+		const button = await canvas.findByRole("button", { name: "Unstar" });
 		await userEvent.click(button);
 		await waitFor(() => expect(canvas.getByRole("button", { name: "Star" })).toBeVisible());
 	};
diff --git a/web/src/lib/components/repo/StarButton.svelte b/web/src/lib/components/repo/StarButton.svelte
index 215d6ca78..143f17b00 100644
--- a/web/src/lib/components/repo/StarButton.svelte
+++ b/web/src/lib/components/repo/StarButton.svelte
@@ -2,18 +2,20 @@
 	import { resolve } from "$app/paths";
 	import { page } from "$app/state";
 	import Star from "$icon/star";
+	import StarOff from "$icon/star-off";
 	import TriangleAlert from "$icon/triangle-alert";
 	import { getAuth } from "$lib/auth.svelte";
 	import { loginWithReturn } from "$lib/auth/guards";
 	import { createStar, deleteStar } from "$lib/api/graph";
 	import Button from "$lib/components/ui/Button.svelte";
 	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
-	import Spinner from "$lib/components/ui/Spinner.svelte";
 	import Tooltip from "$lib/components/ui/Tooltip.svelte";
 	import { getProfileCounts } from "$lib/components/profile/counts.svelte";
 	import { createOptimisticRelation, createOptimisticCount } from "$lib/optimistic.svelte";
 	import { formatCount } from "$lib/format";
 	import Bones from "$lib/components/ui/Bones.svelte";
+	import { CROSSFADE_DURATION, CROSSFADE_EASING } from "$lib/motion/spring";
+	import { prefersReducedMotion } from "svelte/motion";
 	import uiLoadingprimitivesCount from "$lib/bones/ui-loadingprimitives--count.bones.json";
 	import type { StarChange } from "$lib/components/profile/types";
 	import type { RepoCounts } from "./types";
@@ -99,35 +101,35 @@
 		resolve(loginWithReturn(page.url.pathname + page.url.search) as "/login")
 	);
 	const starsHref = $derived(resolve(`/${repoOwnerHandle}/${repoName}/stars` as "/"));
+	const fade = $derived(prefersReducedMotion.current ? 0 : CROSSFADE_DURATION);
+	const face = $derived(failed ? "err" : starred ? "on" : "off");
 
 	const toggle = async () => {
 		const agent = auth.agent;
 		if (!agent || !relation.known || relation.loading || !repoDid) return;
-		relation.begin();
+		// every read happens before begin(), which flips the relation to the intended state
+		const wasStarred = relation.active;
+		const existingRkey = relation.rkey;
+		const delta = wasStarred ? -1 : 1;
+		relation.begin(!wasStarred);
 		starCount.resetFailure();
+		starCount.adjust(delta);
+		profileCounts?.adjust(agent.sub, "stars", delta);
 		try {
-			if (relation.active && relation.rkey) {
-				await deleteStar(agent, relation.rkey);
+			if (wasStarred && existingRkey) {
+				await deleteStar(agent, existingRkey);
 				relation.deleted();
-				starCount.adjust(-1);
-				profileCounts?.adjust(agent.sub, "stars", -1);
-				onCommit?.({
-					viewerDid: agent.sub,
-					repoDid,
-					starred: false,
-					rkey: null,
-					delta: -1
-				});
+				onCommit?.({ viewerDid: agent.sub, repoDid, starred: false, rkey: null, delta });
 			} else {
 				const rkey = await createStar(agent, repoDid);
 				relation.created(rkey);
-				starCount.adjust(1);
-				profileCounts?.adjust(agent.sub, "stars", 1);
-				onCommit?.({ viewerDid: agent.sub, repoDid, starred: true, rkey, delta: 1 });
+				onCommit?.({ viewerDid: agent.sub, repoDid, starred: true, rkey, delta });
 			}
 		} catch {
 			relation.fail();
+			starCount.adjust(-delta);
 			starCount.fail();
+			profileCounts?.adjust(agent.sub, "stars", -delta);
 		}
 	};
 </script>
@@ -140,22 +142,22 @@
 				size="small"
 				{insetShadow}
 				href={signedIn ? undefined : loginHref}
-				disabled={signedIn && (!relation.known || !repoDid || relation.loading)}
+				disabled={signedIn && (!relation.known || !repoDid)}
 				aria-busy={relation.loading}
 				onclick={signedIn ? toggle : undefined}
-				class="flex-1"
+				class="min-w-20 flex-1"
+				style="--swap: {fade}ms; --swap-ease: {CROSSFADE_EASING}"
 			>
-				{#if relation.loading}
-					<Spinner class="size-4 shrink-0" />
-				{:else if failed}
-					<TriangleAlert class="size-4 shrink-0" aria-hidden="true" />
-				{:else}
-					<Star
-						class={`size-4 shrink-0 ${starred ? "[&_path]:fill-[currentColor]" : ""}`}
-						aria-hidden="true"
-					/>
-				{/if}
-				<span>{starred ? "Starred" : "Star"}</span>
+				<span class="faces grid size-4 shrink-0" data-face={face} aria-hidden="true">
+					<Star class="face off size-4" />
+					<StarOff class="face on size-4" />
+					<TriangleAlert class="face err size-4" />
+				</span>
+				<span class="labels" data-on={starred} aria-hidden="true">
+					<span class="label off">Star</span>
+					<span class="label on">Unstar</span>
+				</span>
+				<span class="sr-only">{starred ? "Unstar" : "Star"}</span>
 			</Button>
 			<Button href={starsHref} variant="ghost" size="small" title="Starred by">
 				{#if loadedCount === undefined}
@@ -170,3 +172,59 @@
 		</ButtonGroup>
 	</Tooltip>
 </div>
+
+<style>
+	/* the three faces share one grid cell, so the icon never nudges the label as they swap */
+	.faces :global(.face) {
+		grid-column: 1;
+		grid-row: 1;
+		opacity: 0;
+		scale: 0.92;
+		filter: blur(1px);
+		transition:
+			opacity var(--swap) var(--swap-ease),
+			scale var(--swap) var(--swap-ease),
+			filter var(--swap) var(--swap-ease);
+	}
+
+	.faces[data-face="off"] :global(.off),
+	.faces[data-face="on"] :global(.on),
+	.faces[data-face="err"] :global(.err) {
+		opacity: 1;
+		scale: 1;
+		filter: blur(0);
+	}
+
+	/* only the visible word is in flow, so the box hugs it and the gap next to the icon
+	   stays honest; the button's min-width holds the widest arrangement so nothing beside
+	   it moves. keep that min-width in step if the labels ever change. */
+	.labels {
+		position: relative;
+	}
+
+	.label {
+		display: block;
+		white-space: nowrap;
+		opacity: 0;
+		translate: 0 3px;
+		filter: blur(1px);
+		transition:
+			opacity var(--swap) var(--swap-ease),
+			translate var(--swap) var(--swap-ease),
+			filter var(--swap) var(--swap-ease);
+	}
+
+	.labels[data-on="false"] .on,
+	.labels[data-on="true"] .off {
+		position: absolute;
+		top: 0;
+		left: 0;
+	}
+
+	.labels[data-on="false"] .off,
+	.labels[data-on="true"] .on {
+		opacity: 1;
+		translate: 0 0;
+		filter: blur(0);
+	}
+</style>
diff --git a/web/src/lib/components/repo/SubscribeButton.stories.svelte b/web/src/lib/components/repo/SubscribeButton.stories.svelte
index d956b29a5..197a4b23d 100644
--- a/web/src/lib/components/repo/SubscribeButton.stories.svelte
+++ b/web/src/lib/components/repo/SubscribeButton.stories.svelte
@@ -58,52 +58,46 @@
 
 	type PlayContext = Pick<StoryContext<Record<string, unknown>>, "canvas">;
 
-	// loading: the button keeps its "Watch" label + eye icon but is disabled, rather
-	// than swapping to a spinner-only loading state
+	// the two labels are layered in one grid cell so the box never resizes, so the
+	// button's text content always holds both words — assert on the accessible name,
+	// which comes from the single sr-only label.
+	const watchButton = (canvas: PlayContext["canvas"]) =>
+		canvas.findByRole("button", { name: /^watch$/i });
+	const unwatchButton = (canvas: PlayContext["canvas"]) =>
+		canvas.findByRole("button", { name: /^unwatch$/i });
+
+	// the initial read is still in flight: the button just reads "Watch" — there is no
+	// loading state, and a click before the read lands is ignored
 	const loadingState = async ({ canvas }: PlayContext) => {
-		const button = await canvas.findByRole("button", { name: /subscribe to notifications/i });
-		await expect(button).toBeDisabled();
-		await expect(button).toHaveTextContent("Watch");
+		await expect(await watchButton(canvas)).toBeVisible();
 	};
 
 	const notWatching = async ({ canvas }: PlayContext) => {
-		const button = await canvas.findByRole("button", { name: /subscribe to notifications/i });
+		const button = await watchButton(canvas);
 		await waitFor(() => expect(button).toBeEnabled());
-		await expect(button).toHaveTextContent("Watch");
 	};
 
 	const watching = async ({ canvas }: PlayContext) => {
-		const button = await canvas.findByRole("button", {
-			name: /unsubscribe from notifications/i
-		});
+		const button = await unwatchButton(canvas);
 		await waitFor(() => expect(button).toBeEnabled());
-		await expect(button).toHaveTextContent("Watching");
 	};
 
-	// clicking subscribe: the icon swaps to a spinner while the request is in flight,
-	// then settles on "Watching" with the eye-off icon
+	// clicking watch: the icon swaps to a spinner while the request is in flight, then
+	// the eye swaps to eye-off and the label crossfades to "Unwatch"
 	const subscribing = async ({ canvas }: PlayContext) => {
-		const button = await canvas.findByRole("button", { name: /subscribe to notifications/i });
+		const button = await watchButton(canvas);
 		await waitFor(() => expect(button).toBeEnabled());
 		await userEvent.click(button);
 		await waitFor(() =>
-			expect(
-				canvas.getByRole("button", { name: /unsubscribe from notifications/i })
-			).toBeVisible()
+			expect(canvas.getByRole("button", { name: /^unwatch$/i })).toBeVisible()
 		);
 	};
 
 	const unsubscribing = async ({ canvas }: PlayContext) => {
-		const button = await canvas.findByRole("button", {
-			name: /unsubscribe from notifications/i
-		});
+		const button = await unwatchButton(canvas);
 		await waitFor(() => expect(button).toBeEnabled());
 		await userEvent.click(button);
-		await waitFor(() =>
-			expect(
-				canvas.getByRole("button", { name: /subscribe to notifications/i })
-			).toBeVisible()
-		);
+		await waitFor(() => expect(canvas.getByRole("button", { name: /^watch$/i })).toBeVisible());
 	};
 
 	// the subscription query failed: the button turns red with a triangle-alert icon,
@@ -111,13 +105,12 @@
 	// after 2s, dropping the button back to its normal default state.
 	const loadError = async ({ canvas }: PlayContext) => {
 		await waitFor(() =>
-			expect(
-				canvas.getByRole("button", { name: /subscribe to notifications/i })
-			).toHaveAttribute("data-variant", "danger")
+			expect(canvas.getByRole("button", { name: /^watch$/i })).toHaveAttribute(
+				"data-variant",
+				"danger"
+			)
 		);
-		const button = canvas.getByRole("button", { name: /subscribe to notifications/i });
-		await expect(button).toHaveTextContent("Watch");
-		await userEvent.hover(button);
+		await userEvent.hover(canvas.getByRole("button", { name: /^watch$/i }));
 		await waitFor(() =>
 			expect(screen.getByRole("tooltip")).toHaveTextContent(
 				"Could not load subscription state"
@@ -125,32 +118,25 @@
 		);
 		await waitFor(
 			() =>
-				expect(
-					canvas.getByRole("button", { name: /subscribe to notifications/i })
-				).not.toHaveAttribute("data-variant", "danger"),
+				expect(canvas.getByRole("button", { name: /^watch$/i })).not.toHaveAttribute(
+					"data-variant",
+					"danger"
+				),
 			{ timeout: 3000 }
 		);
-		await expect(canvas.queryByRole("tooltip")).toBeNull();
+		await waitFor(() => expect(canvas.queryByRole("tooltip")).toBeNull());
 	};
 
 	// the toggle request failed: the button falls into the same red error state, then
 	// clears back to normal after 2s
 	const toggleError = async ({ canvas }: PlayContext) => {
-		const button = await canvas.findByRole("button", { name: /subscribe to notifications/i });
+		const button = await watchButton(canvas);
 		await waitFor(() => expect(button).toBeEnabled());
 		await userEvent.click(button);
-		await waitFor(() =>
-			expect(
-				canvas.getByRole("button", { name: /subscribe to notifications/i })
-			).toHaveAttribute("data-variant", "danger")
-		);
-		await waitFor(
-			() =>
-				expect(
-					canvas.getByRole("button", { name: /subscribe to notifications/i })
-				).not.toHaveAttribute("data-variant", "danger"),
-			{ timeout: 3000 }
-		);
+		await waitFor(() => expect(button).toHaveAttribute("data-variant", "danger"));
+		await waitFor(() => expect(button).not.toHaveAttribute("data-variant", "danger"), {
+			timeout: 3000
+		});
 	};
 
 	const { Story } = defineMeta({
diff --git a/web/src/lib/components/repo/SubscribeButton.svelte b/web/src/lib/components/repo/SubscribeButton.svelte
index c2848d749..7ab3007f0 100644
--- a/web/src/lib/components/repo/SubscribeButton.svelte
+++ b/web/src/lib/components/repo/SubscribeButton.svelte
@@ -1,16 +1,18 @@
 <script lang="ts">
 	import { page } from "$app/state";
+	import { resolve } from "$app/paths";
 	import Eye from "$icon/eye";
+	import EyeOff from "$icon/eye-off";
+	import TriangleAlert from "$icon/triangle-alert";
 	import { getAuth } from "$lib/auth.svelte";
 	import { loginWithReturn } from "$lib/auth/guards";
 	import { createSubscription, deleteSubscription, getSubscriptionRkey } from "$lib/api/graph";
 	import { createBobbinClient } from "$lib/api/client";
-	import TriangleAlert from "$icon/triangle-alert";
 	import Button from "$lib/components/ui/Button.svelte";
 	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
-	import Spinner from "$lib/components/ui/Spinner.svelte";
 	import Tooltip from "$lib/components/ui/Tooltip.svelte";
-	import { resolve } from "$app/paths";
+	import { CROSSFADE_DURATION, CROSSFADE_EASING } from "$lib/motion/spring";
+	import { prefersReducedMotion } from "svelte/motion";
 
 	interface Props {
 		repoDid: string;
@@ -25,7 +27,7 @@
 	);
 
 	let subscribed = $state(false);
-	let loading = $state(true);
+	let known = $state(false);
 	let toggling = $state(false);
 	let subRkey = $state<string | null>(null);
 	let error = $state<string | null>(null);
@@ -36,31 +38,25 @@
 		if (!agent || !did || !repoDid) {
 			subscribed = false;
 			subRkey = null;
-			loading = false;
+			known = true;
 			return;
 		}
 		let cancelled = false;
-		loading = true;
+		known = false;
 		error = null;
 		const bobbinUrl = (page.data as { publicConfig?: { bobbinUrl?: string } })?.publicConfig
 			?.bobbinUrl;
-		if (!bobbinUrl) {
-			loading = false;
-			return;
-		}
+		if (!bobbinUrl) return;
 		const ctx = createBobbinClient({ serviceUrl: bobbinUrl });
 		getSubscriptionRkey(ctx, did, repoDid)
 			.then((rkey) => {
 				if (cancelled) return;
 				subRkey = rkey;
 				subscribed = !!rkey;
-				loading = false;
+				known = true;
 			})
 			.catch(() => {
-				if (!cancelled) {
-					loading = false;
-					error = "Could not load subscription state";
-				}
+				if (!cancelled) error = "Could not load subscription state";
 			});
 		return () => {
 			cancelled = true;
@@ -77,56 +73,110 @@
 
 	const toggle = async () => {
 		const agent = auth.agent;
-		if (!agent || loading || toggling || !repoDid) return;
+		if (!agent || !repoDid || !known || toggling) return;
+		const wasSubscribed = subscribed;
+		const wasRkey = subRkey;
 		error = null;
 		toggling = true;
+		subscribed = !wasSubscribed;
 		try {
-			if (subscribed && subRkey) {
-				await deleteSubscription(agent, subRkey);
-				subscribed = false;
+			if (wasSubscribed && wasRkey) {
+				await deleteSubscription(agent, wasRkey);
 				subRkey = null;
 			} else {
 				subRkey = await createSubscription(agent, repoDid);
-				subscribed = true;
 			}
 		} catch {
+			subscribed = wasSubscribed;
+			subRkey = wasRkey;
 			error = "Failed to update subscription";
 		} finally {
 			toggling = false;
 		}
 	};
+
+	const fade = $derived(prefersReducedMotion.current ? 0 : CROSSFADE_DURATION);
+	const face = $derived(error ? "err" : subscribed ? "on" : "off");
 </script>
 
-{#if signedIn}
-	{#if error}
-		<Tooltip content={error}>
-			<Button
-				variant="danger"
-				size="small"
-				icon={TriangleAlert}
-				onclick={toggle}
-				disabled={loading || toggling}
-				aria-label="Subscribe to notifications"
-			>
-				Watch
-			</Button>
-		</Tooltip>
-	{:else}
-		<ButtonGroup>
-			<Button
-				variant="default"
-				size="small"
-				icon={toggling ? Spinner : Eye}
-				onclick={toggle}
-				disabled={loading || toggling}
-				aria-label={subscribed
-					? "Unsubscribe from notifications"
-					: "Subscribe to notifications"}
-			>
-				{subscribed ? "Watching" : "Watch"}
-			</Button>
-		</ButtonGroup>
-	{/if}
-{:else}
-	<Button variant="default" size="small" icon={Eye} href={loginHref}>Watch</Button>
-{/if}
+<Tooltip content={error ?? ""} disabled={!error}>
+	<ButtonGroup>
+		<Button
+			variant={error ? "danger" : "default"}
+			size="small"
+			insetShadow={true}
+			href={signedIn ? undefined : loginHref}
+			class="min-w-23"
+			onclick={signedIn ? toggle : undefined}
+			style="--swap: {fade}ms; --swap-ease: {CROSSFADE_EASING}"
+		>
+			<span class="faces grid size-4 shrink-0" data-face={face} aria-hidden="true">
+				<Eye class="face off size-4" />
+				<EyeOff class="face on size-4" />
+				<TriangleAlert class="face err size-4" />
+			</span>
+			<span class="labels" data-on={subscribed} aria-hidden="true">
+				<span class="label off">Watch</span>
+				<span class="label on">Unwatch</span>
+			</span>
+			<span class="sr-only">{subscribed ? "Unwatch" : "Watch"}</span>
+		</Button>
+	</ButtonGroup>
+</Tooltip>
+<span role="status" aria-live="polite" class="sr-only">{error ?? ""}</span>
+
+<style>
+	/* the three faces share one grid cell, so the icon never nudges the label as they swap */
+	.faces :global(.face) {
+		grid-column: 1;
+		grid-row: 1;
+		opacity: 0;
+		scale: 0.92;
+		filter: blur(1px);
+		transition:
+			opacity var(--swap) var(--swap-ease),
+			scale var(--swap) var(--swap-ease),
+			filter var(--swap) var(--swap-ease);
+	}
+
+	.faces[data-face="off"] :global(.off),
+	.faces[data-face="on"] :global(.on),
+	.faces[data-face="err"] :global(.err) {
+		opacity: 1;
+		scale: 1;
+		filter: blur(0);
+	}
+
+	/* only the visible word is in flow, so the box hugs it and the gap next to the icon
+	   stays honest; the button's min-width holds the widest arrangement so nothing beside
+	   it moves. keep that min-width in step if the labels ever change. */
+	.labels {
+		position: relative;
+	}
+
+	.label {
+		display: block;
+		white-space: nowrap;
+		opacity: 0;
+		translate: 0 3px;
+		filter: blur(1px);
+		transition:
+			opacity var(--swap) var(--swap-ease),
+			translate var(--swap) var(--swap-ease),
+			filter var(--swap) var(--swap-ease);
+	}
+
+	.labels[data-on="false"] .on,
+	.labels[data-on="true"] .off {
+		position: absolute;
+		top: 0;
+		left: 0;
+	}
+
+	.labels[data-on="false"] .off,
+	.labels[data-on="true"] .on {
+		opacity: 1;
+		translate: 0 0;
+		filter: blur(0);
+	}
+</style>