{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "flickering-grid",
  "title": "Flickering Grid",
  "description": "Grid of squares fading in and out on staggered timers.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/velora/flickering-grid.tsx",
      "content": "import { cn } from \"@/lib/utils\";\n\ninterface FlickeringGridProps {\n  /** Square size in px */\n  squareSize?: number;\n  /** Gap between squares in px */\n  gap?: number;\n  /** Number of columns and rows to render */\n  columns?: number;\n  rows?: number;\n  className?: string;\n}\n\n/**\n * Grid of squares that fade in and out on staggered timers. Rendered as a\n * plain DOM grid with CSS animation delays — no canvas, no dependency.\n */\nexport function FlickeringGrid({\n  squareSize = 4,\n  gap = 6,\n  columns = 40,\n  rows = 20,\n  className,\n}: FlickeringGridProps) {\n  const cells = columns * rows;\n\n  return (\n    <div\n      aria-hidden\n      data-slot=\"flickering-grid\"\n      style={{\n        gridTemplateColumns: `repeat(${columns}, ${squareSize}px)`,\n        gap,\n      }}\n      className={cn(\n        \"pointer-events-none absolute inset-0 grid h-full w-full justify-center overflow-hidden\",\n        className\n      )}\n    >\n      {Array.from({ length: cells }).map((_, i) => (\n        <span\n          key={i}\n          // Static under reduced motion: rest halfway between the two flicker levels.\n          className=\"rounded-[1px] bg-current motion-safe:animate-flicker motion-reduce:opacity-[calc((var(--flicker-max,0.45)_+_var(--flicker-min,0.08))/2)]\"\n          style={{\n            width: squareSize,\n            height: squareSize,\n            // Deterministic pseudo-random delay: stable between server and client.\n            animationDelay: `${((i * 37) % 100) / 25}s`,\n            animationDuration: `${2 + ((i * 13) % 5) * 0.4}s`,\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/velora/flickering-grid.tsx"
    }
  ],
  "cssVars": {
    "theme": {
      "animate-flicker": "flicker 3s steps(1, end) infinite"
    }
  },
  "css": {
    "@keyframes flicker": {
      "0%, 100%": {
        "opacity": "var(--flicker-max, 0.45)"
      },
      "50%": {
        "opacity": "var(--flicker-min, 0.08)"
      }
    }
  },
  "type": "registry:ui"
}