{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"dithering-hero","title":"Dithering Hero","description":"A split hero section with an ordered-dither sphere slowly turning beside the headline.","dependencies":["@paper-design/shaders-react"],"registryDependencies":["button"],"files":[{"path":"registry/shaders/dithering-hero/dithering-hero.tsx","content":"import { Dithering, type DitheringProps } from \"@paper-design/shaders-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\ntype DitheringHeroProps = 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  colorBack?: string\n  colorFront?: string\n  shape?: DitheringProps[\"shape\"]\n}\n\nfunction DitheringHero({\n  eyebrow = \"v2.0 / Out now\",\n  title = \"Pixels with a point of view\",\n  description = \"An ordered-dither sphere that slowly turns behind your headline. Retro texture, modern GPU.\",\n  primaryAction = { label: \"Start building\", href: \"#\" },\n  secondaryAction = { label: \"Read the docs\", href: \"#\" },\n  colorBack = \"#000000\",\n  colorFront = \"#00b2ff\",\n  shape = \"sphere\",\n  className,\n  ...props\n}: DitheringHeroProps) {\n  return (\n    <section\n      data-slot=\"dithering-hero\"\n      className={cn(\n        \"dark relative isolate grid min-h-[640px] w-full overflow-hidden text-white md:grid-cols-2\",\n        className\n      )}\n      style={{ backgroundColor: colorBack }}\n      {...props}\n    >\n      <div className=\"flex flex-col justify-center gap-6 px-6 py-24 md:px-12 lg:px-16\">\n        <span\n          className=\"font-mono text-[11px] tracking-widest uppercase\"\n          style={{ color: colorFront }}\n        >\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-md text-base text-pretty text-white/70 sm:text-lg\">\n          {description}\n        </p>\n        <div className=\"flex flex-wrap items-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      <div className=\"relative min-h-80\">\n        <Dithering\n          aria-hidden\n          className=\"absolute inset-0 size-full\"\n          colorBack={colorBack}\n          colorFront={colorFront}\n          shape={shape}\n          type=\"4x4\"\n          size={2}\n          scale={0.8}\n          speed={0.6}\n        />\n      </div>\n    </section>\n  )\n}\n\nexport { DitheringHero }\n","type":"registry:component"}],"categories":["sections","hero"],"type":"registry:block"}