Gradient Shadow

1"use client";
2 
3import { ReactNode, useEffect, useRef } from "react";
4 
5import { gsap } from "gsap";
6 
7type GradientShadowProps = {
8    colors?: string[];
9    children: ReactNode;
10};
11 
12export const GradientShadow = ({
13    colors = ["#3b82f6", "#8b5cf6", "#ec4899", "#f97316"],
14    children,
15}: GradientShadowProps) => {
16    const shadowRef = useRef<HTMLDivElement>(null);
17 
18    useEffect(() => {
19        if (!shadowRef.current) return;
20        gsap.to(shadowRef.current, {
21            backgroundPosition: "200% 0%",
22            duration: 6,
23            ease: "linear",
24            repeat: -1,
25        });
26    }, []);
27 
28    const gradient = `linear-gradient(90deg, ${colors.join(", ")}, ${colors[0]})`;
29 
30    return (
31        <div className="group relative inline-block">
32            <div
33                ref={shadowRef}
34                className="pointer-events-none absolute -inset-1 -z-10 scale-0 rounded-xl opacity-0 blur-sm transition-all duration-300 group-hover:scale-100 group-hover:opacity-100"
35                style={{
36                    backgroundImage: gradient,
37                    backgroundSize: "300% 300%",
38                    backgroundPosition: "0% 0%",
39                    willChange: "background-position",
40                }}
41            />
42            <div className="relative z-10">{children}</div>
43        </div>
44    );
45};