{
  "name": "background-boxes",
  "type": "registry:ui",
  "dependencies": [
    "mini-svg-data-uri",
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/background-boxes.tsx",
      "content": "\"use client\";\nimport React from \"react\";\nimport { motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nexport const BoxesCore = ({ className, ...rest }: { className?: string }) => {\n  const rows = new Array(150).fill(1);\n  const cols = new Array(100).fill(1);\n  let colors = [\n    \"#93c5fd\",\n    \"#f9a8d4\",\n    \"#86efac\",\n    \"#fde047\",\n    \"#fca5a5\",\n    \"#d8b4fe\",\n    \"#93c5fd\",\n    \"#a5b4fc\",\n    \"#c4b5fd\",\n  ];\n  const getRandomColor = () => {\n    return colors[Math.floor(Math.random() * colors.length)];\n  };\n\n  return (\n    <div\n      style={{\n        transform: `translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)`,\n      }}\n      className={cn(\n        \"absolute -top-1/4 left-1/4 z-0 flex h-full w-full -translate-x-1/2 -translate-y-1/2 p-4\",\n        className,\n      )}\n      {...rest}\n    >\n      {rows.map((_, i) => (\n        <motion.div\n          key={`row` + i}\n          className=\"relative h-8 w-16 border-l border-slate-700\"\n        >\n          {cols.map((_, j) => (\n            <motion.div\n              whileHover={{\n                backgroundColor: `${getRandomColor()}`,\n                transition: { duration: 0 },\n              }}\n              animate={{\n                transition: { duration: 2 },\n              }}\n              key={`col` + j}\n              className=\"relative h-8 w-16 border-t border-r border-slate-700\"\n            >\n              {j % 2 === 0 && i % 2 === 0 ? (\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  strokeWidth=\"1.5\"\n                  stroke=\"currentColor\"\n                  className=\"pointer-events-none absolute -top-[14px] -left-[22px] h-6 w-10 stroke-[1px] text-slate-700\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    d=\"M12 6v12m6-6H6\"\n                  />\n                </svg>\n              ) : null}\n            </motion.div>\n          ))}\n        </motion.div>\n      ))}\n    </div>\n  );\n};\n\nexport const Boxes = React.memo(BoxesCore);\n",
      "type": "registry:ui",
      "target": "components/ui/background-boxes.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Background Boxes"
}