Text Shimmer

A CSS shimmer sweep for headlines, one single element and entirely GPU-friendly.

textshimmerheadlineanimationtypographygradient

Overview

Text Shimmer is a React and Tailwind CSS shimmer text effect that sweeps a band of light across a headline, in Next.js or any React app, with no dependencies. The shine is a gradient clipped to the glyphs with background-clip text, so there is one element, no per letter spans, and only background position animates. It pauses off screen and in background tabs, can pause on hover or ping pong, and reduced motion shows a static highlight. The as prop keeps it a real h1 or h2. Set colors with baseColor and shimmerColor, since text color classes have no effect.

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add text-shimmer

Usage

Import TextShimmer from @/components/wensity/text-shimmer and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1import { TextShimmer } from "@/components/wensity/text-shimmer";
 2
 3export default function Example() {
 4  return (
 5    <TextShimmer
 6      as="h1"
 7      text="Wensity UI"
 8      duration={2}
 9      direction="left"
10      className="font-display text-xl font-normal"
11    />
12  );
13}

Props

Prop	Type	Default	Description
`text`	string	-	The string to render.
`as`	keyof React.JSX.IntrinsicElements	"span"	Tag rendered as the outer element.
`duration`	number	2	Sweep duration in seconds. Lower = faster.
`delay`	number	0	Hold at the end of each sweep before restarting, in seconds.
`direction`	"left" \| "right"	"left"	Sweep travel direction.
`yoyo`	boolean	false	Ping-pong the sweep instead of looping in one direction.
`pauseOnHover`	boolean	false	Pause the loop while the pointer is over the text.
`baseColor`	string	theme	Resting fill color. Omit for theme auto (zinc in light, softer zinc in dark).
`shimmerColor`	string	theme	Bright highlight color. Omit for theme auto (near-black in light, white in dark).
`spread`	number	22	Band half-width scale (8–60). Converted to px from text length so the shine stays proportional.
`angle`	number	90	Gradient angle in degrees.
`paused`	boolean	-	Force the infinite loop paused. When omitted, it runs forever while visible and auto-pauses off-screen or when the tab is hidden.

Featured in React hero section components and React AI chat UI components.