{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "matrix-background",
  "type": "registry:block",
  "title": "Matrix background",
  "description": "Matrix background",
  "files": [
    {
      "path": "components/usages/matrixbackgroundusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport MatrixBackground from \"@/registry/open-source/matrix-background\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<div className=\"h-[50vh] w-full relative\">\n\t\t\t\t<MatrixBackground />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/matrixbackgroundusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport MatrixBackground from \"@/registry/open-source/matrix-background\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<div className=\"h-[50vh] w-full relative\">\n\t\t\t\t<MatrixBackground />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/matrix-background.tsx",
      "content": "import React, { useEffect, useRef } from \"react\";\n\n// Credit:\n// https://eclairui.gopx.dev/components/backgrounds/matrix\n\ninterface MatrixBackgroundProps {\n\tcolor?: string;\n\tfontSize?: number;\n\tclassName?: string;\n\tspeed?: number;\n}\n\nconst MatrixBackground: React.FC<MatrixBackgroundProps> = ({\n\tcolor = \"#0F0\",\n\tfontSize = 14,\n\tclassName = \"\",\n\tspeed = 1,\n}) => {\n\tconst canvasRef = useRef<HTMLCanvasElement>(null);\n\n\tuseEffect(() => {\n\t\tconst canvas = canvasRef.current;\n\t\tif (!canvas) return;\n\n\t\tconst ctx = canvas.getContext(\"2d\");\n\t\tif (!ctx) return;\n\n\t\tconst resizeCanvas = () => {\n\t\t\tcanvas.width = window.innerWidth;\n\t\t\tcanvas.height = window.innerHeight;\n\t\t};\n\n\t\tresizeCanvas();\n\t\twindow.addEventListener(\"resize\", resizeCanvas);\n\n\t\tlet animationFrameId: number;\n\n\t\tconst columns = Math.floor(canvas.width / fontSize);\n\t\tconst drops: number[] = new Array(columns).fill(1);\n\n\t\tconst chars =\n\t\t\t\"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%^&*()_+\";\n\n\t\tlet lastTime = 0;\n\t\tconst interval = 33; // ~30 fps\n\n\t\tconst draw = (currentTime: number) => {\n\t\t\tanimationFrameId = requestAnimationFrame(draw);\n\n\t\t\tif (currentTime - lastTime < interval) return;\n\t\t\tlastTime = currentTime;\n\n\t\t\tctx.fillStyle = \"rgba(0, 0, 0, 0.05)\";\n\t\t\tctx.fillRect(0, 0, canvas.width, canvas.height);\n\n\t\t\tctx.fillStyle = color;\n\t\t\tctx.font = `${fontSize}px monospace`;\n\n\t\t\tfor (let i = 0; i < drops.length; i++) {\n\t\t\t\tconst text = chars[Math.floor(Math.random() * chars.length)];\n\t\t\t\tctx.fillText(text, i * fontSize, drops[i] * fontSize);\n\n\t\t\t\tif (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {\n\t\t\t\t\tdrops[i] = 0;\n\t\t\t\t}\n\t\t\t\tdrops[i] += speed; // Use the speed prop to control fall rate\n\t\t\t}\n\t\t};\n\n\t\tanimationFrameId = requestAnimationFrame(draw);\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\"resize\", resizeCanvas);\n\t\t\tcancelAnimationFrame(animationFrameId);\n\t\t};\n\t}, [color, fontSize, speed]);\n\n\treturn (\n\t\t<canvas\n\t\t\tref={canvasRef}\n\t\t\tclassName={`pointer-events-none ${className}`}\n\t\t\tstyle={{\n\t\t\t\tposition: \"absolute\",\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\twidth: \"100%\",\n\t\t\t\theight: \"100%\",\n\t\t\t}}\n\t\t/>\n\t);\n};\n\nexport default MatrixBackground;\n",
      "type": "registry:ui"
    }
  ]
}