Shimmer text
Also called text shimmer, shiny text, or shine text effect
Text with a band of light sweeping across it on a loop, often used for "Thinking…" and other status labels while an app is working.
import { motion, useReducedMotion } from 'motion/react';
const SWEEP_SECONDS = 2;
type ThinkingStatusProps = {
label?: string;
// Turn this off as soon as the response starts streaming.
active: boolean;
};
export function ThinkingStatus({
label = 'Thinking…',
active
}: ThinkingStatusProps) {
const reduceMotion = useReducedMotion();
if (!active || reduceMotion) {
return (
<span role='status' className='text-sm text-muted-foreground'>
{label}
</span>
);
}
return (
// A muted gradient with one bright band, clipped to the letters and
// three times wider than the label so the band can enter and exit.
<motion.span
role='status'
initial={{ backgroundPosition: '100% 0%' }}
animate={{ backgroundPosition: '0% 0%' }}
transition={{ duration: SWEEP_SECONDS, ease: 'linear', repeat: Infinity }}
className='bg-linear-to-r from-muted-foreground from-40% via-foreground via-50% to-muted-foreground to-60% bg-size-[300%_100%] bg-clip-text text-sm text-transparent'
>
{label}
</motion.span>
);
}Make the assistant's "Thinking…" status shimmer: fill the text with a linear gradient of the muted text color with a brighter band in the middle 20%, clip it with background-clip: text, and sweep the band from left to right every 2 seconds, linear, on a loop. Stop the shimmer when the response starts streaming, and show the plain muted label when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Shimmer text?
Shimmer text fills a label with a gradient that is mostly the normal text color plus one brighter band, clips it to the letters, and slides it sideways on a loop. The band passes over the words again and again, like light catching metal.
AI chat apps use it for status lines such as "Thinking…" or "Searching the web", because it says "still working" without a spinner taking up space. It also suits loading placeholders, but it pulls the eye, so keep it to one line at a time and stop it as soon as the work is done.
A sweep of about 1.5 to 2.5 seconds feels calm. Animating background-position repaints the text every frame, which is fine for one label; for many shimmering elements, slide a masked highlight with transform instead. When someone prefers reduced motion, show the plain label.
Often confused with
- Skeleton screen
- A skeleton screen shows gray placeholder shapes, often with a shimmer, before content loads. Shimmer text animates real words such as a status label.
- Gradient text
- Gradient text is a still color blend for emphasis. Shimmer text uses a moving gradient to signal that something is in progress.
Related terms
All termsLoading state
The view a screen shows while its data is on the way, designed together with the outcomes that follow: loaded, empty, or error.
Looping animation
An animation that plays more than once, either a set number of times or forever, set in CSS with animation-iteration-count.
Spinner
A small looping animation, usually a rotating ring, that shows the app is busy with a short task of unknown length.
Perceived performance
How fast an app feels to people, which skeleton screens, instant feedback, and progressive loading can improve even when the real wait stays the same.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.