4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 52:T1950,"use client"; import { cn } from "@/lib/utils"; import { useEffect, useRef, useState } from "react"; export const BackgroundGradientAnimation = ({ gradientBackgroundStart = "rgb(108, 0, 162)", gradientBackgroundEnd = "rgb(0, 17, 82)", firstColor = "18, 113, 255", secondColor = "221, 74, 255", thirdColor = "100, 220, 255", fourthColor = "200, 50, 50", fifthColor = "180, 180, 50", pointerColor = "140, 100, 255", size = "80%", 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); const [curX, setCurX] = useState(0); const [curY, setCurY] = useState(0); const [tgX, setTgX] = useState(0); const [tgY, setTgY] = useState(0); 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); }, []); useEffect(() => { function move() { if (!interactiveRef.current) { return; } setCurX(curX + (tgX - curX) / 20); setCurY(curY + (tgY - curY) / 20); interactiveRef.current.style.transform = `translate(${Math.round( curX )}px, ${Math.round(curY)}px)`; } move(); }, [tgX, tgY]); const handleMouseMove = (event: React.MouseEvent) => { if (interactiveRef.current) { const rect = interactiveRef.current.getBoundingClientRect(); setTgX(event.clientX - rect.left); setTgY(event.clientY - rect.top); } }; const [isSafari, setIsSafari] = useState(false); useEffect(() => { setIsSafari(/^((?!chrome|android).)*safari/i.test(navigator.userAgent)); }, []); return (

{children}

{interactive && (

)}

); }; 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://ui.aceternity.com/registry/background-gradient-animation.json","proxyUrl":"https://shadcnregistry.com/r/aceternity/background-gradient-animation","itemId":"@aceternity/background-gradient-animation"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"components/ui/background-gradient-animation.tsx","content":"$52","type":"registry:ui","target":"components/ui/background-gradient-animation.tsx"}]}]]}],"$L53"]}]

Background Gradient Animation

Installation

Files

components

Styles