{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "aurora-background",
  "type": "registry:ui",
  "title": "Aurora Background",
  "description": "Animated aurora backdrop — soft blurred color blobs drifting behind hero content.",
  "dependencies": [
    "@saasflare/ui"
  ],
  "files": [
    {
      "path": "components/ui/aurora-background.tsx",
      "type": "registry:ui",
      "content": "// @draft\n\"use client\"\n\n/**\n * @fileoverview AuroraBackground — soft multi-color gradient backdrop for showcase sections.\n * @module packages/ui/components/ui/aurora-background\n * @package ui\n *\n * Three blurred radial blobs (peach + blue + violet by default) sit at the\n * corners of an isolated container, with children rendered above on `z-10`.\n * Drift animation is pure CSS (see `packages/ui/styles/aurora.css`) and obeys\n * `prefers-reduced-motion`.\n *\n * Defaults to a curated showcase palette rather than brand tokens — the visual\n * intent is a consistent atmospheric backdrop regardless of the active palette.\n * Override `colors` to opt into brand-rotating blobs.\n *\n * @component\n * @example\n * import { AuroraBackground } from \"@saasflare/ui\"\n *\n * <AuroraBackground className=\"min-h-[500px] rounded-2xl p-12\">\n *   <SectionCard title=\"Production\">…</SectionCard>\n * </AuroraBackground>\n *\n * @example\n * // Opt-into brand-rotating colors\n * <AuroraBackground colors={[\"var(--primary)\", \"var(--chart-2)\", \"var(--chart-3)\"]}>\n *   <Card>…</Card>\n * </AuroraBackground>\n *\n * @example\n * // Disable drift animation\n * <AuroraBackground animated={false}>\n *   <StaticDemo />\n * </AuroraBackground>\n */\n\nimport type { ComponentProps, CSSProperties } from \"react\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\n\n/** Showcase palette used when no `colors` prop is supplied. Peach / blue / violet. */\nconst DEFAULT_COLORS: readonly [string, string, string] = [\n    \"hsl(28 90% 75%)\",  // peach (top-left)\n    \"hsl(220 85% 65%)\", // blue  (right)\n    \"hsl(280 70% 75%)\", // violet (bottom-left)\n] as const\n\n/** Props for the AuroraBackground component. */\nexport interface AuroraBackgroundProps\n    extends Omit<ComponentProps<\"div\">, keyof SaasflareComponentProps | \"color\">,\n        SaasflareComponentProps {\n    /**\n     * Three ambient blob colors in order: top-left, right, bottom-left.\n     * Default: curated peach + blue + violet showcase palette.\n     */\n    colors?: readonly [string, string, string]\n    /** Overall blob opacity (0–1). Applied inline to every blob. Default: `0.55`. */\n    intensity?: number\n}\n\n/**\n * Soft multi-color gradient backdrop for showcase, demo, and marketing sections.\n *\n * Renders three blurred radial blobs positioned at corners around the children\n * slot. Default palette is a fixed showcase combination (peach / blue / violet)\n * so the visual stays consistent across brand palettes; pass `colors` to switch\n * to brand-rotating tokens. Drift animation is on by default and respects\n * `prefers-reduced-motion`.\n *\n * @component\n * @layer core\n */\nexport function AuroraBackground({\n    colors = DEFAULT_COLORS,\n    intensity = 0.55,\n    className,\n    children,\n    surface,\n    radius,\n    animated,\n    iconWeight,\n    ...props\n}: AuroraBackgroundProps) {\n    const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n\n    const blobStyle = (color: string): CSSProperties => ({\n        background: `radial-gradient(circle, ${color} 0%, transparent 65%)`,\n        opacity: intensity,\n    })\n\n    return (\n        <div\n            {...props}\n            data-slot=\"aurora-background\"\n            data-surface={sf.surface}\n            data-radius={sf.radius}\n            data-animated={String(sf.animated)}\n            className={cn(\"relative isolate overflow-hidden\", className)}\n        >\n            <div\n                aria-hidden=\"true\"\n                className=\"aurora-blob aurora-blob-1 pointer-events-none absolute -top-1/4 -left-1/4 size-[55%] rounded-full blur-3xl dark:opacity-50\"\n                style={blobStyle(colors[0])}\n            />\n            <div\n                aria-hidden=\"true\"\n                className=\"aurora-blob aurora-blob-2 pointer-events-none absolute top-0 -right-1/4 h-full w-[55%] rounded-full blur-3xl dark:opacity-50\"\n                style={blobStyle(colors[1])}\n            />\n            <div\n                aria-hidden=\"true\"\n                className=\"aurora-blob aurora-blob-3 pointer-events-none absolute -bottom-1/4 -left-1/4 size-[50%] rounded-full blur-3xl dark:opacity-50\"\n                style={blobStyle(colors[2])}\n            />\n            <div className=\"relative z-10\">{children}</div>\n        </div>\n    )\n}\n",
      "target": "components/ui/aurora-background.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/aurora-background.json"
  }
}