Shimmering Text

An animated shimmering text effect, ideal for loading and "thinking" states.

Animated gradient text with automatic cycling

Agent is thinking...

Installation

npx shadcn-svelte@latest add https://sv11.ui.twango.dev/r/shimmering-text.json

<script lang="ts">
	import { ShimmeringText } from "$lib/registry/ui/shimmering-text";
</script>
 
<ShimmeringText />

Pass any string to text and the shimmer begins as soon as the element enters the viewport.

<script lang="ts">
	import { ShimmeringText } from "$lib/registry/ui/shimmering-text";
</script>
 
<ShimmeringText text="Hello, World!" />

Slow the sweep down with duration and override the gradient with color (base) and shimmerColor (highlight).

<ShimmeringText text="Custom Shimmer" duration={3} color="#6B7280" shimmerColor="#3B82F6" />

Set once to true so the animation fires a single time when the element scrolls into view.

<ShimmeringText text="Appears when scrolled into view" startOnView once />

Control the repeat loop with repeat and repeatDelay.

<ShimmeringText text="Repeating Shimmer" repeat repeatDelay={1} duration={2} />

Merge Tailwind utilities through class and widen the highlight with spread.

<ShimmeringText text="Large Heading" class="text-4xl font-bold" spread={3} />

Prop	Type	Default	Description
`text`	`string`	—	Text to display with the shimmer effect.
`duration?`	`number`	`2`	Duration of one shimmer sweep in seconds.
`delay?`	`number`	`0`	Seconds to wait before the first sweep begins.
`repeat?`	`boolean`	`true`	Whether the shimmer sweep loops indefinitely.
`repeatDelay?`	`number`	`0.5`	Pause between repeats in seconds when `repeat` is `true`.
`class?`	`string`	—	Extra classes merged onto the root `<span>`.
`startOnView?`	`boolean`	`true`	When `true`, the animation only starts once the element scrolls into view. When `false`, it begins on mount.
`once?`	`boolean`	`false`	When `true`, the animation fires a single time and never again. When `false`, it replays each time the element re-enters the viewport.
`inViewMargin?`	`NonNullable<Parameters<typeof inView>[2]>["margin"]`	—	Root margin passed to the underlying Motion `inView` observer — used to shrink or expand the viewport trigger area (e.g. `"0px 0px -10%"`).
`spread?`	`number`	`2`	Spread multiplier applied to the shimmer highlight width. The final spread scales with text length (`text.length * spread` pixels).
`color?`	`string`	—	Base text color. Defaults to `var(--muted-foreground)`.
`shimmerColor?`	`string`	—	Highlight gradient color. Defaults to `var(--foreground)`.

Built on Motion — uses animate for the sweep and inView for viewport detection.
The shimmer is a CSS gradient painted over the text via background-clip: text, so it inherits font weight, kerning, and line-height from surrounding styles.
Spread scales with text length (text.length * spread pixels) so short and long strings read consistently.
color and shimmerColor set the --base-color and --shimmer-color custom properties; leaving them unset falls back to var(--muted-foreground) and var(--foreground), which already track light/dark mode.
When startOnView is true and once is false, the animation resumes each time the element re-enters the viewport.
The element is rendered as an inline <span>, so it composes with surrounding text nodes.