animated-gradient-text

1import { ChevronRight } from "lucide-react";
2 
3import { cn } from "@/lib/utils";
4import { AnimatedGradientText } from "@/components/magicui/animated-gradient-text";
5 
6export async function AnimatedGradientTextDemo() {
7  return (
8    <div className="z-10 flex min-h-64 items-center justify-center">
9      <AnimatedGradientText>
10        🎉 <hr className="mx-2 h-4 w-px shrink-0 bg-gray-300" />{" "}
11        <span
12          className={cn(
13            `inline animate-gradient bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,
14          )}
15        >
16          Introducing Magic UI
17        </span>
18        <ChevronRight className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
19      </AnimatedGradientText>
20    </div>
21  );
22}