Shimmer Text

A bright band drifts across muted text, left to right, on a loop.

Generating response

Installation

npx shadcn@latest add @loomui/shimmer-text

Usage

import { ShimmerText } from "@/components/ui/shimmer-text"

<ShimmerText active={isLoading} text="Generating response" />

How it works

The base text renders normally in a plain muted color, never clipped and never masked. A ::before layer duplicates it via content: attr(data-text) and paints a narrow highlight band onto that copy through background-clip: text, animating background-position to sweep it across. Two layers rather than one: the resting text stays crisp because it's never routed through the gradient-clip mechanism at all, only the travelling highlight is.

data-text mirrors the text prop automatically, so there's nothing to keep in sync by hand.

Props

Prop	Type	Default	Description
`active`	`boolean`	`false`	Runs the shimmer. Off is a static line.
`text`	`string`	-	The text.
`className`	`string`	-	Merged onto the wrapper.

Any other <span> prop is forwarded.

Reduced motion

The highlight layer doesn't just stop animating. It stops existing (content: none), so there's no risk of it freezing mid-sweep as an odd bright patch. What's left is the plain, fully readable base text.