Back
Shiny Text
Satu Visual ComponentNew
Text with a shimmer that sweeps across.
✨ Shiny Text
Installation
Add it with the CLI:
Terminal
$
Or open the Code tab above and copy it in manually — it relies on the standard cn() helper from @/lib/utils.
Usage
A subtle shimmer, nice for 'AI'/'New' labels. Control the sweep speed with `speed`.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Text content. |
| className | string | — | Extra classes. |
| speed | number | 5 | Shimmer duration in seconds. |
Requirements
No external npm dependencies. ✨
Add this to your Tailwind config:
tailwind.config.ts
// Uses the shimmer keyframe. Add it if missing:
animation: { shimmer: "shimmer 8s infinite" },
keyframes: {
shimmer: {
"0%, 90%, 100%": { "background-position": "calc(-100% - var(--shimmer-width)) 0" },
"30%, 60%": { "background-position": "calc(100% + var(--shimmer-width)) 0" },
},
},