Text Shimmer · paneui

Checking flight prices…

Thinking it through

Installation

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

Usage

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

<TextShimmer>Checking flight prices…</TextShimmer>

Examples

Elements

Speed

Spread

Colors

Motion

The sweep is a CSS keyframe animation shipped with the component. The band enters and leaves fully clear of the text, so the loop has no visible reset. Under prefers-reduced-motion: reduce it stops with the band resting mid-text.

Text Scramble, Text Cascade, Text Reveal.

API Reference

TextShimmer

Text with a looping highlight swept across it via a clipped background gradient. Also accepts every prop of HTML element (span by default).

as= "span": "span" | "p" | "div" | "h1" | "h2" | "h3" | "h4"; Element to render.
duration= 2.2: number; Seconds for one sweep.
spread= 14: number; Width of the bright band; 14 spans about half the text.
style: CSSProperties; Merged over the generated gradient and animation; set --shimmer-base / --shimmer-highlight here.

Prop	Type	Default	Description
as	"span" \| "p" \| "div" \| "h1" \| "h2" \| "h3" \| "h4"	"span"	Element to render.
duration	number	2.2	Seconds for one sweep.
spread	number	14	Width of the bright band; 14 spans about half the text.
style	CSSProperties	—	Merged over the generated gradient and animation; set `--shimmer-base` / `--shimmer-highlight` here.

data-slot: "text-shimmer"

Data attribute	Description
data-slot	"text-shimmer"