Background Gradient Animation

1"use client";
2import { cn } from "@/lib/utils";
3import { useEffect, useRef, useState } from "react";
4 
5export const BackgroundGradientAnimation = ({
6  gradientBackgroundStart = "rgb(108, 0, 162)",
7  gradientBackgroundEnd = "rgb(0, 17, 82)",
8  firstColor = "18, 113, 255",
9  secondColor = "221, 74, 255",
10  thirdColor = "100, 220, 255",
11  fourthColor = "200, 50, 50",
12  fifthColor = "180, 180, 50",
13  pointerColor = "140, 100, 255",
14  size = "80%",
15  blendingValue = "hard-light",
16  children,
17  className,
18  interactive = true,
19  containerClassName,
20}: {
21  gradientBackgroundStart?: string;
22  gradientBackgroundEnd?: string;
23  firstColor?: string;
24  secondColor?: string;
25  thirdColor?: string;
26  fourthColor?: string;
27  fifthColor?: string;
28  pointerColor?: string;
29  size?: string;
30  blendingValue?: string;
31  children?: React.ReactNode;
32  className?: string;
33  interactive?: boolean;
34  containerClassName?: string;
35}) => {
36  const interactiveRef = useRef<HTMLDivElement>(null);
37 
38  const [curX, setCurX] = useState(0);
39  const [curY, setCurY] = useState(0);
40  const [tgX, setTgX] = useState(0);
41  const [tgY, setTgY] = useState(0);
42  useEffect(() => {
43    document.body.style.setProperty(
44      "--gradient-background-start",
45      gradientBackgroundStart
46    );
47    document.body.style.setProperty(
48      "--gradient-background-end",
49      gradientBackgroundEnd
50    );
51    document.body.style.setProperty("--first-color", firstColor);
52    document.body.style.setProperty("--second-color", secondColor);
53    document.body.style.setProperty("--third-color", thirdColor);
54    document.body.style.setProperty("--fourth-color", fourthColor);
55    document.body.style.setProperty("--fifth-color", fifthColor);
56    document.body.style.setProperty("--pointer-color", pointerColor);
57    document.body.style.setProperty("--size", size);
58    document.body.style.setProperty("--blending-value", blendingValue);
59  }, []);
60 
61  useEffect(() => {
62    function move() {
63      if (!interactiveRef.current) {
64        return;
65      }
66      setCurX(curX + (tgX - curX) / 20);
67      setCurY(curY + (tgY - curY) / 20);
68      interactiveRef.current.style.transform = `translate(${Math.round(
69        curX
70      )}px, ${Math.round(curY)}px)`;
71    }
72 
73    move();
74  }, [tgX, tgY]);
75 
76  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
77    if (interactiveRef.current) {
78      const rect = interactiveRef.current.getBoundingClientRect();
79      setTgX(event.clientX - rect.left);
80// … truncated