Shimmering Text

"use client"

import { ShimmeringText } from "@animate-ui/react/primitives/texts/shimmering"

export default function ShimmeringTextDemo({
  wave = false,
  duration = 1,
}: {
  wave?: boolean
  duration?: number
}) {
  return (
    <ShimmeringText
      key={`${wave}-${duration}`}
      className="text-4xl font-semibold"
      text="Shimmering Text"
      wave={wave}
      duration={duration}
    />
  )
}

InstallationCopy Anchor Link

npm install @animate-ui/react motion

pnpm add @animate-ui/react motion

yarn add @animate-ui/react motion

bun add @animate-ui/react motion

UsageCopy Anchor Link

import { ShimmeringText } from '@animate-ui/react/primitives/texts/shimmering';

export function Loading() {
  return <ShimmeringText text="Thinking…" />;
}

AnimationCopy Anchor Link

• Each letter pulses from color to shimmeringColor and back over duration (ease-in-out), one after the other (duration / letters apart), the loop pausing 0.05s × letters between runs. wave also lifts each letter as the glint passes (5px right and up, 1.1× scale, 15° turn).
• Emoji and accented letters stay whole.
• The shimmer pauses off screen and in a hidden tab.
• <AnimateUIProvider tempo> paces the loop.
• Under reduced motion, the text holds still in its color.
• Screen readers read the text once, not letter by letter.

API ReferenceCopy Anchor Link

ShimmeringTextCopy Anchor Link