Shimmer Text

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

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

export default function ShimmerTextDemo() {
  return (
    <div className="flex items-center justify-center py-12 px-6">
      <ShimmerText
        variant="default"
        duration={2}
        className="text-4xl md:text-5xl"
      >
        Build beautiful interfaces
      </ShimmerText>
    </div>
  );
}

Build beautiful interfaces

Installation

$ npx shadcn@latest add https://spark-ui-olive.vercel.app/r/shimmer-text.json

Usage

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

export default function ShimmerTextDemo() {
  return (
    <div className="flex items-center justify-center py-12 px-6">
      <ShimmerText
        variant="default"
        duration={2}
        className="text-4xl md:text-5xl"
      >
        Build beautiful interfaces
      </ShimmerText>
    </div>
  );
}

Variants Preview

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

export default function ShimmerTextVariantsDemo() {
  return (
    <div className="flex flex-col gap-6">
      <ShimmerText variant="default" className="text-xl">
        Build beautiful interfaces
      </ShimmerText>
      <ShimmerText variant="green" className="text-xl">
        Build beautiful interfaces
      </ShimmerText>
      <ShimmerText variant="purple" className="text-xl">
        Build beautiful interfaces
      </ShimmerText>
      <ShimmerText variant="red" className="text-xl">
        Build beautiful interfaces
      </ShimmerText>
    </div>
  );
}

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.