Text shimmer wave

TextShimmerWave animates each character through a small shimmer wave. It is the most expressive text loader, best reserved for assistant-style thinking states, short generated labels, and places where character-level motion supports the product language.

import { TextShimmerWave } from "@/components/loading-ui/text-shimmer-wave";

export function TextShimmerWaveDemo() {

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @loading-ui/text-shimmer-wave
Copy

Usage

Copyimport { TextShimmerWave } from "@/components/loading-ui/text-shimmer-wave";

Copy<TextShimmerWave>Thinking</TextShimmerWave>

Customization

Because every character moves independently, TextShimmerWave works best with short phrases. For longer labels, prefer TextShimmer.

Color

By default, the resting and active colors are derived from currentColor, so the wave works inside filled buttons and badges. Use baseColor and shimmerColor for explicit swatches.

import { TextShimmerWave } from "@/components/loading-ui/text-shimmer-wave";

export function TextShimmerWaveColor() {

Duration

Shorter durations feel like active thinking; slower durations feel more ambient.

import { TextShimmerWave } from "@/components/loading-ui/text-shimmer-wave";

export function TextShimmerWaveDuration() {

Motion

Tune depth, vertical lift, and rotation when you need the wave to feel subtler or more expressive.

import { TextShimmerWave } from "@/components/loading-ui/text-shimmer-wave";

export function TextShimmerWaveMotion() {

Examples

These examples keep the wave scoped to short assistant and drafting states so the moving characters stay readable.

Button

Buttons can use wave text as the full action label when the task is generating or composing.

import { Button } from "@/components/ui/button";
import { TextShimmerWave } from "@/components/loading-ui/text-shimmer-wave";

Badge

Badges are a good fit for compact AI or composing states.

import { Badge } from "@/components/ui/badge";
import { TextShimmerWave } from "@/components/loading-ui/text-shimmer-wave";

Alert

Use an alert when the wave needs one short sentence of explanation.

import {
  Alert,
  AlertDescription,

Tabs

Tabs can separate a live reply from sources or supporting material that appears later.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { TextShimmerWave } from "@/components/loading-ui/text-shimmer-wave";