✨ Introducing Magic UI
Installation
Run the following command:
npx magicui-cli add animated-shiny-textUpdate tailwind.config.js
Add the following animations to your tailwind.config.js file:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
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 |