diff --git a/web/src/app.css b/web/src/app.css
index 1815a678f..dd75ec25e 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -532,6 +532,35 @@ html {
 	}
 }
 
+@utility text-swap {
+	display: inline-block;
+	transform: translateY(0);
+	filter: blur(0);
+	opacity: 1;
+	will-change: transform, filter, opacity;
+	transition:
+		transform var(--text-swap-dur) var(--text-swap-ease),
+		filter var(--text-swap-dur) var(--text-swap-ease),
+		opacity var(--text-swap-dur) var(--text-swap-ease);
+
+	&[data-swap="exit"] {
+		transform: translateY(calc(var(--text-swap-translate-y) * -1));
+		filter: blur(var(--text-swap-blur));
+		opacity: 0;
+	}
+
+	&[data-swap="enter"] {
+		transform: translateY(var(--text-swap-translate-y));
+		filter: blur(var(--text-swap-blur));
+		opacity: 0;
+		transition: none;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		transition: none;
+	}
+}
+
 @utility bone-pulse {
 	/* fade-in has to be second so it overrides pulse during its 120ms */
 	animation:
@@ -570,6 +599,13 @@ html {
 }
 
 @layer base {
+	:root {
+		--text-swap-dur: 150ms;
+		--text-swap-translate-y: 4px;
+		--text-swap-blur: 2px;
+		--text-swap-ease: ease-in-out;
+	}
+
 	@font-face {
 		font-family: "InterVariable";
 		src: url("/fonts/InterVariable.woff2") format("woff2-variations");
diff --git a/web/src/lib/components/ui/TextSwap.stories.svelte b/web/src/lib/components/ui/TextSwap.stories.svelte
new file mode 100644
index 000000000..e03dec990
--- /dev/null
+++ b/web/src/lib/components/ui/TextSwap.stories.svelte
@@ -0,0 +1,58 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import TextSwap from "$lib/components/ui/TextSwap.svelte";
+	import Button from "$lib/components/ui/Button.svelte";
+	import Card from "$lib/components/ui/Card.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/TextSwap",
+		component: TextSwap,
+		tags: ["autodocs"],
+		args: { value: "Changes" }
+	});
+</script>
+
+<script lang="ts">
+	let toggled = $state(true);
+	let slow = $state(true);
+</script>
+
+<Story name="Default">
+	{#snippet template(args)}
+		<Card padding="small" class="w-64">
+			<TextSwap {...args} />
+		</Card>
+	{/snippet}
+</Story>
+
+<Story name="Interactive">
+	{#snippet template()}
+		<Card padding="small" class="flex w-64 items-center justify-between">
+			<TextSwap value={toggled ? "Changes" : "Commits"} />
+			<Button onclick={() => (toggled = !toggled)}>Swap</Button>
+		</Card>
+	{/snippet}
+</Story>
+
+<Story name="Monospace ids">
+	{#snippet template()}
+		<Card padding="small" class="flex w-64 items-center justify-between">
+			<TextSwap
+				value={toggled ? "zsuskuln" : "d4e5f6a7"}
+				class="typography-monospace-regular text-foreground-muted"
+			/>
+			<Button onclick={() => (toggled = !toggled)}>Swap</Button>
+		</Card>
+	{/snippet}
+</Story>
+
+<Story name="Retuned">
+	{#snippet template()}
+		<div style="--text-swap-dur: 400ms; --text-swap-translate-y: 10px; --text-swap-blur: 5px">
+			<Card padding="small" class="flex w-64 items-center justify-between">
+				<TextSwap value={slow ? "Processing…" : "Done"} />
+				<Button onclick={() => (slow = !slow)}>Swap</Button>
+			</Card>
+		</div>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/ui/TextSwap.svelte b/web/src/lib/components/ui/TextSwap.svelte
new file mode 100644
index 000000000..61ec8d8a7
--- /dev/null
+++ b/web/src/lib/components/ui/TextSwap.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { tick, untrack } from "svelte";
+
+	interface Props {
+		value: string;
+		class?: string;
+	}
+
+	let { value, class: className }: Props = $props();
+
+	let el: HTMLSpanElement | undefined = $state();
+	let shown = $state(untrack(() => value));
+	let phase = $state<"exit" | "enter" | undefined>();
+
+	$effect(() => {
+		const next = value;
+		if (!el || next === shown) return;
+
+		const dur = parseFloat(getComputedStyle(el).getPropertyValue("--text-swap-dur")) || 150;
+
+		phase = "exit";
+		const timer = setTimeout(() => {
+			void (async () => {
+				shown = next;
+				phase = "enter";
+				await tick();
+				void el?.offsetHeight;
+				phase = undefined;
+			})();
+		}, dur);
+
+		return () => clearTimeout(timer);
+	});
+</script>
+
+<span bind:this={el} class="text-swap {className ?? ''}" data-swap={phase}>{shown}</span>