Animated Gradient Text
Discover the allure of animated gradient text, a dynamic UI component that enhances user engagement with smooth color transitions.
Thinking...
import AnimatedGradientText from "@/components/core/animated-gradient-text";
export default function AnimatedGradientTextExample() {
return <AnimatedGradientText text="Thinking..." className="font-semibold lg:text-2xl" />;
}
Installation
Install the following dependencies:
npm install clsx tailwind-mergeCopy and paste the following code into your project:
import { cn } from "@/lib/utils";
export type AnimatedGradientTextProps = {
text: string;
className?: string;
};
export default function AnimatedGradientText({ text, className }: AnimatedGradientTextProps) {
return (
<span
className={cn(
"animate-text-gradient inline-flex bg-linear-to-r from-[#ACACAC] via-[#363636] to-[#ACACAC] bg-[200%_auto] bg-clip-text text-transparent",
className
)}>
{text}
</span>
);
}
Update the import paths to match your project setup.
Usage
import AnimatedGradientText from "@/components/core/animated-gradient-text";
export default function AnimatedGradientTextExample() {
return <AnimatedGradientText text="Thinking..." className="font-semibold lg:text-2xl" />;
}
Props
| Prop | Type | Default |
|---|---|---|
text | string | - |
className? | string | - |