{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gradient-background",
  "type": "registry:block",
  "title": "Gradient background",
  "description": "Gradient background",
  "files": [
    {
      "path": "components/usages/gradientbackgroundusage.tsx",
      "content": "import React from \"react\";\r\n\r\nimport { BackgroundGradientAnimation } from \"@/registry/open-source/gradient-background\";\r\n\r\nexport default function BackgroundGradientAnimationDemo() {\r\n\treturn (\r\n\t\t<BackgroundGradientAnimation>\r\n\t\t\t<div className=\"absolute z-50 inset-0 flex items-center justify-center text-secondary font-bold px-4 pointer-events-none text-3xl text-center md:text-4xl lg:text-7xl\">\r\n\t\t\t\t<p className=\"bg-clip-text text-transparent drop-shadow-2xl bg-linear-to-b from-background/80 to-background/20\">\r\n\t\t\t\t\tGradients X Animations\r\n\t\t\t\t</p>\r\n\t\t\t</div>\r\n\t\t</BackgroundGradientAnimation>\r\n\t);\r\n}\r\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/gradientbackgroundusage.tsx",
      "content": "import React from \"react\";\r\n\r\nimport { BackgroundGradientAnimation } from \"@/registry/open-source/gradient-background\";\r\n\r\nexport default function BackgroundGradientAnimationDemo() {\r\n\treturn (\r\n\t\t<BackgroundGradientAnimation>\r\n\t\t\t<div className=\"absolute z-50 inset-0 flex items-center justify-center text-secondary font-bold px-4 pointer-events-none text-3xl text-center md:text-4xl lg:text-7xl\">\r\n\t\t\t\t<p className=\"bg-clip-text text-transparent drop-shadow-2xl bg-linear-to-b from-background/80 to-background/20\">\r\n\t\t\t\t\tGradients X Animations\r\n\t\t\t\t</p>\r\n\t\t\t</div>\r\n\t\t</BackgroundGradientAnimation>\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/gradient-background.tsx",
      "content": "\"use client\";\n\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\n\n// https://ui.aceternity.com/components/background-gradient-animation\n\nexport const BackgroundGradientAnimation = ({\n\tgradientBackgroundStart = \"rgb(108, 0, 162)\",\n\tgradientBackgroundEnd = \"rgb(0, 17, 82)\",\n\tfirstColor = \"18, 113, 255\",\n\tsecondColor = \"221, 74, 255\",\n\tthirdColor = \"100, 220, 255\",\n\tfourthColor = \"200, 50, 50\",\n\tfifthColor = \"180, 180, 50\",\n\tpointerColor = \"140, 100, 255\",\n\tsize = \"80%\",\n\tblendingValue = \"hard-light\",\n\tchildren,\n\tclassName,\n\tinteractive = true,\n\tcontainerClassName,\n}: {\n\tgradientBackgroundStart?: string;\n\tgradientBackgroundEnd?: string;\n\tfirstColor?: string;\n\tsecondColor?: string;\n\tthirdColor?: string;\n\tfourthColor?: string;\n\tfifthColor?: string;\n\tpointerColor?: string;\n\tsize?: string;\n\tblendingValue?: string;\n\tchildren?: React.ReactNode;\n\tclassName?: string;\n\tinteractive?: boolean;\n\tcontainerClassName?: string;\n}) => {\n\tconst interactiveRef = useRef<HTMLDivElement>(null);\n\n\tconst [curX, setCurX] = useState(0);\n\tconst [curY, setCurY] = useState(0);\n\tconst [tgX, setTgX] = useState(0);\n\tconst [tgY, setTgY] = useState(0);\n\tuseEffect(() => {\n\t\tdocument.body.style.setProperty(\n\t\t\t\"--gradient-background-start\",\n\t\t\tgradientBackgroundStart\n\t\t);\n\t\tdocument.body.style.setProperty(\n\t\t\t\"--gradient-background-end\",\n\t\t\tgradientBackgroundEnd\n\t\t);\n\t\tdocument.body.style.setProperty(\"--first-color\", firstColor);\n\t\tdocument.body.style.setProperty(\"--second-color\", secondColor);\n\t\tdocument.body.style.setProperty(\"--third-color\", thirdColor);\n\t\tdocument.body.style.setProperty(\"--fourth-color\", fourthColor);\n\t\tdocument.body.style.setProperty(\"--fifth-color\", fifthColor);\n\t\tdocument.body.style.setProperty(\"--pointer-color\", pointerColor);\n\t\tdocument.body.style.setProperty(\"--size\", size);\n\t\tdocument.body.style.setProperty(\"--blending-value\", blendingValue);\n\t}, []);\n\n\tuseEffect(() => {\n\t\tfunction move() {\n\t\t\tif (!interactiveRef.current) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetCurX(curX + (tgX - curX) / 20);\n\t\t\tsetCurY(curY + (tgY - curY) / 20);\n\t\t\tinteractiveRef.current.style.transform = `translate(${Math.round(\n\t\t\t\tcurX\n\t\t\t)}px, ${Math.round(curY)}px)`;\n\t\t}\n\n\t\tmove();\n\t}, [tgX, tgY]);\n\n\tconst handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n\t\tif (interactiveRef.current) {\n\t\t\tconst rect = interactiveRef.current.getBoundingClientRect();\n\t\t\tsetTgX(event.clientX - rect.left);\n\t\t\tsetTgY(event.clientY - rect.top);\n\t\t}\n\t};\n\n\tconst [isSafari, setIsSafari] = useState(false);\n\tuseEffect(() => {\n\t\tsetIsSafari(/^((?!chrome|android).)*safari/i.test(navigator.userAgent));\n\t}, []);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"h-screen w-screen relative overflow-hidden top-0 left-0 bg-[linear-gradient(40deg,var(--gradient-background-start),var(--gradient-background-end))]\",\n\t\t\t\tcontainerClassName\n\t\t\t)}\n\t\t>\n\t\t\t<svg className=\"hidden\">\n\t\t\t\t<defs>\n\t\t\t\t\t<filter id=\"blurMe\">\n\t\t\t\t\t\t<feGaussianBlur\n\t\t\t\t\t\t\tin=\"SourceGraphic\"\n\t\t\t\t\t\t\tstdDeviation=\"10\"\n\t\t\t\t\t\t\tresult=\"blur\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<feColorMatrix\n\t\t\t\t\t\t\tin=\"blur\"\n\t\t\t\t\t\t\tmode=\"matrix\"\n\t\t\t\t\t\t\tvalues=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8\"\n\t\t\t\t\t\t\tresult=\"goo\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<feBlend in=\"SourceGraphic\" in2=\"goo\" />\n\t\t\t\t\t</filter>\n\t\t\t\t</defs>\n\t\t\t</svg>\n\t\t\t<div className={cn(\"\", className)}>{children}</div>\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"gradients-container h-full w-full blur-lg\",\n\t\t\t\t\tisSafari ? \"blur-2xl\" : \"filter-[url(#blurMe)_blur(40px)]\"\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t`absolute [background:radial-gradient(circle_at_center,var(--first-color)_0,var(--first-color)_50%)_no-repeat]`,\n\t\t\t\t\t\t`[mix-blend-mode:var(--blending-value)] w-(--size) h-(--size) top-[calc(50%-var(--size)/2)] left-[calc(50%-var(--size)/2)]`,\n\t\t\t\t\t\t`origin-[center_center]`,\n\t\t\t\t\t\t`animate-first`,\n\t\t\t\t\t\t`opacity-100`\n\t\t\t\t\t)}\n\t\t\t\t></div>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t`absolute [background:radial-gradient(circle_at_center,rgba(var(--second-color),0.8)_0,rgba(var(--second-color),0)_50%)_no-repeat]`,\n\t\t\t\t\t\t`[mix-blend-mode:var(--blending-value)] w-(--size) h-(--size) top-[calc(50%-var(--size)/2)] left-[calc(50%-var(--size)/2)]`,\n\t\t\t\t\t\t`origin-[calc(50%-400px)]`,\n\t\t\t\t\t\t`animate-second`,\n\t\t\t\t\t\t`opacity-100`\n\t\t\t\t\t)}\n\t\t\t\t></div>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t`absolute [background:radial-gradient(circle_at_center,rgba(var(--third-color),0.8)_0,rgba(var(--third-color),0)_50%)_no-repeat]`,\n\t\t\t\t\t\t`[mix-blend-mode:var(--blending-value)] w-(--size) h-(--size) top-[calc(50%-var(--size)/2)] left-[calc(50%-var(--size)/2)]`,\n\t\t\t\t\t\t`origin-[calc(50%+400px)]`,\n\t\t\t\t\t\t`animate-third`,\n\t\t\t\t\t\t`opacity-100`\n\t\t\t\t\t)}\n\t\t\t\t></div>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t`absolute [background:radial-gradient(circle_at_center,rgba(var(--fourth-color),0.8)_0,rgba(var(--fourth-color),0)_50%)_no-repeat]`,\n\t\t\t\t\t\t`[mix-blend-mode:var(--blending-value)] w-(--size) h-(--size) top-[calc(50%-var(--size)/2)] left-[calc(50%-var(--size)/2)]`,\n\t\t\t\t\t\t`origin-[calc(50%-200px)]`,\n\t\t\t\t\t\t`animate-fourth`,\n\t\t\t\t\t\t`opacity-70`\n\t\t\t\t\t)}\n\t\t\t\t></div>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t`absolute [background:radial-gradient(circle_at_center,rgba(var(--fifth-color),0.8)_0,rgba(var(--fifth-color),0)_50%)_no-repeat]`,\n\t\t\t\t\t\t`[mix-blend-mode:var(--blending-value)] w-(--size) h-(--size) top-[calc(50%-var(--size)/2)] left-[calc(50%-var(--size)/2)]`,\n\t\t\t\t\t\t`origin-[calc(50%-800px)_calc(50%+800px)]`,\n\t\t\t\t\t\t`animate-fifth`,\n\t\t\t\t\t\t`opacity-100`\n\t\t\t\t\t)}\n\t\t\t\t></div>\n\n\t\t\t\t{interactive && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tref={interactiveRef}\n\t\t\t\t\t\tonMouseMove={handleMouseMove}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t`absolute [background:radial-gradient(circle_at_center,rgba(var(--pointer-color),0.8)_0,rgba(var(--pointer-color),0)_50%)_no-repeat]`,\n\t\t\t\t\t\t\t`[mix-blend-mode:var(--blending-value)] w-full h-full -top-1/2 -left-1/2`,\n\t\t\t\t\t\t\t`opacity-70`\n\t\t\t\t\t\t)}\n\t\t\t\t\t></div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}