{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"dependencies": [],
	"description": "Living aurora background with multiple variants. Sunset, ocean, forest, lavender, ember, ice.",
	"files": [
		{
			"content": "\"use client\";\n\nimport { useEffect, useRef } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ntype AuroraVariant = \"default\" | \"sunset\" | \"ocean\" | \"forest\" | \"lavender\" | \"ember\" | \"ice\" | \"custom\";\n\ninterface AuroraBackgroundProps {\n  className?: string;\n  variant?: AuroraVariant;\n  colors?: [string, string, string];\n  speed?: number;\n  blobCount?: number;\n  children?: React.ReactNode;\n  childrenClassName?: string;\n}\n\nconst VARIANTS: Record<AuroraVariant, [string, string, string][]> = {\n  custom: [],\n  default: [\n    [\"hsla(260, 70%, 60%, 0.4)\", \"hsla(280, 60%, 50%, 0.2)\", \"transparent\"],\n    [\"hsla(320, 80%, 70%, 0.3)\", \"transparent\", \"transparent\"],\n  ],\n  ember: [\n    [\"hsla(25, 95%, 55%, 0.5)\", \"hsla(0, 90%, 50%, 0.3)\", \"transparent\"],\n    [\"hsla(45, 90%, 60%, 0.4)\", \"transparent\", \"transparent\"],\n  ],\n  forest: [\n    [\"hsla(145, 60%, 45%, 0.45)\", \"hsla(165, 55%, 40%, 0.25)\", \"transparent\"],\n    [\"hsla(120, 65%, 50%, 0.35)\", \"transparent\", \"transparent\"],\n  ],\n  ice: [\n    [\"hsla(200, 70%, 75%, 0.4)\", \"hsla(220, 60%, 85%, 0.25)\", \"transparent\"],\n    [\"hsla(180, 65%, 80%, 0.35)\", \"transparent\", \"transparent\"],\n  ],\n  lavender: [\n    [\"hsla(270, 70%, 65%, 0.45)\", \"hsla(300, 60%, 55%, 0.25)\", \"transparent\"],\n    [\"hsla(240, 75%, 70%, 0.35)\", \"transparent\", \"transparent\"],\n  ],\n  ocean: [\n    [\"hsla(195, 80%, 50%, 0.45)\", \"hsla(220, 70%, 45%, 0.25)\", \"transparent\"],\n    [\"hsla(170, 75%, 55%, 0.35)\", \"transparent\", \"transparent\"],\n  ],\n  sunset: [\n    [\"hsla(15, 90%, 65%, 0.5)\", \"hsla(350, 80%, 55%, 0.3)\", \"transparent\"],\n    [\"hsla(45, 95%, 60%, 0.4)\", \"transparent\", \"transparent\"],\n  ],\n};\n\nexport function AuroraBackground({\n  className,\n  variant = \"default\",\n  colors,\n  speed = 1,\n  blobCount = 5,\n  children,\n  childrenClassName,\n}: AuroraBackgroundProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const timeRef = useRef(0);\n\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) {\n      return;\n    }\n\n    const ctx = canvas.getContext(\"2d\");\n    if (!ctx) {\n      return;\n    }\n\n    const palette =\n      variant === \"custom\" && colors\n        ? [\n            [colors[0], colors[1], colors[2]],\n            [colors[0], \"transparent\", \"transparent\"],\n          ]\n        : VARIANTS[variant];\n\n    const resize = () => {\n      canvas.width = canvas.offsetWidth;\n      canvas.height = canvas.offsetHeight;\n    };\n    resize();\n    window.addEventListener(\"resize\", resize);\n\n    let raf: number;\n    const animate = () => {\n      timeRef.current += 0.01 * speed;\n      const t = timeRef.current;\n      const w = canvas.width;\n      const h = canvas.height;\n\n      ctx.clearRect(0, 0, w, h);\n\n      for (let i = 0; i < blobCount; i++) {\n        const layer = palette[i % palette.length];\n        if (!layer) {\n          continue;\n        }\n        const [c1, c2, c3] = layer;\n        const phase = (i / blobCount) * Math.PI * 2 + t;\n        const x = w / 2 + Math.sin(phase) * (w * 0.2) + Math.cos(t * 0.5) * (w * 0.1);\n        const y = h / 2 + Math.cos(phase * 0.7) * (h * 0.2) + Math.sin(t * 0.3) * (h * 0.1);\n        const gradient = ctx.createRadialGradient(x, y, 0, x, y, Math.max(w, h) * 0.4);\n        gradient.addColorStop(0, c1 ?? \"transparent\");\n        gradient.addColorStop(0.5, c2 ?? \"transparent\");\n        gradient.addColorStop(1, c3 ?? \"transparent\");\n        ctx.fillStyle = gradient;\n        ctx.fillRect(0, 0, w, h);\n      }\n\n      ctx.globalCompositeOperation = \"screen\";\n      for (let i = 0; i < Math.min(2, palette.length); i++) {\n        const layer = palette[i];\n        if (!layer) {\n          continue;\n        }\n        const phase = (i / 2) * Math.PI + t * 0.8;\n        const x = w / 2 + Math.sin(phase * 1.2) * (w * 0.15);\n        const y = h / 2 + Math.cos(phase * 0.9) * (h * 0.15);\n        const gradient = ctx.createRadialGradient(x, y, 0, x, y, Math.max(w, h) * 0.35);\n        gradient.addColorStop(0, layer[0] ?? \"transparent\");\n        gradient.addColorStop(1, \"transparent\");\n        ctx.fillStyle = gradient;\n        ctx.fillRect(0, 0, w, h);\n      }\n      ctx.globalCompositeOperation = \"source-over\";\n\n      raf = requestAnimationFrame(animate);\n    };\n    raf = requestAnimationFrame(animate);\n\n    return () => {\n      window.removeEventListener(\"resize\", resize);\n      cancelAnimationFrame(raf);\n    };\n  }, [variant, colors, speed, blobCount]);\n\n  return (\n    <div className={cn(\"relative overflow-hidden\", className)}>\n      <canvas ref={canvasRef} className=\"absolute inset-0 size-full\" />\n      {children && <div className={cn(\"relative\", childrenClassName)}>{children}</div>}\n    </div>\n  );\n}\n",
			"path": "registry/new-york/aurora-background/aurora-background.tsx",
			"type": "registry:component"
		}
	],
	"name": "aurora-background",
	"title": "Aurora Background",
	"type": "registry:component"
}