> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Animated Shiny Text

> Shimmering text effect for emphasis.

* **Location**: `sabo/src/components/ui/animated-shiny-text.tsx`

<Frame>
  <div className="rounded-xl" style={{ overflow: "hidden", border: "1px solid #e5e7eb" }}>
    <iframe
      className="w-full"
      style={{ height: "140px", pointerEvents: "none" }}
      title="Animated Shiny Text"
      loading="lazy"
      scrolling="no"
      srcDoc={`<!doctype html><html><head><meta charset='utf-8'/><meta name='viewport' content='width=device-width,initial-scale=1'/><style>
*{box-sizing:border-box}body{margin:0;background:#ffffff;font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue'}
.wrap{height:120px;display:flex;align-items:center;justify-content:center;text-align:center}
.shine{display:inline-block;font-size:28px;font-weight:800;letter-spacing:.5px;position:relative;background:linear-gradient(90deg,#111827 30%,#9ca3af 45%,#111827 60%);-webkit-background-clip:text;background-clip:text;color:transparent;animation:move 1.8s linear infinite}
@keyframes move{from{background-position:-120px 0}to{background-position:120px 0}}
</style></head><body>
<div class='wrap'><div class='shine'>Shiny text draws attention</div></div>
</body></html>`}
    />
  </div>
</Frame>

## When to use

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

## Usage

```tsx sabo/src/components/ui/animated-shiny-text.tsx theme={null}
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

<ParamField path="children" type="ReactNode">
  The text content to apply the shimmer effect to.
</ParamField>

<ParamField path="shimmerWidth" type="number" default="100">
  Width of the shimmer effect in pixels. Controls how wide the animated highlight appears.
</ParamField>

<ParamField path="className" type="string">
  Additional CSS classes to apply to the span element.
</ParamField>

## Styling tip

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