From 66b48ae5877893687bb3eb0d83bf61011bcb9952 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 5 Aug 2026 10:06:16 +0200
Subject: [PATCH] web/components: add ShimmerText

Text with a highlight that sweeps across it, for pending states like
"cloning" or "waiting for a runner". Ported from spelte.dev, but the
js animation is gone (plain css keyframes now) and the colour comes
from our semantic tokens instead of a tailwind palette.

The highlight is mixed out of currentColor towards the page
background, so it lightens in light mode and darkens in dark mode on
its own. Nothing uses it yet.

Signed-off-by: eti <eti@eti.tf>
---
 .../components/ui/ShimmerText.stories.svelte  |  38 ++++++
 web/src/lib/components/ui/ShimmerText.svelte  | 110 ++++++++++++++++++
 2 files changed, 148 insertions(+)
 create mode 100644 web/src/lib/components/ui/ShimmerText.stories.svelte
 create mode 100644 web/src/lib/components/ui/ShimmerText.svelte

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 00000000..3ad16240
--- /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 00000000..307537c1
--- /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>
-- 
2.51.2