{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "god-rays-hero",
  "title": "God Rays Hero",
  "description": "A full-bleed hero section lit by animated volumetric light rays.",
  "dependencies": [
    "@paper-design/shaders-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/shaders/god-rays-hero/god-rays-hero.tsx",
      "content": "import { GodRays } from \"@paper-design/shaders-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\ntype GodRaysHeroProps = React.ComponentProps<\"section\"> & {\n  eyebrow?: string\n  title?: string\n  description?: string\n  primaryAction?: { label: string; href: string }\n  secondaryAction?: { label: string; href: string }\n}\n\nfunction GodRaysHero({\n  eyebrow = \"Now in public beta\",\n  title = \"Light up your next launch\",\n  description = \"Volumetric light rays rendered in real time on the GPU. No videos, no images, just a few kilobytes of shader code.\",\n  primaryAction = { label: \"Get started\", href: \"#\" },\n  secondaryAction = { label: \"Learn more\", href: \"#\" },\n  className,\n  ...props\n}: GodRaysHeroProps) {\n  return (\n    <section\n      data-slot=\"god-rays-hero\"\n      className={cn(\n        \"dark relative isolate flex min-h-[640px] w-full items-center justify-center overflow-hidden bg-black px-6 py-24 text-white\",\n        className\n      )}\n      {...props}\n    >\n      <GodRays\n        aria-hidden\n        className=\"absolute inset-0 -z-10 size-full\"\n        offsetX={0}\n        offsetY={-0.55}\n        colorBack=\"#000000\"\n        colorBloom=\"#0000ff\"\n        colors={[\"#a600ff6e\", \"#6200fff0\", \"#ffffff\", \"#33fff5\"]}\n        density={0.3}\n        spotty={0.3}\n        midIntensity={0.4}\n        midSize={0.2}\n        intensity={0.8}\n        bloom={0.4}\n        speed={0.75}\n      />\n      <div className=\"absolute inset-x-0 bottom-0 -z-10 h-1/2 bg-linear-to-t from-black to-transparent\" />\n      <div className=\"flex max-w-2xl flex-col items-center gap-6 pt-24 text-center\">\n        <span className=\"border border-white/20 bg-white/5 px-3 py-1 font-mono text-[11px] tracking-widest text-white/80 uppercase backdrop-blur\">\n          {eyebrow}\n        </span>\n        <h1 className=\"font-heading text-4xl leading-[1.05] tracking-tight text-balance sm:text-6xl\">\n          {title}\n        </h1>\n        <p className=\"max-w-lg text-base text-pretty text-white/70 sm:text-lg\">\n          {description}\n        </p>\n        <div className=\"flex flex-wrap items-center justify-center gap-3\">\n          <a\n            href={primaryAction.href}\n            className={cn(\n              buttonVariants({ size: \"lg\" }),\n              \"bg-white text-black hover:bg-white/80\"\n            )}\n          >\n            {primaryAction.label}\n          </a>\n          <a\n            href={secondaryAction.href}\n            className={buttonVariants({ size: \"lg\", variant: \"outline\" })}\n          >\n            {secondaryAction.label}\n          </a>\n        </div>\n      </div>\n    </section>\n  )\n}\n\nexport { GodRaysHero }\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "sections",
    "hero"
  ],
  "type": "registry:block"
}