diff --git a/web/src/lib/components/ui/ShimmerText.stories.svelte b/web/src/lib/components/ui/ShimmerText.stories.svelte
new file mode 100644
index 000000000..3ad162401
--- /dev/null
+++ b/web/src/lib/components/ui/ShimmerText.stories.svelte
@@ -0,0 +1,38 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import ShimmerText from "./ShimmerText.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/ShimmerText",
+		component: ShimmerText,
+		tags: ["autodocs"],
+		argTypes: {
+			color: {
+				control: { type: "inline-radio" },
+				options: ["inherit", "default", "muted", "subtle", "success", "danger", "warning", "info"]
+			},
+			duration: { control: { type: "number" } },
+			delay: { control: { type: "number" } }
+		},
+		args: {
+			color: "inherit",
+			duration: 3,
+			delay: 0
+		}
+	});
+</script>
+
+<Story name="Default">Cloning repository</Story>
+<Story name="Muted" args={{ color: "muted" }}>Waiting for a runner</Story>
+<Story name="Warning" args={{ color: "warning" }}>Pipeline running</Story>
+<Story name="Slow" args={{ duration: 6 }}>Taking a while</Story>
+
+<Story name="Staggered">
+	{#snippet template()}
+		<div class="flex flex-col gap-1 typography-paragraph-large">
+			<ShimmerText color="muted" delay={0}>Resolving knots</ShimmerText>
+			<ShimmerText color="muted" delay={0.3}>Fetching objects</ShimmerText>
+			<ShimmerText color="muted" delay={0.6}>Building index</ShimmerText>
+		</div>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/ui/ShimmerText.svelte b/web/src/lib/components/ui/ShimmerText.svelte
new file mode 100644
index 000000000..307537c17
--- /dev/null
+++ b/web/src/lib/components/ui/ShimmerText.svelte
@@ -0,0 +1,110 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const shimmerText = tv({
+		// w-fit keeps the box hugging the glyphs inside a stretching flex or grid
+		// parent, so the sweep is sized by the text rather than by the column
+		base: "inline-block w-fit",
+		variants: {
+			color: {
+				/** keep whatever colour the surrounding text already has */
+				inherit: "",
+				default: "text-foreground-default",
+				muted: "text-foreground-muted",
+				subtle: "text-foreground-subtle",
+				success: "text-foreground-success",
+				danger: "text-foreground-danger",
+				warning: "text-foreground-warning",
+				info: "text-foreground-info"
+			}
+		},
+		defaultVariants: {
+			color: "inherit"
+		}
+	});
+
+	export type ShimmerTextVariants = VariantProps<typeof shimmerText>;
+</script>
+
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	// text whose own colour is swept by a lighter (or, in dark mode, darker)
+	// highlight — for pending states like "cloning", "running", "waiting for a
+	// runner". Ported from spelte.dev/docs/shimmer-text, with the js animation
+	// dropped for plain css and the palette swapped for our semantic tokens.
+	interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, "class" | "children"> {
+		color?: ShimmerTextVariants["color"];
+		/** seconds for one full cycle — the sweep takes half of it, then it rests */
+		duration?: number;
+		/** seconds to wait before the first sweep, for staggering several lines */
+		delay?: number;
+		class?: string;
+		children: Snippet;
+	}
+
+	let {
+		color = "inherit",
+		duration = 3,
+		delay = 0,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	const classes = $derived(shimmerText({ color, class: className }));
+</script>
+
+<span
+	class="shimmer {classes}"
+	style:--shimmer-duration="{duration}s"
+	style:--shimmer-delay="{delay}s"
+	{...rest}
+>
+	{@render children()}
+</span>
+
+<style>
+	@keyframes shimmer {
+		from {
+			background-position-x: -100%;
+		}
+		/* the sweep is done at the halfway mark; the rest of the cycle is a pause */
+		50%,
+		to {
+			background-position-x: 250%;
+		}
+	}
+
+	.shimmer {
+		/* mixing towards the page colour lightens the highlight in light mode and
+		   darkens it in dark mode, so no dark: override is needed. override the
+		   custom property when the text sits on a non-default surface. */
+		--shimmer-highlight: color-mix(in srgb, currentColor 40%, var(--color-background-default));
+
+		background-color: currentColor;
+		background-image: linear-gradient(
+			to right,
+			currentColor 0%,
+			var(--shimmer-highlight) 40%,
+			var(--shimmer-highlight) 60%,
+			currentColor 100%
+		);
+		background-repeat: no-repeat;
+		background-size: 50% 200%;
+		background-position-x: -100%;
+		background-clip: text;
+		-webkit-text-fill-color: transparent;
+
+		animation: shimmer var(--shimmer-duration) linear var(--shimmer-delay) infinite;
+	}
+
+	/* parked off to the left, the gradient never shows and the flat
+	   background-color paints the text in its own colour */
+	@media (prefers-reduced-motion: reduce) {
+		.shimmer {
+			animation: none;
+		}
+	}
+</style>