Shimmer Text

A loading-state text treatment that animates a light sweep through a background-clipped gradient. Useful for streaming AI responses.

textshimmerloadingstreaming

Generating your component…Reading the registry and resolving dependencies

Usage

Drop the file into your project and import it. There is no package to install.

usage.tsx

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

export function Example() {
  return <ShimmerText />;
}

Every component here relies only on Tailwind and the cn helper from shadcn/ui.

terminal

npm i clsx tailwind-merge

Thinking Orbs

Three staggered dots for agent and AI chat loading states. Lightweight CSS keyframes with a reduced-motion opt-out.

Typing Dots

A compact typing indicator pill — the pattern every chat UI needs, without pulling in a full messaging library.