Shiny Text
newMuted text with a highlight sweeping across it.
NewAnimations are now in the registry
Generating release notes…
Installation
npx shadcn@latest add @blank/shiny-textUsage
import { ShinyText } from "@/components/ui/shiny-text"<ShinyText>Generating release notes…</ShinyText>The text is muted-foreground with a band of foreground clipped to the
glyphs, so it follows the theme with no color props. Use it for one thing on a
screen: an announcement pill or a working state. Keep icons outside it; the
text fill is transparent, and so would they be.
The sweep pauses off screen. Under reduced motion the text stays muted.
Props
| Prop | Type | Default |
|---|---|---|
duration | number | 2.5 |
repeatDelay | number | 1 |
spread | number | 2 |