Moving Gradient Text

1"use client"
2 
3import * as React from "react"
4import { motion, useMotionValue, useTransform, animate } from "motion/react"
5import { cn } from "@/registry/wise-ui/lib/utils"
6 
7interface MovingGradientTextProps {
8  gradientFrom?: string
9  gradientTo?: string
10  speed?: number
11  className?: string
12  style?: React.CSSProperties
13  children: React.ReactNode
14}
15 
16const MovingGradientText = React.forwardRef<
17  HTMLSpanElement,
18  MovingGradientTextProps
19>(
20  (
21    {
22      gradientFrom = "#00a896",
23      gradientTo = "#c084fc",
24      speed = 1,
25      children,
26      className,
27      style,
28    },
29    ref
30  ) => {
31    const rotation = useMotionValue(0)
32    const controlRef = React.useRef<ReturnType<typeof animate> | null>(null)
33 
34    React.useEffect(() => {
35      controlRef.current = animate(
36        rotation,
37        rotation.get() + 360 * 10000,
38        { duration: (3 / speed) * 10000, ease: "linear" }
39      )
40      return () => {
41        controlRef.current?.stop()
42      }
43    }, [speed, rotation])
44 
45    const backgroundPosition = useTransform(
46      rotation,
47      (v) => `${-(v * 100) / 360}% 0%`
48    )
49 
50    return (
51      <motion.span
52        ref={ref}
53        className={cn("inline-block", className)}
54        style={{
55          backgroundImage: `linear-gradient(90deg, ${gradientFrom}, ${gradientTo}, ${gradientFrom})`,
56          backgroundSize: "200% 100%",
57          backgroundRepeat: "repeat",
58          backgroundPosition,
59          WebkitBackgroundClip: "text",
60          WebkitTextFillColor: "transparent",
61          backgroundClip: "text",
62          ...style,
63        }}
64      >
65        {children}
66      </motion.span>
67    )
68  }
69)
70MovingGradientText.displayName = "MovingGradientText"
71 
72export { MovingGradientText }
73export type { MovingGradientTextProps }