Shiny Text
A shimmering text effect that adds a premium, polished feel to your headings or call-to-action buttons with a customizable light reflection animation.
Preview
Loading...
Installation
Install the component using the CLI.
$npx shadcn@latest add https://ankurz.me/r/shiny-text.json
Usage
Import the component:
import { ShinyText } from "@/components/shiny-text"Use it in your code:
<ShinyText>Shiny Text</ShinyText>Props
| Property | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | - | The text or content to apply the shine effect to. |
shimmerWidth | number | 100 | The width of the shine effect in pixels. |
speed | number | 5 | The duration of the animation in seconds. |
className | string | "" | Additional CSS classes. |