Text with a band of light that glides across the glyphs on a loop, like a reflection passing over brushed metal.
npx shadcn@latest add https://hyperblur.dev/r/shiny-text.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/shiny-text.tsx.
import { ShinyText } from "@/components/hyperblur/shiny-text"
<ShinyText text="Introducing Nova One" speed={2.5} className="text-5xl font-semibold" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to render. |
| speed | number | 3 | Seconds the highlight takes to cross the text. A short rest follows each pass. |
| color | string | "#8f8f8f" | Base color of the glyphs. |
| shine | string | "#ffffff" | Color of the moving highlight band. |
| pauseOnHover | boolean | false | Freeze the sweep while the pointer is over the text. |
| disabled | boolean | false | Turn the sweep off and show the text in the base color. |
| direction | "right" | "left" | "right" | Direction the highlight travels. |