The ShimmerText component creates a smooth, continuous shimmer effect that flows within the text characters. The shimmer loops infinitely, creating an elegant effect perfect for headings and taglines.
Preview
Build beautiful interfaces
Usage
Installation
$ pnpm dlx shadcn add https://klarden.vercel.app/r/shimmer-text.json
Basic Example
import { ShimmerText } from "@/components/shimmer-text";
export default function App() {
return <ShimmerText>Shimmer Effect</ShimmerText>;
}
Variants Preview
Build beautiful interfacesBuild beautiful interfacesBuild beautiful interfacesBuild beautiful interfaces
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | The text content to display with shimmer effect. |
className | string | — | Additional CSS classes for styling (text size, weight, etc.). |
shimmerColor | string | — | Primary shimmer color (overrides variant). Hex format. |
shimmerColor2 | string | — | Secondary shimmer color for gradient effect. Hex format. |
direction | "ltr" | "rtl" | "ltr" | Direction of shimmer animation (left-to-right or right-to-left). |
duration | number | 2 | Duration of one complete shimmer cycle in seconds. |
delay | number | 0 | Delay before the animation starts in seconds. |
shimmerWidth | number | 0.5 | Width of the shimmer band (0.1 - 1). Higher values create wider shimmer. |