{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "grid-background",
  "type": "registry:ui",
  "title": "Precision Cartesian Grid",
  "description": "Infinite architectural coordinate grid with radial spotlight vignette.",
  "category": "backgrounds",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "tags": [
    "background",
    "grid",
    "cartesian",
    "blueprint"
  ],
  "files": [
    {
      "path": "registry/backgrounds/grid-background/grid-background.tsx",
      "type": "registry:ui",
      "target": "components/ui/grid-background.tsx",
      "content": "import React from 'react'\nimport { cn } from '@/lib/utils'\n\nexport interface GridBackgroundProps {\n  children?: React.ReactNode\n  size?: 'sm' | 'md' | 'lg'\n  withBeam?: boolean\n  className?: string\n}\n\nexport const GridBackground: React.FC<GridBackgroundProps> = ({\n  children,\n  size = 'md',\n  withBeam = true,\n  className,\n}) => {\n  const gridSizeMap = {\n    sm: '24px 24px',\n    md: '40px 40px',\n    lg: '64px 64px',\n  }\n\n  return (\n    <div className={cn('relative min-h-[300px] w-full overflow-hidden rounded-3xl border border-white/10 bg-[#070709] p-6', className)}>\n      {/* Grid Pattern */}\n      <div\n        style={{\n          backgroundSize: gridSizeMap[size],\n          backgroundImage: `\n            linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),\n            linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px)\n          `,\n        }}\n        className=\"pointer-events-none absolute inset-0\"\n      />\n\n      {/* Radial fade mask */}\n      <div className=\"pointer-events-none absolute inset-0 bg-radial-gradient from-transparent via-[#070709]/50 to-[#070709]\" />\n\n      {/* Scanning Beam */}\n      {withBeam && (\n        <div className=\"pointer-events-none absolute inset-x-0 h-24 -top-24 animate-[moveDown_8s_linear_infinite] bg-gradient-to-b from-transparent via-cyan-500/10 to-transparent\" />\n      )}\n\n      <div className=\"relative z-10 flex h-full flex-col justify-between\">\n        {children || (\n          <div className=\"my-auto text-center font-mono\">\n            <span className=\"text-xs uppercase tracking-widest text-cyan-400\">ENGINEERING GRAPH</span>\n            <h3 className=\"mt-2 text-xl font-bold text-zinc-900 dark:text-white\">Technical Coordinate Grid</h3>\n            <p className=\"mt-1 text-xs text-zinc-600 dark:text-zinc-400\">Fine-lined hardware blueprint grid with scanning telemetry beam.</p>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"
    }
  ],
  "tailwind": {
    "required": true
  },
  "framework": [
    "react",
    "nextjs",
    "vite"
  ]
}