Animated Shiny Text

• 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

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

​

Styling tip

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