Lustre Text
A lustrous text component with animated gradient shine.
Shine your UI with ScrollX UI!
Installation
npx shadcn@latest add https://scrollx-ui.vercel.app/registry/lustretext.json Add Utilities
place it in your global.css
@layer utilities {
.lustre-text {
@apply inline-block font-extrabold text-transparent bg-clip-text bg-[length:200%_auto] bg-[position:0%_center];
}
.lustre-light {
background-image: linear-gradient(
90deg,
rgba(0, 0, 0, 0.05) 0%,
rgba(0, 0, 0, 0.3) 30%,
rgba(0, 0, 0, 0.7) 45%,
#ffffff 50%,
rgba(0, 0, 0, 0.7) 55%,
rgba(0, 0, 0, 0.3) 70%,
rgba(0, 0, 0, 0.05) 100%
);
}
.lustre-dark {
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.15) 30%,
rgba(255, 255, 255, 0.4) 45%,
#ffffff 50%,
rgba(255, 255, 255, 0.4) 55%,
rgba(255, 255, 255, 0.15) 70%,
rgba(255, 255, 255, 0.05) 100%
);
}
}tailwind.config.ts
module.exports = {
theme: {
extend: {
keyframes: {
shine: {
'0%': { 'background-position': '100%' },
'100%': { 'background-position': '-100%' },
},
},
animation: {
shine: 'shine 5s linear infinite',
},
},
},
plugins: [],
};Usage
import LustreText from "@/components/ui/lustretext";<LustreText text="Shine your UI with ScrollX UI!" />API Reference
LustreText
A lustrous or shiny text component that gives a glowing, reflective appearance using animated gradients.