bg-animated-gradient

1"use client"
2 
3import React, { useEffect } from "react"
4import { motion, useAnimation } from "motion/react"
5 
6interface GradientStop {
7  color: string
8  position: number
9}
10 
11interface GradientType {
12  stops: GradientStop[]
13  centerX: number
14  centerY: number
15}
16 
17interface GradientAnimationProps {
18  gradients: GradientType[]
19  animationDuration: number
20  className?: string
21}
22 
23export const GradientAnimation: React.FC<GradientAnimationProps> = ({
24  gradients,
25  animationDuration,
26  className = "",
27}) => {
28  const controls = useAnimation()
29 
30  useEffect(() => {
31    controls.start({
32      background: gradients.map(
33        (g) =>
34          `radial-gradient(circle at ${g.centerX}% ${g.centerY}%, ${g.stops
35            .map((s) => `${s.color} ${s.position}%`)
36            .join(", ")})`
37      ),
38      transition: {
39        duration: animationDuration,
40        repeat: Infinity,
41        repeatType: "reverse",
42        ease: "linear",
43      },
44    })
45  }, [controls, gradients, animationDuration])
46 
47  return (
48    <motion.div
49      className={`absolute inset-0 h-full w-full ${className}`}
50      animate={controls}
51    />
52  )
53}
54 
55export default React.memo(GradientAnimation)