Docs
Animated Shiny Text
Animated Shiny Text
A light glare effect which pans across text making it appear as if it is shimmering.
✨ Introducing Nyxb UI
Installation
npx nyxbui@latest add animated-shiny-text
Add the following animations to your tailwind.config.ts file:
// tailwind.config.ts
module.exports = {
theme: {
extend: {
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",
},
},
},
},
},
};
Props
Prop | Type | Description | Default |
---|---|---|---|
children | The text to be shimmered. | ||
className | string | The class name to be applied to the shimmer. | |
shimmerWidth | number | The width of the shimmer in pixels. | 100 |