{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-grid-pattern",
  "title": "Animated Grid Pattern",
  "description": "Decorative grid background with squares that fade in and out at random.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/animated-grid-pattern/animated-grid-pattern.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\n/** Props for {@link AnimatedGridPattern}. */\nexport type AnimatedGridPatternProps = React.ComponentPropsWithoutRef<\"svg\"> & {\n  /** Cell height in pixels. Defaults to `40`. */\n  height?: number;\n  /** Count of pulsing highlighted cells. Defaults to `24`. */\n  squares?: number;\n  /** Cell width in pixels. Defaults to `40`. */\n  width?: number;\n};\n\ntype Square = {\n  delay: number;\n  duration: number;\n  x: number;\n  y: number;\n};\n\nfunction createSquares(count: number): Square[] {\n  return Array.from({ length: count }, () => ({\n    delay: Math.random() * 5,\n    duration: 3 + Math.random() * 4,\n    x: Math.floor(Math.random() * 40),\n    y: Math.floor(Math.random() * 40),\n  }));\n}\n\nfunction GridSquare({\n  height,\n  square,\n  width,\n}: {\n  height: number;\n  square: Square;\n  width: number;\n}) {\n  return (\n    <rect\n      className=\"animate-pulse fill-foreground/10 motion-reduce:animate-none\"\n      height={height - 1}\n      style={{\n        animationDelay: `${square.delay}s`,\n        animationDuration: `${square.duration}s`,\n      }}\n      width={width - 1}\n      x={square.x * width + 1}\n      y={square.y * height + 1}\n    />\n  );\n}\n\n/**\n * Animated SVG grid with cells that pulse in and out at staggered intervals.\n *\n * Respects `prefers-reduced-motion`: the cells hold a steady fill.\n *\n * @example\n * ```tsx\n * <AnimatedGridPattern squares={32} />\n * ```\n */\nexport const AnimatedGridPattern = ({\n  className,\n  height = 40,\n  ref,\n  squares = 24,\n  width = 40,\n  ...props\n}: AnimatedGridPatternProps & { ref?: React.Ref<SVGSVGElement> }) => {\n  const [cells] = React.useState(() => createSquares(squares));\n  const patternId = React.useId();\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={cn(\n        \"pointer-events-none absolute inset-0 h-full w-full text-border\",\n        className,\n      )}\n      ref={ref}\n      {...props}\n    >\n      <defs>\n        <pattern\n          height={height}\n          id={patternId}\n          patternUnits=\"userSpaceOnUse\"\n          width={width}\n        >\n          <path\n            d={`M ${String(width)} 0 L 0 0 0 ${String(height)}`}\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth={1}\n          />\n        </pattern>\n      </defs>\n      <rect fill={`url(#${patternId})`} height=\"100%\" width=\"100%\" />\n      {cells.map((square, index) => (\n        <GridSquare height={height} key={index} square={square} width={width} />\n      ))}\n    </svg>\n  );\n};\nAnimatedGridPattern.displayName = \"AnimatedGridPattern\";\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}