{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "aurora-background",
  "type": "registry:component",
  "title": "Aurora background",
  "description": "Soft northern-lights curtains that drift and sway across the panel behind your content.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/aurora-background.tsx",
      "type": "registry:ui",
      "target": "components/ui/aurora-background.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { useInView, useReducedMotion } from \"motion/react\"\nimport { ArrowRight } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\n/**\n * Soft northern-lights curtains that drift and sway across the panel behind your content.\n * Three blurred bands of accent colour move at different periods, so the\n * motion never reads as a loop. The light sits behind the content, ignores\n * the pointer, pauses off screen and holds still for reduced motion.\n */\ntype AuroraBackgroundProps = {\n  /** Strength of the light, 0 to 1. */\n  intensity?: number\n  /** Speed multiplier. 2 is twice as fast, 0.5 half as fast. */\n  speed?: number\n  /** Softness of the bands in pixels. */\n  blur?: number\n  /** Colours of the bands. Any CSS colour, including var(--token). */\n  colors?: string[]\n  className?: string\n  children?: React.ReactNode\n}\n\n/**\n * The three curtains: gradient angle, band edges in pixels (each band fades in, holds, fades out, then a gap),\n * seconds per sway and drift direction. Both ends of a repeat are transparent, so the pattern tiles without a seam.\n */\nconst CURTAINS = [\n  { angle: 104, bands: [0, 70, 150, 230, 300, 360, 420, 500, 560, 620, 690, 780], period: 17, dir: 1, alpha: 0.7, mask: \"transparent 0%, black 16%, black 46%, transparent 86%\" },\n  { angle: 76, bands: [0, 60, 120, 190, 270, 330, 380, 450, 520, 580, 640, 720], period: 23, dir: -1, alpha: 0.5, mask: \"transparent 4%, black 24%, black 54%, transparent 90%\" },\n  { angle: 94, bands: [0, 90, 180, 260, 340, 420, 490, 570, 660, 740, 820, 900], period: 31, dir: 1, alpha: 0.4, mask: \"transparent 10%, black 32%, black 60%, transparent 94%\" },\n]\n\nfunction AuroraBackground({\n  intensity = 1,\n  speed = 1,\n  blur = 28,\n  colors = [\"var(--accent)\", \"var(--accent-2)\", \"var(--info)\"],\n  className,\n  children,\n}: AuroraBackgroundProps) {\n  const reduce = useReducedMotion()\n  const ref = React.useRef<HTMLDivElement>(null)\n  const inView = useInView(ref, { margin: \"80px\" })\n  const level = Math.min(1.5, Math.max(0, intensity))\n  const rate = Math.max(0.05, speed)\n  const palette = colors.length ? colors : [\"var(--accent)\"]\n  const tint = (c: string, pct: number) => `color-mix(in oklch, ${c} ${pct}%, transparent)`\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"aurora-background\"\n      className={cn(\"relative isolate h-[360px] w-full overflow-hidden rounded-2xl border border-border bg-bg\", className)}\n    >\n      <div\n        aria-hidden\n        className=\"pointer-events-none absolute inset-0 z-0 opacity-(--aurora-light) dark:opacity-(--aurora-dark)\"\n        style={{ \"--aurora-light\": level * 0.64, \"--aurora-dark\": level } as React.CSSProperties}\n      >\n        {CURTAINS.map((c, i) => {\n          const [a, b, d] = [palette[i % palette.length], palette[(i + 1) % palette.length], palette[(i + 2) % palette.length]]\n          const s = c.bands\n          const stripes = `repeating-linear-gradient(${c.angle}deg, transparent ${s[0]}px, ${tint(a, 72)} ${s[1]}px, ${tint(a, 72)} ${s[2]}px, transparent ${s[3]}px, transparent ${s[4]}px, ${tint(b, 68)} ${s[5]}px, ${tint(b, 68)} ${s[6]}px, transparent ${s[7]}px, transparent ${s[8]}px, ${tint(d, 60)} ${s[9]}px, ${tint(d, 60)} ${s[10]}px, transparent ${s[11]}px)`\n          const mask = `linear-gradient(to bottom, ${c.mask})`\n          return (\n            <div\n              key={i}\n              data-slot=\"aurora-background-curtain\"\n              className=\"absolute will-change-transform\"\n              style={{\n                inset: \"-30% -28%\",\n                background: stripes,\n                opacity: c.alpha,\n                filter: blur > 0 ? `blur(${blur}px)` : undefined,\n                maskImage: mask,\n                WebkitMaskImage: mask,\n                [\"--aurora-dir\" as string]: c.dir,\n                transform: reduce ? `translate3d(${c.dir * 2}%, 0, 0) skewX(${c.dir * 2}deg)` : undefined,\n                animation: reduce ? undefined : `aurora-sway ${(c.period / rate).toFixed(2)}s ease-in-out ${(-c.period / rate / (2 + i)).toFixed(2)}s infinite alternate`,\n                animationPlayState: inView ? \"running\" : \"paused\",\n              }}\n            />\n          )\n        })}\n        <div\n          className=\"absolute inset-0\"\n          style={{ background: `radial-gradient(70% 55% at 50% 0%, ${tint(palette[0], 22)}, transparent 70%)` }}\n        />\n      </div>\n      <div className=\"relative z-10 h-full\">\n        {children ?? (\n          <div className=\"flex h-full flex-col items-center justify-center gap-4 px-6 text-center\">\n            <span className=\"rounded-full border border-accent-line bg-accent-soft px-2.5 py-0.5 text-xs font-medium text-accent-fg\">\n              Lumen Insights\n            </span>\n            <p className=\"max-w-[18ch] text-3xl font-medium tracking-[-0.035em] text-balance text-fg\">\n              See your runway in a new light\n            </p>\n            <Button>\n              Open the report\n              <ArrowRight />\n            </Button>\n          </div>\n        )}\n      </div>\n      <style>{`@keyframes aurora-sway{0%{transform:translate3d(calc(var(--aurora-dir) * -7%),0,0) skewX(calc(var(--aurora-dir) * -5deg))}100%{transform:translate3d(calc(var(--aurora-dir) * 7%),0,0) skewX(calc(var(--aurora-dir) * 5deg))}}`}</style>\n    </div>\n  )\n}\n\nexport { AuroraBackground }\nexport type { AuroraBackgroundProps }\n"
    }
  ]
}