{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gradient-hero",
  "title": "Gradient hero",
  "author": "Hazeglow (https://hazeglow.dev)",
  "description": "A hero section with an animated, grainy gradient behind the headline, colored by your theme.",
  "dependencies": [
    "hazeglow@^0.6.1"
  ],
  "files": [
    {
      "path": "registry/hazeglow/gradient-hero.tsx",
      "content": "\"use client\";\n\nimport { useState, type ReactNode } from \"react\";\nimport { Hazeglow, parseConfig } from \"hazeglow\";\nimport { cn } from \"@/lib/utils\";\n\nconst config = parseConfig({\n  shape: \"blob\",\n  seed: 2896709748,\n  center: [0.66, 0.5],\n  size: [1, 0.8],\n  roundness: 0.77,\n  softness: 0.6,\n  angle: 79,\n  warp: 0.49,\n  warpScale: 0.9,\n  grain: 0.5,\n  motion: \"drift\",\n  speed: 1,\n  loop: 10,\n  hover: 0.3,\n  palette: [\n    \"var(--hazeglow-1, #05070c)\",\n    \"var(--hazeglow-2, #1b2a3a)\",\n    \"var(--hazeglow-3, #5d7a8c)\",\n    \"var(--hazeglow-4, #c7d3d9)\",\n    \"var(--hazeglow-5, #f4efe3)\",\n  ],\n  background: \"var(--background, #000000)\",\n});\n\nconst fallback =\n  \"radial-gradient(45% 55% at 66% 50%, var(--hazeglow-4, #c7d3d9), transparent 70%), radial-gradient(40% 45% at 72% 62%, var(--hazeglow-3, #5d7a8c), transparent 70%)\";\n\nexport function GradientHero({\n  title = \"Make it glow\",\n  description = \"An animated, grainy gradient behind your headline. It follows your theme colors and pauses when nobody is looking.\",\n  children,\n  className,\n}: {\n  title?: ReactNode;\n  description?: ReactNode;\n  children?: ReactNode;\n  className?: string;\n}) {\n  const [unsupported, setUnsupported] = useState(false);\n\n  return (\n    <section className={cn(\"relative isolate flex min-h-160 items-end overflow-hidden bg-background text-foreground\", className)}>\n      <div\n        aria-hidden=\"true\"\n        className=\"absolute inset-0 -z-10\"\n        style={{\n          maskImage: \"linear-gradient(to bottom, black 70%, transparent)\",\n          backgroundImage: unsupported ? fallback : undefined,\n        }}\n      >\n        {unsupported ? null : <Hazeglow config={config} onUnsupported={() => setUnsupported(true)} />}\n      </div>\n      <div className=\"mx-auto w-full max-w-6xl px-6 pt-32 pb-20\">\n        <h1 className=\"max-w-3xl text-5xl font-semibold tracking-tight text-balance sm:text-7xl\">{title}</h1>\n        <p className=\"mt-5 max-w-xl text-lg text-pretty text-muted-foreground\">{description}</p>\n        {children ? <div className=\"mt-8 flex flex-wrap gap-3\">{children}</div> : null}\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "cssVars": {
    "light": {
      "hazeglow-1": "#05070c",
      "hazeglow-2": "#1b2a3a",
      "hazeglow-3": "#5d7a8c",
      "hazeglow-4": "#c7d3d9",
      "hazeglow-5": "#f4efe3"
    },
    "dark": {
      "hazeglow-1": "#05070c",
      "hazeglow-2": "#1b2a3a",
      "hazeglow-3": "#5d7a8c",
      "hazeglow-4": "#c7d3d9",
      "hazeglow-5": "#f4efe3"
    }
  },
  "docs": "Usage: <GradientHero title=\"Make it glow\" description=\"Your pitch here.\"><Button size=\"lg\">Get started</Button></GradientHero>\nColors come from --hazeglow-1 to --hazeglow-5, which this item adds to your CSS for light and dark. They default to Paper moon from the hazeglow.dev gallery; edit them to match your brand, and the gradient fades into --background. Live WebGL2 canvases: keep a few per page, since browsers allow about 16. Design your own look at https://hazeglow.dev/generator and paste its config.",
  "categories": [
    "hero",
    "background",
    "gradient"
  ],
  "type": "registry:block"
}