'use client'; import classNames from 'classnames'; import { useTheme } from 'next-themes'; import { useEffect, useRef, useState } from 'react'; export const BackgroundGradientAnimation = ({ firstColor = '242, 0, 137', secondColor = '209, 0, 209', thirdColor = '161, 0, 242', fourthColor = '45, 0, 247', fifthColor = '242, 0, 137', pointerColor = '209, 0, 209', size = '50%', blendingValue = 'hard-light', children, className, interactive = true, containerClassName, }: { gradientBackgroundStart?: string; gradientBackgroundEnd?: string; firstColor?: string; secondColor?: string; thirdColor?: string; fourthColor?: string; fifthColor?: string; pointerColor?: string; size?: string; blendingValue?: string; children?: React.ReactNode; className?: string; interactive?: boolean; containerClassName?: string; }) => { const interactiveRef = useRef(null); // Use refs to store animation values instead of state const curXRef = useRef(0); const curYRef = useRef(0); const tgXRef = useRef(0); const tgYRef = useRef(0); const animationFrameRef = useRef(null); const [isSafari, setIsSafari] = useState(false); const { theme } = useTheme(); // Set up gradient background colors based on theme const gradientBackgroundStart = theme === 'dark' ? '#000000' : '#ffffff'; const gradientBackgroundEnd = theme === 'dark' ? '#000000' : '#ffffff'; // Set up CSS variables useEffect(() => { document.body.style.setProperty( '--gradient-background-start', gradientBackgroundStart, ); document.body.style.setProperty( '--gradient-background-end', gradientBackgroundEnd, ); document.body.style.setProperty('--first-color', firstColor); document.body.style.setProperty('--second-color', secondColor); document.body.style.setProperty('--third-color', thirdColor); document.body.style.setProperty('--fourth-color', fourthColor); document.body.style.setProperty('--fifth-color', fifthColor); document.body.style.setProperty('--pointer-color', pointerColor); document.body.style.setProperty('--size', size); document.body.style.setProperty('--blending-value', blendingValue); }, [ gradientBackgroundStart, gradientBackgroundEnd, firstColor, secondColor, thirdColor, fourthColor, fifthColor, pointerColor, size, blendingValue, ]); // Set up Safari detection useEffect(() => { setIsSafari(/^((?!chrome|android).)*safari/i.test(navigator.userAgent)); }, []); // Set up animation loop useEffect(() => { if (!interactive) return; function animateMovement() { if (!interactiveRef.current) { animationFrameRef.current = requestAnimationFrame(animateMovement); return; } // Calculate new position with easing curXRef.current = curXRef.current + (tgXRef.current - curXRef.current) / 20; curYRef.current = curYRef.current + (tgYRef.current - curYRef.current) / 20; // Apply transform directly to DOM element interactiveRef.current.style.transform = `translate(${Math.round(curXRef.current)}px, ${Math.round(curYRef.current)}px)`; // Continue animation loop animationFrameRef.current = requestAnimationFrame(animateMovement); } // Start animation loop animationFrameRef.current = requestAnimationFrame(animateMovement); // Clean up animation loop on unmount return () => { if (animationFrameRef.current !== null) { cancelAnimationFrame(animationFrameRef.current); } }; }, [interactive]); // Handle mouse movement const handleMouseMove = (event: React.MouseEvent) => { if (!interactiveRef.current) return; const rect = interactiveRef.current.getBoundingClientRect(); // Update target position directly in ref (no state update) tgXRef.current = event.clientX - rect.left; tgYRef.current = event.clientY - rect.top; }; return (

{children}

{interactive && (

)}

); };