{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "retro-grid",
  "title": "Retro Grid",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A perspective floor of grid lines gliding toward you under a glowing horizon, tinted with any theme color, tilt and cell size adjustable, still under reduced motion.",
  "dependencies": [
    "motion@^12"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/retro-grid.tsx",
      "content": "// Ballmac UI: Retro Grid. https://ui.ballmac.com/components/retro-grid\n\"use client\"\n\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype GridTone = \"foreground\" | \"primary\" | \"chart-1\" | \"chart-2\" | \"chart-3\" | \"chart-4\" | \"chart-5\"\n\nconst VAR: Record<GridTone, string> = {\n  foreground: \"var(--foreground)\",\n  primary: \"var(--primary)\",\n  \"chart-1\": \"var(--chart-1)\",\n  \"chart-2\": \"var(--chart-2)\",\n  \"chart-3\": \"var(--chart-3)\",\n  \"chart-4\": \"var(--chart-4)\",\n  \"chart-5\": \"var(--chart-5)\",\n}\n\ntype RetroGridProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  /** Tilt of the floor in degrees. Higher is flatter and looks deeper. */\n  angle?: number\n  /** Size of one grid cell in pixels, at the front of the floor. */\n  cellSize?: number\n  /** Line color. */\n  tone?: GridTone\n  /** Seconds the floor takes to slide forward by one cell. Higher is slower. */\n  speed?: number\n  /** Soft glow along the horizon. */\n  glow?: boolean\n}\n\n/** A perspective floor of grid lines that glides toward you, with a glowing horizon. Decorative. */\nfunction RetroGrid({ angle = 62, cellSize = 64, tone = \"foreground\", speed = 1.4, glow = true, className, ...props }: RetroGridProps) {\n  const reduce = useReducedMotion()\n  const line = `color-mix(in oklab, ${VAR[tone]} 52%, transparent)`\n  return (\n    <div\n      data-slot=\"retro-grid\"\n      aria-hidden=\"true\"\n      className={cn(\"pointer-events-none absolute inset-0 overflow-hidden opacity-90 [perspective:240px]\", className)}\n      {...props}\n    >\n      <div className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_0%,black_38%)]\" style={{ transform: `rotateX(${angle}deg)` }}>\n        <motion.div\n          className=\"absolute -inset-x-[200%] -top-[100%] h-[300%]\"\n          style={{\n            backgroundImage: `linear-gradient(to right, ${line} 1.5px, transparent 0), linear-gradient(to bottom, ${line} 1.5px, transparent 0)`,\n            backgroundSize: `${cellSize}px ${cellSize}px`,\n          }}\n          animate={reduce ? undefined : { backgroundPositionY: [0, cellSize] }}\n          transition={{ duration: speed, repeat: Infinity, ease: \"linear\" }}\n        />\n      </div>\n      {glow && (\n        <span\n          className=\"absolute inset-x-0 top-0 h-2/5\"\n          style={{ background: `radial-gradient(70% 90% at 50% 0%, color-mix(in oklab, ${VAR[tone === \"foreground\" ? \"chart-1\" : tone]} 28%, transparent), transparent 75%)` }}\n        />\n      )}\n      <span className=\"absolute inset-0 bg-gradient-to-b from-background via-transparent to-transparent\" />\n    </div>\n  )\n}\n\nexport { RetroGrid, type RetroGridProps, type GridTone }\n",
      "type": "registry:ui",
      "target": "@components/ballmac/retro-grid.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "grid",
      "perspective",
      "synthwave",
      "background",
      "hero"
    ],
    "version": "1.0.0",
    "updated": "2026-10-01",
    "ai": {
      "summary": "Place <RetroGrid angle cellSize tone speed glow /> inside a relative, overflow-hidden parent and put content above it. It fades into the page background at the horizon.",
      "whenToUse": [
        "Landing page heroes with a technical or retro mood",
        "Under a centered headline and call to action"
      ],
      "whenNotToUse": [
        "Dense UI behind small text",
        "Pages with many competing backgrounds"
      ],
      "composesWith": [
        "grid-pattern",
        "light-rays",
        "aurora-background"
      ],
      "a11y": [
        {
          "keys": "Screen readers",
          "action": "Decorative: aria-hidden and pointer-events-none"
        },
        {
          "keys": "Reduced motion",
          "action": "The floor is still"
        }
      ],
      "customization": [
        "angle",
        "cellSize",
        "tone",
        "speed",
        "glow"
      ]
    },
    "examples": [
      "retro-grid-demo",
      "retro-grid-tones"
    ],
    "url": "https://ui.ballmac.com/components/retro-grid"
  },
  "categories": [
    "backgrounds"
  ],
  "type": "registry:ui"
}