Shiny Text
A CSS-animated text component that sweeps a bright highlight across characters in a continuous loop.
ShinyText applies a travelling light sweep over text using a background-clip: text gradient animation. The effect is purely CSS — no JavaScript runtime — so it is lightweight and composable. Control the sweep speed with the speed prop, or pause the animation entirely with disabled.
Installation
npx shadcn@latest add @adv/shiny-textUsage
import ShinyText from '@/components/ShinyText';
<ShinyText text="Shiny Effect" speed={5} />
{/* Static / no animation */}
<ShinyText text="No shine" disabled />Example
Shiny Effect
Slow Shine
Fast Shine
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | The text content to display. |
disabled | boolean | false | When true, the shine animation is paused and the text renders statically. |
speed | number | 5 | Animation duration in seconds for one full sweep cycle. Lower values are faster. |
className | string | "" | Additional classes merged onto the root <div>. |