Text Shimmer

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

textshimmerheadlineanimationtypographygradient

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.