Shiny Text
Free
Text with a soft band of light that sweeps across it on a loop.
Season two
Now in early access
Customize
2.4s
#f4ede3
#857c71
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/shiny-text.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/shiny-text.tsx.
Usage
import { ShinyText } from "@/components/ui/shiny-text";
<ShinyText text="Now in early access" speed={2.4} className="text-sm font-semibold" />Props
5 properties| Property | Type | Default | Description |
|---|---|---|---|
| text | string | — | The text to shine. |
| speed | number | 2.4 | Seconds for one sweep of light across the text. |
| shineColor | string | "#f4ede3" | Color of the moving band of light. |
| baseColor | string | "#857c71" | Color of the text outside the band. |
| className | string | — | Extra classes for the text. |
Dependencies: motion