{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"neuro-noise-stats","title":"Neuro Noise Stats","description":"A band of headline numbers over a glowing web of fibers, like traffic moving through a network.","dependencies":["@paper-design/shaders-react"],"files":[{"path":"registry/shaders/neuro-noise-stats/neuro-noise-stats.tsx","content":"import { NeuroNoise } from \"@paper-design/shaders-react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Stat = {\n  value: string\n  label: string\n}\n\nconst DEFAULT_STATS: Stat[] = [\n  { value: \"10M+\", label: \"API requests served every day\" },\n  { value: \"99.99%\", label: \"Uptime over the last 12 months\" },\n  { value: \"48ms\", label: \"Median response time worldwide\" },\n  { value: \"35\", label: \"Edge regions on six continents\" },\n]\n\ntype NeuroNoiseStatsProps = React.ComponentProps<\"section\"> & {\n  eyebrow?: string\n  title?: string\n  stats?: Stat[]\n  colorBack?: string\n  /** Color of the network's glow. */\n  colorMid?: string\n  /** Color of the brightest fibers. */\n  colorFront?: string\n  speed?: number\n}\n\nfunction NeuroNoiseStats({\n  eyebrow = \"By the numbers\",\n  title = \"Infrastructure you can stop thinking about\",\n  stats = DEFAULT_STATS,\n  colorBack = \"#02040f\",\n  colorMid = \"#2563eb\",\n  colorFront = \"#a5f3fc\",\n  speed = 0.4,\n  className,\n  style,\n  ...props\n}: NeuroNoiseStatsProps) {\n  return (\n    <section\n      data-slot=\"neuro-noise-stats\"\n      className={cn(\n        \"dark relative isolate flex w-full flex-col gap-14 overflow-hidden px-6 py-20 text-white md:px-12 lg:px-16\",\n        className\n      )}\n      style={{ backgroundColor: colorBack, ...style }}\n      {...props}\n    >\n      {/*\n        A glowing web of fibers, like traffic moving through a network. It\n        fades out towards the title so the headline stays easy to read.\n      */}\n      <NeuroNoise\n        aria-hidden\n        className=\"absolute inset-0 -z-10 size-full mask-t-from-30% mask-t-to-95% opacity-70\"\n        colorBack={colorBack}\n        colorMid={colorMid}\n        colorFront={colorFront}\n        brightness={0.05}\n        contrast={0.4}\n        speed={speed}\n        scale={0.8}\n      />\n      <div className=\"flex max-w-2xl flex-col gap-4\">\n        <span\n          className=\"font-mono text-[11px] tracking-widest uppercase\"\n          style={{ color: colorFront }}\n        >\n          {eyebrow}\n        </span>\n        <h2 className=\"font-heading text-3xl leading-tight tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h2>\n      </div>\n      <dl className=\"grid grid-cols-2 border-t border-white/10 lg:grid-cols-4\">\n        {stats.map((stat) => (\n          // The label comes first for screen readers, the number first on screen.\n          <div\n            key={stat.label}\n            className=\"flex flex-col-reverse justify-end gap-2 border-white/10 py-8 pr-6 not-first:border-l not-first:pl-6 max-lg:nth-3:border-l-0 max-lg:nth-3:pl-0 max-lg:nth-[n+3]:border-t\"\n          >\n            <dt className=\"max-w-48 text-sm text-pretty text-white/60\">\n              {stat.label}\n            </dt>\n            <dd className=\"font-heading text-4xl tracking-tight tabular-nums sm:text-6xl\">\n              {stat.value}\n            </dd>\n          </div>\n        ))}\n      </dl>\n    </section>\n  )\n}\n\nexport { NeuroNoiseStats, type Stat }\n","type":"registry:component"}],"categories":["sections","stats"],"type":"registry:block"}