Text shimmer

Show ongoing work with a calm light across the words.

textmotionloading

Preview

Live · keyboard ready

Synthesizing the registry…Mostly ready

When to use

AI thinking or loading labels such as Generating summary.
Short status lines that should show ongoing work and settle when done.

When not to use

Use text-stream for the response text itself.
Use skeleton for content placeholders and progress for measurable progress.

shadcn CLI

Also installs (1)

manicat-foundation

Manual install(+)

registry.jsonjson

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "text-shimmer",
  "type": "registry:ui",
  "title": "Text shimmer",
  "description": "Show ongoing work with a calm light across the words.",
  "categories": [
    "text"
  ],
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://manicat.viraza.net/r/manicat-foundation.json"
  ],
  "files": [
    {
      "path": "registry/components/text-shimmer/text-shimmer.tsx",
      "type": "registry:component",
      "target": "@components/manicat/text-shimmer/text-shimmer.tsx"
    },
    {
      "path": "registry/components/text-shimmer/text-shimmer.module.css",
      "type": "registry:component",
      "target": "@components/manicat/text-shimmer/text-shimmer.module.css"
    }
  ],
  "docs": "Docs and live preview: https://uiarc.dev/components/text-shimmer",
  "meta": {
    "tier": "free",
    "kind": "component",
    "docs": "https://manicat.viraza.net/components/text-shimmer",
    "markdown": "https://uiarc.dev/components/text-shimmer/markdown",
    "tags": [
      "text",
      "motion",
      "loading"
    ]
  }
}

Usage

Install the component, then copy this into your app. Change the content and the props to fit your screen.

example.tsxtsx

"use client";

import { TextShimmer } from "@/components/manicat/text-shimmer/text-shimmer";

export function TextShimmerExample() {
  return (
    <div className="flex w-full flex-col items-center gap-3">
      <TextShimmer>Synthesizing the registry…</TextShimmer>
      <TextShimmer active={false}>Mostly ready</TextShimmer>
    </div>
  );
}

Examples

Real screens rather than isolated props. Switch to Code to copy a whole example into your project.

Thinking state A shimmer for “working on it” text; turn it off when the work is done.

Live · keyboard ready

Synthesizing the registry…

thinking-state-a-shimmer-for-working-on-it-text-turn-it-off-when-the-work-is-done-.tsxtsx

"use client";

import { useEffect, useState } from "react";
import { TextShimmer } from "@/components/manicat/text-shimmer/text-shimmer";

export function TextShimmerThinkingExample() {
  const [done, setDone] = useState(false);

  return (
    <div className="flex w-full flex-col items-center gap-3">
      <TextShimmer active={!done}>{done ? "Done." : "Synthesizing the registry…"}</TextShimmer>
      <button type="button" className="text-sm text-(color:--text-muted) underline" onClick={() => setDone((value) => !value)}>
        {done ? "Run again" : "Finish"}
      </button>
    </div>
  );
}

Accessibility

Sets aria-busy while active; the text itself stays real, readable text.
Announce completion from your own aria-live region; the component does not.

Motion

A bell-shaped highlight band in the current text color sweeps linearly over a muted base, pausing briefly between passes.
The sweep only runs while active, in view, and the page is visible; a paused band resumes where it stopped. A changed label rises in with a soft blur.
Reduced motion stops the sweep and swaps labels with a plain fade.

Responsive behavior

Keeps max-width 100%, but the band is tuned for one short line, so avoid wrapping text.
In forced-colors mode the gradient is removed and the text renders in the system color.

Performance

The sweep runs only while active, within 64px of the viewport, and while the page is visible.
It animates a background-clip gradient on one element, with no per-letter spans.

Notes for AI

Use for AI thinking or loading labels. Pair with text-stream for the response itself, and use skeleton or progress for content placeholders.
Flip active to false when work finishes instead of unmounting, so the text settles smoothly.