ShimmerText

A soft highlight sweeping across real, unsplit text.

Thinking about your request…

bash
npx shadcn@latest add https://www.rad-ui.com/r/shimmer-text.json

React
import ShimmerText from "@/components/fx/shimmer-text"

<ShimmerText>Thinking about your request…</ShimmerText>

Text is never split, so screen readers, selection and translation work normally.
The base colour is currentColor: check its contrast; the highlight only brightens it briefly.
Forced-colours mode falls back to plain text.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) stops the sweep.

Prop	Type	Default	Description
children	ReactNode	—	The text. Never split.
as	'p' \| 'span' \| 'div' \| 'h1' \| 'h2' \| 'h3' \| 'h4'	'span'	Element to render.
duration	number	2.5	Seconds per sweep.
highlight	string	'rgba(255,255,255,0.85)'	Colour of the passing highlight.