{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "retro-grid",
  "title": "Retro Grid",
  "description": "Perspective grid scrolling forever toward the horizon.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/velora/retro-grid.tsx",
      "content": "import { cn } from \"@/lib/utils\";\n\ninterface RetroGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Perspective angle of the grid plane */\n  angle?: number;\n  cellSize?: number;\n  opacity?: number;\n}\n\n/**\n * Scrolling perspective grid backdrop. Place inside a\n * `relative overflow-hidden` section.\n */\nexport function RetroGrid({\n  className,\n  angle = 55,\n  cellSize = 56,\n  opacity = 0.4,\n  ...props\n}: RetroGridProps) {\n  return (\n    <div\n      aria-hidden\n      data-slot=\"retro-grid\"\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden [perspective:240px]\",\n        className\n      )}\n      style={{ opacity }}\n      {...props}\n    >\n      <div\n        className=\"absolute inset-0\"\n        style={{ transform: `rotateX(${angle}deg)` }}\n      >\n        <div\n          className=\"motion-safe:animate-retro-grid [inset:0%_0px] [margin-left:-200%] [transform-origin:100%_0_0] absolute h-[300vh] w-[600vw] [background-image:linear-gradient(to_right,var(--grid-line)_1px,transparent_0),linear-gradient(to_bottom,var(--grid-line)_1px,transparent_0)] [background-repeat:repeat]\"\n          style={\n            {\n              backgroundSize: `${cellSize}px ${cellSize}px`,\n              \"--grid-line\":\n                \"color-mix(in oklab, var(--border) 90%, transparent)\",\n            } as React.CSSProperties\n          }\n        />\n      </div>\n      <div className=\"absolute inset-0 bg-gradient-to-t from-background via-transparent to-background\" />\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/velora/retro-grid.tsx"
    }
  ],
  "cssVars": {
    "theme": {
      "animate-retro-grid": "retro-grid 18s linear infinite"
    }
  },
  "css": {
    "@keyframes retro-grid": {
      "from": {
        "transform": "translateY(-50%)"
      },
      "to": {
        "transform": "translateY(0)"
      }
    }
  },
  "type": "registry:ui"
}