Animated Shiny Text

Shimmering text effect for emphasis.

• 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.