Shimmer Text

Pro

Animated gradient shimmer text effect using background-clip and CSS keyframes.

Text · primitive · basic · css · zero dependencies

shimmer-text Text·preview
Ember sweepBuilt to be pasted
Slow3s
Default2s
Fast1s
Shimmer Text

Animated gradient shimmer text effect using background-clip and CSS keyframes.

Pro component

Join the waitlist to unlock all 14 components at launch.

Join the Pro waitlistor join free for 5 components at launch
Use it for
  • hero headline accent
  • pricing page limited-time highlight
  • product launch announcement text
  • SaaS landing page eyebrow heading
Props
Prop Type Default Description
children React.ReactNode Text content to apply the shimmer effect to.
className string Additional classes for the wrapper — font size, weight, layout.
speed "slow" | "default" | "fast" "default" Animation speed — maps to 3s, 2s, or 1s.
colors string[] ["#a78bfa", "#6366f1", "#8b5cf6", "#a78bfa"] Gradient color stops — at least 2 colors; repeat the first color last for a seamless loop.
background string "transparent" Background color behind the shimmer, useful for contrast.
FAQ
Does Shimmer Text work with Next.js App Router?

Yes. It's a "use client" React component and works unchanged in the App Router.

Are there any dependencies to install?

None. It's a pure CSS background-clip: text animation — no external packages required.

Is it responsive?

Yes. Font size and layout come from your own Tailwind classes via className, and the gradient scales with the text box at any size.

Does it respect prefers-reduced-motion?

Yes, built in. A @media (prefers-reduced-motion: reduce) rule disables the shimmer animation for users with that OS preference.