{
  "name": "aurora-background",
  "type": "registry:ui",
  "files": [
    {
      "path": "components/ui/aurora-background.tsx",
      "content": "\"use client\";\nimport { cn } from \"@/lib/utils\";\nimport React, { ReactNode } from \"react\";\n\ninterface AuroraBackgroundProps extends React.HTMLProps<HTMLDivElement> {\n  children: ReactNode;\n  showRadialGradient?: boolean;\n}\n\nexport const AuroraBackground = ({\n  className,\n  children,\n  showRadialGradient = true,\n  ...props\n}: AuroraBackgroundProps) => {\n  return (\n    <main>\n      <div\n        className={cn(\n          \"transition-bg relative flex h-[100vh] flex-col items-center justify-center bg-zinc-50 text-slate-950 dark:bg-zinc-900\",\n          className,\n        )}\n        {...props}\n      >\n        <div\n          className=\"absolute inset-0 overflow-hidden\"\n          style={\n            {\n              \"--aurora\":\n                \"repeating-linear-gradient(100deg,#3b82f6_10%,#a5b4fc_15%,#93c5fd_20%,#ddd6fe_25%,#60a5fa_30%)\",\n              \"--dark-gradient\":\n                \"repeating-linear-gradient(100deg,#000_0%,#000_7%,transparent_10%,transparent_12%,#000_16%)\",\n              \"--white-gradient\":\n                \"repeating-linear-gradient(100deg,#fff_0%,#fff_7%,transparent_10%,transparent_12%,#fff_16%)\",\n\n              \"--blue-300\": \"#93c5fd\",\n              \"--blue-400\": \"#60a5fa\",\n              \"--blue-500\": \"#3b82f6\",\n              \"--indigo-300\": \"#a5b4fc\",\n              \"--violet-200\": \"#ddd6fe\",\n              \"--black\": \"#000\",\n              \"--white\": \"#fff\",\n              \"--transparent\": \"transparent\",\n            } as React.CSSProperties\n          }\n        >\n          <div\n            //   I'm sorry but this is what peak developer performance looks like // trigger warning\n            className={cn(\n              `after:animate-aurora pointer-events-none absolute -inset-[10px] [background-image:var(--white-gradient),var(--aurora)] [background-size:300%,_200%] [background-position:50%_50%,50%_50%] opacity-50 blur-[10px] invert filter will-change-transform [--aurora:repeating-linear-gradient(100deg,var(--blue-500)_10%,var(--indigo-300)_15%,var(--blue-300)_20%,var(--violet-200)_25%,var(--blue-400)_30%)] [--dark-gradient:repeating-linear-gradient(100deg,var(--black)_0%,var(--black)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--black)_16%)] [--white-gradient:repeating-linear-gradient(100deg,var(--white)_0%,var(--white)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--white)_16%)] after:absolute after:inset-0 after:[background-image:var(--white-gradient),var(--aurora)] after:[background-size:200%,_100%] after:[background-attachment:fixed] after:mix-blend-difference after:content-[\"\"] dark:[background-image:var(--dark-gradient),var(--aurora)] dark:invert-0 after:dark:[background-image:var(--dark-gradient),var(--aurora)]`,\n\n              showRadialGradient &&\n                `[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,var(--transparent)_70%)]`,\n            )}\n          ></div>\n        </div>\n        {children}\n      </div>\n    </main>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/aurora-background.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Aurora Background"
}