Skip to main content
  • Location: sabo/src/components/ui/animated-shiny-text.tsx

​
When to use

  • Add a tasteful shimmer to headline or key callout text.
  • Use sparingly; reserve for marketing moments or hero lines.

​
Usage

sabo/src/components/ui/animated-shiny-text.tsx
import { AnimatedShinyText } from "@/components/ui/animated-shiny-text";

export function Example() {
  return (
    <AnimatedShinyText shimmerWidth={120} className="text-2xl font-bold">
      Shiny text draws attention
    </AnimatedShinyText>
  );
}

​
Key props

​
children
ReactNode
The text content to apply the shimmer effect to.
​
shimmerWidth
number
default:"100"
Width of the shimmer effect in pixels. Controls how wide the animated highlight appears.
​
className
string
Additional CSS classes to apply to the span element.

​
Styling tip

  • Use bold, larger text and constrain the width for best legibility.
  • Ensure sufficient base text contrast before adding the shine.