Moving Gradient Button

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 MovingGradientButtonProps
8  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
9  animateBorder?: boolean
10  animateText?: boolean
11  gradientFrom?: string
12  gradientTo?: string
13  startIcon?: React.ReactNode
14  endIcon?: React.ReactNode
15  children: React.ReactNode
16}
17 
18const MovingGradientButton = React.forwardRef<
19  HTMLButtonElement,
20  MovingGradientButtonProps
21>(
22  (
23    {
24      animateBorder = true,
25      animateText = true,
26      gradientFrom = "#00a896",
27      gradientTo = "#c084fc",
28      startIcon,
29      endIcon,
30      children,
31      disabled,
32      className,
33      ...props
34    },
35    ref
36  ) => {
37    const [isHovered, setIsHovered] = React.useState(false)
38    const rotation = useMotionValue(0)
39    const controlRef = React.useRef<ReturnType<typeof animate> | null>(null)
40 
41    React.useEffect(() => {
42      if (isHovered && (animateBorder || animateText) && !disabled) {
43        controlRef.current = animate(
44          rotation,
45          rotation.get() + 360 * 10000,
46          { duration: 3 * 10000, ease: "linear" }
47        )
48      } else {
49        controlRef.current?.stop()
50      }
51      return () => {
52        controlRef.current?.stop()
53      }
54    }, [isHovered, animateBorder, animateText, disabled, rotation])
55 
56    // Shift –100% per 360° - with backgroundRepeat:"repeat" this scrolls
57    // the from→to→from gradient infinitely without any visible seam
58    const backgroundPosition = useTransform(
59      rotation,
60      (v) => `${-(v * 100) / 360}% 0%`
61    )
62 
63    const showBorderAnimation = isHovered && animateBorder && !disabled
64    const showTextAnimation = isHovered && animateText && !disabled
65 
66    return (
67      <div
68        className={cn(
69          "group relative inline-flex rounded-md",
70          disabled && "pointer-events-none opacity-50"
71        )}
72        onMouseEnter={() => setIsHovered(true)}
73        onMouseLeave={() => setIsHovered(false)}
74      >
75        {/* Static border - visible at rest */}
76        <div
77          className="pointer-events-none absolute inset-0 rounded-md border border-border transition-opacity duration-300"
78          style={{ opacity: showBorderAnimation ? 0 : 1 }}
79        />
80 
81        {/* Spinning conic gradient - visible on hover */}
82        <div
83// … truncated