{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "aurora",
  "title": "Aurora",
  "description": "An animated aurora-gradient background container — theme-token blobs drifting in pure CSS.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/registry/ui/aurora.tsx",
      "content": "import * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * Keyframes ship inside the component via React 19 hoisted <style> —\n * no tailwind config edits, and duplicates dedupe by href.\n */\nconst KEYFRAMES = `@keyframes zy-aurora-a{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(18%,12%,0) scale(1.15)}66%{transform:translate3d(-10%,22%,0) scale(0.9)}}\n@keyframes zy-aurora-b{0%,100%{transform:translate3d(0,0,0) scale(1.05)}33%{transform:translate3d(-16%,14%,0) scale(0.92)}66%{transform:translate3d(12%,-10%,0) scale(1.18)}}\n@keyframes zy-aurora-c{0%,100%{transform:translate3d(0,0,0) scale(0.95)}40%{transform:translate3d(14%,-18%,0) scale(1.12)}70%{transform:translate3d(-18%,-6%,0) scale(1)}}`\n\n/** color-mix alpha tier per intensity — the single knob for how loud the glow is. */\nconst ALPHA = {\n  subtle: \"20%\",\n  medium: \"32%\",\n  bold: \"45%\",\n} as const\n\nexport interface AuroraProps extends React.ComponentProps<\"div\"> {\n  /** Opacity tier of the glow blobs. */\n  intensity?: keyof typeof ALPHA\n  /** Seconds per drift cycle of the base blob; the other blobs derive their duration from it. */\n  speed?: number\n}\n\n/**\n * Aurora — an animated aurora-gradient background container.\n * Pure CSS (no hooks, no browser APIs), so it stays a server component.\n */\nexport function Aurora({\n  intensity = \"medium\",\n  speed = 18,\n  className,\n  style,\n  children,\n  ...props\n}: AuroraProps) {\n  return (\n    <div\n      className={cn(\"relative isolate overflow-hidden\", className)}\n      style={\n        {\n          \"--zy-aurora-speed\": `${speed}s`,\n          \"--zy-aurora-alpha\": ALPHA[intensity],\n          ...style,\n        } as React.CSSProperties\n      }\n      {...props}\n    >\n      <style href=\"zyeon-aurora\" precedence=\"medium\">\n        {KEYFRAMES}\n      </style>\n\n      <div aria-hidden=\"true\" className=\"pointer-events-none absolute inset-0\">\n        <div\n          className={cn(\n            \"absolute -left-[20%] -top-[35%] h-[80%] w-[65%] rounded-full blur-3xl\",\n            \"[background:radial-gradient(closest-side,color-mix(in_oklab,var(--primary)_var(--zy-aurora-alpha),transparent),transparent)]\",\n            \"[animation:zy-aurora-a_var(--zy-aurora-speed)_ease-in-out_infinite] motion-reduce:[animation:none]\",\n          )}\n        />\n        <div\n          className={cn(\n            \"absolute -right-[15%] -top-[25%] h-[70%] w-[55%] rounded-full blur-3xl\",\n            \"[background:radial-gradient(closest-side,color-mix(in_oklab,var(--chart-2)_var(--zy-aurora-alpha),transparent),transparent)]\",\n            \"[animation:zy-aurora-b_calc(var(--zy-aurora-speed)*1.4)_ease-in-out_calc(var(--zy-aurora-speed)*-0.45)_infinite] motion-reduce:[animation:none]\",\n          )}\n        />\n        <div\n          className={cn(\n            \"absolute -bottom-[40%] left-[10%] h-[75%] w-[60%] rounded-full blur-3xl\",\n            \"[background:radial-gradient(closest-side,color-mix(in_oklab,var(--chart-4)_var(--zy-aurora-alpha),transparent),transparent)]\",\n            \"[animation:zy-aurora-c_calc(var(--zy-aurora-speed)*0.8)_ease-in-out_calc(var(--zy-aurora-speed)*-0.2)_infinite] motion-reduce:[animation:none]\",\n          )}\n        />\n      </div>\n\n      <div className=\"relative z-10\">{children}</div>\n    </div>\n  )\n}\n\nexport default Aurora\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}