A component to animate the text using gradient
tailwind.config.js
theme: { extend: { keyframes: { "bg-position": { "0%": { backgroundPosition: "0% 50%" }, "100%": { backgroundPosition: "100% 50%" }, } } }, },
It will create a new file called animated-gradient-text.tsx inside the components/animata/text directory.
animated-gradient-text.tsx
components/animata/text
mkdir -p components/animata/text && touch components/animata/text/animated-gradient-text.tsx
Open the newly created file and paste the following code:
import { cn } from "@/lib/utils"; export default function AnimatedGradientText({ className, children, }: React.HTMLAttributes<HTMLDivElement>) { return ( <div className={cn( "bg-size animate-bg-position bg-gradient-to-r from-yellow-500 from-30% via-yellow-700 via-50% to-pink-500 to-80% bg-[length:200%_auto] bg-clip-text text-transparent", className, )} > {children} </div> ); }
Built by hari