A fluid, luminous text component with continuous dynamic light beam reflections and customizable gradient sweeps.

✨ Introducing Shimmer Text

Crafting fluid, luminous digital experiences.

Subtle light reflections sliding over typography to captivate attention and emphasize key narratives.

Installation

$ npx shadcn@latest add https://akshitr.com/r/shimmer-text.json

Usage

import ShimmerText from "@/components/shimmer-text";
 
export default function Example() {
  return (
    <ShimmerText duration={2.5} className="text-4xl font-bold">
      Luminous Shimmer Effect
    </ShimmerText>
  );
}

Component API

ShimmerText

Prop	Type	Default	Description
`children`	`string`	—	The text string to shimmer.
`as?`	`"span" \| "p" \| "div" \| "h1" \| "h2" \| "h3" \| ...`	`"span"`	The HTML element tag to render as.
`duration?`	`number`	`2.5`	Shimmer cycle duration in seconds.
`shimmerColor?`	`string`	`var(--color-foreground)`	Custom highlight reflection color.
`band?`	`string`	`"400%"`	Width percentage of the gradient band.
`spread?`	`number`	`15`	Width spread percentage of the beam reflection.
`easing?`	`string`	`"linear"`	CSS cubic-bezier or easing timing curve for the sweep animation.
`className?`	`string`	—	Additional classes applied to the base element.

Use Cases

AI Prompt & Generation States: Signal that an AI model is reasoning, streaming tokens, or processing input.
Hero Title Accents & Badges: Draw eyes toward a headline word or release badge (e.g., "Introducing v2.0") without aggressive blinking.
Loading Placeholders: Deliver an aesthetic, luminous shimmering skeleton text state while fetching data.
Call-to-Action Buttons & Links: Highlight high-priority action banners or premium tier labels with continuous subtle light sheen.

Shimmer Text