Text Shimmer

Installation

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

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { TextShimmer } from '@/components/ui/text-shimmer'

Exampletsx

import { TextShimmer } from '@/components/ui/text-shimmer'

export default function TextShimmerDemo() {
  return (
    <div className="mx-auto flex min-h-[360px] max-w-3xl flex-col items-center justify-center gap-6 px-6 py-20 text-center">
      <TextShimmer as="h2" text="Reconciling 1,284 invoices…" className="text-3xl font-semibold tracking-tight sm:text-4xl" />
      <p className="max-w-md text-sm leading-relaxed text-muted-foreground">
        Use it for working states, streaming responses, or any moment the system is thinking on the
        user&apos;s behalf.
      </p>
      <TextShimmer text="Drafting reply · 3 sources attached" className="font-mono text-xs uppercase tracking-[0.2em]" duration={3.2} />
    </div>
  )
}

API reference

TextShimmer accepts the following props.

Prop	Type	Default	Description
`text`*	`string`	–	–
`as`	`'span' \| 'h1' \| 'h2' \| 'h3' \| 'p'`	`'span'`	–
`duration`	`number`	`2.6`	seconds for one sweep

…plus everything from React.HTMLAttributes<HTMLSpanElement>: className, event handlers, aria attributes and the rest pass straight through.

Related components

Annotate Callouts

Inline annotation system, marked phrases carry numbered mono superscripts wired to margin notes that reveal as each mark scrolls into view. Editorial footnotes, live on the page.

Baseline Wave

A wave travels the baseline once, characters lift and settle as it passes, like a breeze crossing the line. One pass, then stillness.

Blur Focus

Words rack into focus one after another, a camera pulling the sentence sharp. Blur, opacity and a breath of letter-spacing resolve in reading order.

Compositor's Case

Type set from a visible case, sorts fly from their compartments, land mirrored in the composing stick, and one proof pull flips the React headline readable. Tailwind-token letterpress craft.

Dot Matrix Print

The headline prints as a dot-matrix raster, a carriage sweeps once and canvas dots sized by ink density pop in column by column. React and Tailwind tokens via probes; one accent word in primary.

Frottage Rubbing

A graphite rubbing over hidden relief, crayon passes sweep the sheet and the React headline surfaces where pigment catches. Canvas text effect themed by Tailwind token probes.

Frequently asked questions

How do I install the Text Shimmer component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/text-shimmer`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Text Shimmer require?

Text Shimmer has no npm dependencies beyond React and Tailwind CSS itself, so there is nothing extra to install or keep updated.

Can I theme Text Shimmer to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code