Pro

Shimmer text

Words that show work is happening: a soft band of the text colour sweeps across muted letters. It is a background clipped to the glyphs, so it costs no layout and no script and stands still under reduced motion.

Pro

pnpm dlx shadcn@latest add @caliper/shimmer-text

Research

“Which EU countries require VAT on digital goods?”

Searching 12 sources…

Installs components/ui/shimmer-text.tsxDepends on none beyond ReactMotion shared motion tokens

When to use

Use it for

Short in-progress labels: "Searching 12 sources", "Generating preview".
The line that becomes the result once the work is done.

Skip it when

Long paragraphs; the sweep becomes hard to read.
Things that are not working; it reads as busy.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Text stays text: It is ordinary text with a clipped background; forced colours show it plainly.

Styling

Its own colours: The band is the foreground over muted text, so it reads in both themes without a gradient of its own.

Installation

terminal

pnpm dlx shadcn@latest add @caliper/shimmer-text

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

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

The worked example comes with Pro

The 28-line example behind the preview opens here, ready to copy.

576 Pro parts, blocks and page templates, all with source
$199 once, with a year of updates. What you have stays yours
A full refund within 14 days if it is not for you

Checking your licence…

API reference

ShimmerText

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription

activebooleantrueSweeping or still. Turn it off when the work is done and the words become the result.

durationnumber2Seconds for one sweep; longer words want a little longer.

asElementType"span"

It is built on native elements, so roles and focus come from the browser.

No custom key handling; Tab and the native activation keys do the work.

Motion

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.