{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "aurora-background",
  "type": "registry:block",
  "title": "Aurora background",
  "description": "Aurora background",
  "files": [
    {
      "path": "components/usages/aurorabackgroundusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { AuroraBackground } from \"@/registry/open-source/aurora-background\";\nimport { motion } from \"motion/react\";\n\nexport default function Usage() {\n\treturn (\n\t\t<AuroraBackground>\n\t\t\t<motion.div\n\t\t\t\tinitial={{ opacity: 0.0, y: 40 }}\n\t\t\t\twhileInView={{ opacity: 1, y: 0 }}\n\t\t\t\ttransition={{\n\t\t\t\t\tdelay: 0.3,\n\t\t\t\t\tduration: 0.8,\n\t\t\t\t\tease: \"easeInOut\",\n\t\t\t\t}}\n\t\t\t\tclassName=\"relative flex flex-col gap-4 items-center justify-center px-4\"\n\t\t\t>\n\t\t\t\t<div className=\"text-3xl md:text-7xl font-bold dark:text-secondary text-center\">\n\t\t\t\t\tBackground lights are cool you know.\n\t\t\t\t</div>\n\t\t\t\t<div className=\"font-extralight text-base md:text-4xl dark:text-secondary py-4\">\n\t\t\t\t\tAnd this, is chemical burn.\n\t\t\t\t</div>\n\t\t\t\t<button className=\"bg-background dark:bg-background rounded-full w-fit text-secondary dark:text-secondary px-4 py-2\">\n\t\t\t\t\tDebug now\n\t\t\t\t</button>\n\t\t\t</motion.div>\n\t\t</AuroraBackground>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/aurorabackgroundusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { AuroraBackground } from \"@/registry/open-source/aurora-background\";\nimport { motion } from \"motion/react\";\n\nexport default function Usage() {\n\treturn (\n\t\t<AuroraBackground>\n\t\t\t<motion.div\n\t\t\t\tinitial={{ opacity: 0.0, y: 40 }}\n\t\t\t\twhileInView={{ opacity: 1, y: 0 }}\n\t\t\t\ttransition={{\n\t\t\t\t\tdelay: 0.3,\n\t\t\t\t\tduration: 0.8,\n\t\t\t\t\tease: \"easeInOut\",\n\t\t\t\t}}\n\t\t\t\tclassName=\"relative flex flex-col gap-4 items-center justify-center px-4\"\n\t\t\t>\n\t\t\t\t<div className=\"text-3xl md:text-7xl font-bold dark:text-secondary text-center\">\n\t\t\t\t\tBackground lights are cool you know.\n\t\t\t\t</div>\n\t\t\t\t<div className=\"font-extralight text-base md:text-4xl dark:text-secondary py-4\">\n\t\t\t\t\tAnd this, is chemical burn.\n\t\t\t\t</div>\n\t\t\t\t<button className=\"bg-background dark:bg-background rounded-full w-fit text-secondary dark:text-secondary px-4 py-2\">\n\t\t\t\t\tDebug now\n\t\t\t\t</button>\n\t\t\t</motion.div>\n\t\t</AuroraBackground>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/aurora-background.tsx",
      "content": "\"use client\";\r\n\r\nimport React, { ReactNode } from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\n\r\ninterface AuroraBackgroundProps extends React.HTMLProps<HTMLDivElement> {\r\n\tchildren: ReactNode;\r\n\tshowRadialGradient?: boolean;\r\n}\r\n\r\nexport const AuroraBackground = ({\r\n\tclassName,\r\n\tchildren,\r\n\tshowRadialGradient = true,\r\n\t...props\r\n}: AuroraBackgroundProps) => {\r\n\treturn (\r\n\t\t<div\r\n\t\t\tclassName={cn(\r\n\t\t\t\t\"pointer-events-none relative flex flex-col  h-full items-center justify-center bg-background dark:bg-slate-950  text-slate-950 transition-bg\",\r\n\t\t\t\tclassName\r\n\t\t\t)}\r\n\t\t\t{...props}\r\n\t\t>\r\n\t\t\t<div className=\"absolute inset-0 overflow-hidden\">\r\n\t\t\t\t<div\r\n\t\t\t\t\t//   I'm sorry but this is what peak developer performance looks like // trigger warning\r\n\t\t\t\t\tclassName={cn(\r\n\t\t\t\t\t\t`\r\n            [--white-gradient:repeating-linear-gradient(100deg,var(--white)_0%,var(--white)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--white)_16%)]\r\n            [--dark-gradient:repeating-linear-gradient(100deg,var(--black)_0%,var(--black)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--black)_16%)]\r\n            [--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%)]\r\n            [background-image:var(--white-gradient),var(--aurora)]\r\n            dark:[background-image:var(--dark-gradient),var(--aurora)]\r\n            bg-size-[300%,200%]\r\n            bg-position-[50%_50%,50%_50%]\r\n            filter blur-[10px] invert dark:invert-0\r\n            after:content-[\"\"] after:absolute after:inset-0 after:[background-image:var(--white-gradient),var(--aurora)] \r\n            dark:after:[background-image:var(--dark-gradient),var(--aurora)]\r\n            after:bg-size-[200%,100%] \r\n            after:animate-aurora after:bg-fixed after:mix-blend-difference\r\n            pointer-events-none\r\n            absolute -inset-[10px] opacity-50`,\r\n\t\t\t\t\t\tshowRadialGradient &&\r\n\t\t\t\t\t\t\t`mask-[radial-gradient(ellipse_at_100%_0%,black_10%,var(--transparent)_70%)]`\r\n\t\t\t\t\t)}\r\n\t\t\t\t></div>\r\n\t\t\t</div>\r\n\t\t\t{children}\r\n\t\t</div>\r\n\t);\r\n};\r\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"
    }
  ]
}