Overview
The Text Shimmer component creates a smooth, continuous shimmer effect that glides across text using an animated gradient. The effect uses CSS gradients and motion animations to create a polished, eye-catching highlight that loops indefinitely.
Use cases:
- Highlighting premium features or calls-to-action
- Drawing attention to special offers or announcements
- Adding polish to headings and hero sections
- Creating visual interest in static text content
Installation
npx shadcn add https://forgeui.in/r/text-shimmer.json
Usage
import TextShimmer from "@/components/forgeui/text-shimmer";
export default function Example() {
return (
<TextShimmer className="text-4xl font-bold">
Premium features unlocked
</TextShimmer>
);
}
Imports
import TextShimmer from "@/components/forgeui/text-shimmer";
Props
The text content to apply the shimmer effect to. Must be a string value.
as
React.ElementType
default:"\"p\""
The HTML element to render as. Can be any valid HTML tag like "h1", "span", "div", etc.
Additional CSS classes to apply to the component. Use this for typography, sizing, and other styles.
Duration in seconds for one complete shimmer animation cycle. Lower values create faster shimmer movement.
Spread multiplier for the shimmer gradient width. The actual spread is calculated as children.length * spread pixels. Higher values create a wider shimmer beam.
Delay in seconds before the animation starts. Useful for sequencing multiple shimmer effects.
Delay in seconds between each animation loop. Creates pauses between shimmer passes.
Examples
Basic shimmer
<TextShimmer>
Shimmering text effect
</TextShimmer>
Hero heading
<TextShimmer
as="h1"
className="text-6xl font-black tracking-tight"
>
Build the future
</TextShimmer>
Fast shimmer
<TextShimmer
duration={1}
className="text-2xl font-semibold"
>
Lightning fast performance
</TextShimmer>
Slow elegant shimmer
<TextShimmer
duration={4}
spread={3}
className="text-5xl font-light"
>
Elegance in motion
</TextShimmer>
With pause between loops
<TextShimmer
duration={2}
repeatDelay={1}
className="text-3xl font-bold"
>
Premium feature unlocked
</TextShimmer>
Delayed start
<div className="space-y-4">
<TextShimmer delay={0}>First</TextShimmer>
<TextShimmer delay={0.5}>Second</TextShimmer>
<TextShimmer delay={1}>Third</TextShimmer>
</div>
Call to action
<button className="rounded-lg bg-black px-8 py-4 dark:bg-white">
<TextShimmer
as="span"
className="text-lg font-semibold text-white dark:text-black"
duration={1.5}
>
Get Started Today
</TextShimmer>
</button>
Badge with shimmer
<div className="inline-flex items-center gap-2 rounded-full border px-4 py-1.5">
<span className="h-2 w-2 rounded-full bg-green-500" />
<TextShimmer
as="span"
className="text-sm font-medium"
duration={3}
>
New release available
</TextShimmer>
</div>
Customization
Animation timing
Control the speed and rhythm of the shimmer:
// Quick shimmer (1 second)
<TextShimmer duration={1} />
// Standard shimmer (2 seconds, default)
<TextShimmer duration={2} />
// Slow shimmer (4 seconds)
<TextShimmer duration={4} />
// With pauses between loops
<TextShimmer duration={2} repeatDelay={1.5} />
Shimmer width
The spread prop controls the width of the shimmer gradient:
// Narrow beam
<TextShimmer spread={1} />
// Standard beam (default)
<TextShimmer spread={2} />
// Wide beam
<TextShimmer spread={4} />
The actual gradient spread is calculated as children.length * spread pixels, so longer text will have proportionally wider shimmer beams.
Color customization
The shimmer uses CSS custom properties that adapt to light/dark mode:
- Light mode: Black shimmer (
#000) over gray base (#a1a1aa)
- Dark mode: White shimmer (
#ffffff) over gray base (#71717a)
To customize colors, override the CSS variables:
.custom-shimmer {
--base-color: #3b82f6; /* Blue base */
--base-gradient-color: #60a5fa; /* Lighter blue shimmer */
}
<TextShimmer className="custom-shimmer">
Custom colored shimmer
</TextShimmer>
Semantic HTML
Use the as prop to render the appropriate semantic element:
<TextShimmer as="h1">Page Title</TextShimmer>
<TextShimmer as="h2">Section Heading</TextShimmer>
<TextShimmer as="span">Inline text</TextShimmer>
<TextShimmer as="div">Block element</TextShimmer>
The component is memoized with React.memo for optimal performance, preventing unnecessary re-renders when parent components update.