Shimmer text

The line an assistant shows while it works. A band of light crosses the letters and comes round again, at the same speed over two words or a whole sentence, so it reads as a status and not as decoration. It's a gradient clipped to the glyphs: no JavaScript, and the text stays real text for copying and for screen readers.

Searching 14 sources

Installation

Terminalbash

npx @neelshha/ui@latest add shimmer-text

Usage

page.tsxtsx

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

<ShimmerText active={searching}>
  {searching ? "Searching 14 sources" : "Searched 14 sources"}
</ShimmerText>

The light is clipped to the letters, so anything inside that isn't text, like an icon, disappears with the rest of the background. Put icons next to it.

Colours

Set the variables on the text or on any parent. This one sweeps in the accent ink.

Reading the changelog

globals.csscss

.accent {
  --ns-shimmer-light: var(--accent-ink);
}

API

Other props go to the span. With reduced motion the light stays off and the text keeps its working colour. In forced colors mode it's plain text.

Prop	Type	Default	Description
`active`	`boolean`	`true`	Sweeps while true. Turn it off when the work is done and the text settles to its own colour.
`--ns-shimmer-base`	`color`	`var(--text-sub)`	The letters between sweeps.
`--ns-shimmer-light`	`color`	`var(--text-heading)`	The light at the middle of the band.
`--ns-shimmer-band`	`length`	`4em`	How wide the light is.
`--ns-shimmer-gap`	`length`	`24em`	From one band to the next. The pattern moves one gap per cycle, so a wider gap also sweeps faster.