Update

resources/js/components/magicui/animated-gradient-text.tsx

@@ -0,0 +1,37 @@
+import { cn } from "@/lib/utils";
+import { ComponentPropsWithoutRef } from "react";
+
+export interface AnimatedGradientTextProps
+  extends ComponentPropsWithoutRef<"div"> {
+  speed?: number;
+  colorFrom?: string;
+  colorTo?: string;
+}
+
+export function AnimatedGradientText({
+  children,
+  className,
+  speed = 1,
+  colorFrom = "#ffaa40",
+  colorTo = "#9c40ff",
+  ...props
+}: AnimatedGradientTextProps) {
+  return (
+    <span
+      style={
+        {
+          "--bg-size": `${speed * 300}%`,
+          "--color-from": colorFrom,
+          "--color-to": colorTo,
+        } as React.CSSProperties
+      }
+      className={cn(
+        `inline animate-gradient bg-gradient-to-r from-[var(--color-from)] via-[var(--color-to)] to-[var(--color-from)] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+}