neural background added

Author: afsar-dev

public/r/future-navbar.json

@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "./src/components/nurui/futrue-navbar.tsx",
-      "content": "\"use client\";\nimport { createContext, useState } from \"react\";\nimport { Github, Zap } from \"lucide-react\";\nimport { Frame } from \"@/components/nurui/frame\";\nimport Link from \"next/link\";\nimport FutureButton from \"./future-button\";\n\nexport const MobileMenuContext = createContext<{\n  showMenu: boolean;\n  setShowMenu: React.Dispatch<React.SetStateAction<boolean>>;\n}>({\n  showMenu: true,\n  setShowMenu: () => {},\n});\n\nfunction FutureNavbar() {\n  const [showMenu, setShowMenu] = useState(false);\n\n  // 🎨 Direct color constants\n  const primaryStroke = \"#4f46e5\"; // Indigo\n  const primaryFill = \"rgba(79, 70, 229, 0.2)\";\n\n  return (\n    <MobileMenuContext.Provider value={{ showMenu, setShowMenu }}>\n      <div className=\"h-16 mt-2 mx-2 lg:-mt-px lg:-mx-px flex w-full top-0 inset-x-0 z-50\">\n        <div className=\"size-full relative -mr-[11px] hidden lg:block\">\n          <Frame\n            className=\"drop-shadow-2xl\"\n            paths={JSON.parse(\n              `[{\n                \"show\": true,\n                \"style\": {\"strokeWidth\": \"1\", \"stroke\": \"${primaryStroke}\", \"fill\": \"rgba(79,70,229,0.08)\"},\n                \"path\":[[\"M\",\"0\",\"0\"],[\"L\",\"100% - 6\",\"0\"],[\"L\",\"100% - 11\",\"100% - 64\"],[\"L\",\"100% + 0\",\"0% + 29\"],[\"L\",\"0\",\"11\"],[\"L\",\"0\",\"0\"]]\n              },{\n                \"show\": true,\n                \"style\": {\"strokeWidth\": \"1\", \"stroke\": \"${primaryStroke}38\", \"fill\": \"transparent\"},\n                \"path\":[[\"M\",\"0\",\"14\"],[\"L\",\"100% - 7\",\"33\"]]\n              }]`,\n            )}\n          />\n        </div>\n        <div className=\"flex lg:container h-full relative flex-none w-full\">\n          <div className=\"flex-none h-full px-14 relative w-full lg:w-auto\">\n            <Frame\n              enableBackdropBlur\n              className=\"drop-shadow-2xl\"\n              paths={JSON.parse(\n                `[{\n                  \"show\":true,\n                  \"style\":{\"strokeWidth\":\"1\",\"stroke\":\"${primaryStroke}\",\"fill\":\"${primaryFill}\"},\n                  \"path\":[[\"M\",\"6\",\"0\"],[\"L\",\"100% - 6.5\",\"0\"],[\"L\",\"100% + 0\",\"0% + 9\"],[\"L\",\"100% - 28\",\"100% - 15\"],[\"L\",\"162\",\"100% - 15\"],[\"L\",\"164\",\"100% - 30\"],[\"L\",\"153\",\"100% - 15\"],[\"L\",\"27\",\"100% - 15\"],[\"L\",\"0\",\"0% + 8\"],[\"L\",\"6\",\"0\"]]\n                },{\n                  \"show\":true,\n                  \"style\":{\"strokeWidth\":\"1\",\"stroke\":\"${primaryStroke}91\",\"fill\":\"transparent\"},\n                  \"path\":[[\"M\",\"32\",\"100% - 15\"],[\"L\",\"0% + 152.5\",\"100% - 15\"],[\"L\",\"0% + 163.5\",\"100% - 29\"],[\"L\",\"0% + 161.5\",\"100% - 15\"],[\"L\",\"100% - 32.5\",\"100% - 15\"],[\"L\",\"100% - 36.5\",\"100% - 7\"],[\"L\",\"0% + 163.5\",\"100% - 7\"],[\"L\",\"0% + 165.5\",\"100% - 23\"],[\"L\",\"0% + 152.5\",\"100% - 7\"],[\"L\",\"37\",\"100% - 7\"],[\"L\",\"32\",\"100% - 15\"]]\n                },{\n                  \"show\":true,\n                  \"style\":{\"strokeWidth\":\"1\",\"stroke\":\"${primaryStroke}3B\",\"fill\":\"transparent\"},\n                  \"path\":[[\"M\",\"0\",\"0% + 33\"],[\"M\",\"4\",\"0% + 33\"],[\"L\",\"0% + 18.5\",\"100% - 12\"],[\"L\",\"0% + 23.5\",\"100% - 12\"],[\"L\",\"29\",\"100% + 0\"],[\"L\",\"155\",\"100% - 0\"],[\"L\",\"160\",\"100% - 8\"],[\"L\",\"161\",\"100% - 0\"],[\"L\",\"100% - 28\",\"100% + 0\"],[\"L\",\"100% - 23\",\"100% - 11\"],[\"L\",\"100% - 17\",\"100% - 11\"],[\"L\",\"100% - 14\",\"100% - 14\"],[\"L\",\"100% + 0\",\"100% - 14\"]]\n                }]`,\n              )}\n            />\n            <div className=\"flex items-center mt-2.5 relative\">\n              <Link href=\"/\" className=\"me-16 font-bold\">\n                COSMIC UI\n              </Link>\n              <div className=\"hidden lg:flex gap-8 font-medium\">\n                <Link href=\"/docs\">Docs</Link>\n                <Link href=\"/docs\">Components</Link>\n                <Link href=\"/docs\">About</Link>\n              </div>\n              <div\n                onClick={() => setShowMenu(true)}\n                className=\"cursor-pointer ms-auto flex items-center gap-2 lg:hidden font-medium\"\n              >\n                <Zap className=\"size-4\" />\n                Menu\n              </div>\n            </div>\n          </div>\n          <div className=\"w-full relative -ml-[25px] lg:flex justify-end pe-8 hidden\">\n            <Frame\n              enableBackdropBlur\n              className=\"drop-shadow-2xl\"\n              paths={JSON.parse(\n                `[{\n                  \"show\":true,\n                  \"style\":{\"strokeWidth\":\"1\",\"stroke\":\"${primaryStroke}80\",\"fill\":\"rgba(79,70,229,0.1)\"},\n                  \"path\":[[\"M\",\"19\",\"0\"],[\"L\",\"100% - 5\",\"0\"],[\"L\",\"100% + 0\",\"0% + 7\"],[\"L\",\"100% - 36\",\"100% - 20\"],[\"L\",\"0\",\"100% - 20\"],[\"L\",\"25\",\"8.999992370605469\"],[\"L\",\"19\",\"1\"]]\n                },{\n                  \"show\":true,\n                  \"style\":{\"strokeWidth\":\"1\",\"stroke\":\"${primaryStroke}3B\",\"fill\":\"transparent\"},\n                  \"path\":[[\"M\",\"25\",\"100% - 14\"],[\"L\",\"100% - 32\",\"100% - 13\"],[\"L\",\"100% - 15\",\"36\"]]\n                }]`,\n              )}\n            />\n            <div className=\"flex items-center -mt-3.5\">\n              <FutureButton\n                shape=\"flat\"\n                className=\"font-normal px-9 py-[0.45rem] text-xs text-foreground\"\n              >\n                <div className=\"me-10\">Search Docs…</div>\n                <div className=\"ms-auto\">⌘+k</div>\n              </FutureButton>\n              <a\n                target=\"_blank\"\n                href=\"https://github.com/afsar-dev/Nurui/stargazers\"\n              >\n                <FutureButton shape=\"flat\" className=\"py-[0.45rem] px-6 ms-1 \">\n                  <Github className=\"size-4\" />\n                </FutureButton>\n              </a>\n            </div>\n          </div>\n        </div>\n        <div className=\"size-full relative -ml-[18px] hidden lg:block\">\n          <Frame\n            paths={JSON.parse(\n              `[{\n                \"show\":true,\n                \"style\":{\"strokeWidth\":\"1\",\"stroke\":\"${primaryStroke}E6\",\"fill\":\"rgba(79,70,229,0.08)\"},\n                \"path\":[[\"M\",\"12\",\"0\"],[\"L\",\"100% + 0\",\"0\"],[\"L\",\"100% + 0\",\"0% + 16\"],[\"L\",\"0\",\"100% - 42\"],[\"L\",\"18\",\"7\"],[\"L\",\"12\",\"0\"]]\n              },{\n                \"show\":true,\n                \"style\":{\"strokeWidth\":\"1\",\"stroke\":\"${primaryStroke}3B\",\"fill\":\"transparent\"},\n                \"path\":[[\"M\",\"3\",\"100% - 36\"],[\"L\",\"100% + 0\",\"20\"]]\n              }]`,\n            )}\n          />\n        </div>\n      </div>\n    </MobileMenuContext.Provider>\n  );\n}\n\nexport default FutureNavbar;\n",
+      "content": "\"use client\";\nimport { createContext, useState } from \"react\";\nimport { Github, Zap } from \"lucide-react\";\nimport { Frame } from \"@/components/nurui/frame\";\nimport Link from \"next/link\";\nimport FutureButton from \"./future-button\";\n\nexport const MobileMenuContext = createContext<{\n  showMenu: boolean;\n  setShowMenu: React.Dispatch<React.SetStateAction<boolean>>;\n}>({\n  showMenu: true,\n  setShowMenu: () => {},\n});\n\nfunction FutureNavbar() {\n  const [showMenu, setShowMenu] = useState(false);\n\n  // 🎨 Direct color constants\n  const primaryStroke = \"#4f46e5\"; // Indigo\n  const primaryFill = \"rgba(79, 70, 229, 0.2)\";\n\n  return (\n    <MobileMenuContext.Provider value={{ showMenu, setShowMenu }}>\n      <div className=\"h-16 mt-2 mx-2 lg:-mt-px lg:-mx-px flex w-full top-0 inset-x-0 z-40\">\n        <div className=\"size-full relative -mr-[11px] hidden lg:block\">\n          <Frame\n            className=\"drop-shadow-2xl\"\n            paths={JSON.parse(\n              `[{\n                \"show\": true,\n                \"style\": {\"strokeWidth\": \"1\", \"stroke\": \"${primaryStroke}\", \"fill\": \"rgba(79,70,229,0.08)\"},\n                \"path\":[[\"M\",\"0\",\"0\"],[\"L\",\"100% - 6\",\"0\"],[\"L\",\"100% - 11\",\"100% - 64\"],[\"L\",\"100% + 0\",\"0% + 29\"],[\"L\",\"0\",\"11\"],[\"L\",\"0\",\"0\"]]\n              },{\n                \"show\": true,\n                \"style\": {\"strokeWidth\": \"1\", \"stroke\": \"${primaryStroke}38\", \"fill\": \"transparent\"},\n                \"path\":[[\"M\",\"0\",\"14\"],[\"L\",\"100% - 7\",\"33\"]]\n              }]`,\n            )}\n          />\n        </div>\n        <div className=\"flex lg:container h-full relative flex-none w-full\">\n          <div className=\"flex-none h-full px-14 relative w-full lg:w-auto\">\n            <Frame\n              enableBackdropBlur\n              className=\"drop-shadow-2xl\"\n              paths={JSON.parse(\n                `[{\n                  \"show\":true,\n                  \"style\":{\"strokeWidth\":\"1\",\"stroke\":\"${primaryStroke}\",\"fill\":\"${primaryFill}\"},\n                  \"path\":[[\"M\",\"6\",\"0\"],[\"L\",\"100% - 6.5\",\"0\"],[\"L\",\"100% + 0\",\"0% + 9\"],[\"L\",\"100% - 28\",\"100% - 15\"],[\"L\",\"162\",\"100% - 15\"],[\"L\",\"164\",\"100% - 30\"],[\"L\",\"153\",\"100% - 15\"],[\"L\",\"27\",\"100% - 15\"],[\"L\",\"0\",\"0% + 8\"],[\"L\",\"6\",\"0\"]]\n                },{\n                  \"show\":true,\n                  \"style\":{\"strokeWidth\":\"1\",\"stroke\":\"${primaryStroke}91\",\"fill\":\"transparent\"},\n                  \"path\":[[\"M\",\"32\",\"100% - 15\"],[\"L\",\"0% + 152.5\",\"100% - 15\"],[\"L\",\"0% + 163.5\",\"100% - 29\"],[\"L\",\"0% + 161.5\",\"100% - 15\"],[\"L\",\"100% - 32.5\",\"100% - 15\"],[\"L\",\"100% - 36.5\",\"100% - 7\"],[\"L\",\"0% + 163.5\",\"100% - 7\"],[\"L\",\"0% + 165.5\",\"100% - 23\"],[\"L\",\"0% + 152.5\",\"100% - 7\"],[\"L\",\"37\",\"100% - 7\"],[\"L\",\"32\",\"100% - 15\"]]\n                },{\n                  \"show\":true,\n                  \"style\":{\"strokeWidth\":\"1\",\"stroke\":\"${primaryStroke}3B\",\"fill\":\"transparent\"},\n                  \"path\":[[\"M\",\"0\",\"0% + 33\"],[\"M\",\"4\",\"0% + 33\"],[\"L\",\"0% + 18.5\",\"100% - 12\"],[\"L\",\"0% + 23.5\",\"100% - 12\"],[\"L\",\"29\",\"100% + 0\"],[\"L\",\"155\",\"100% - 0\"],[\"L\",\"160\",\"100% - 8\"],[\"L\",\"161\",\"100% - 0\"],[\"L\",\"100% - 28\",\"100% + 0\"],[\"L\",\"100% - 23\",\"100% - 11\"],[\"L\",\"100% - 17\",\"100% - 11\"],[\"L\",\"100% - 14\",\"100% - 14\"],[\"L\",\"100% + 0\",\"100% - 14\"]]\n                }]`,\n              )}\n            />\n            <div className=\"flex items-center mt-2.5 relative\">\n              <Link href=\"/\" className=\"me-16 font-bold\">\n                Nur/ui\n              </Link>\n              <div className=\"hidden lg:flex gap-8 font-medium\">\n                <Link href=\"/docs\">Docs</Link>\n                <Link href=\"/docs\">Components</Link>\n                <Link href=\"/docs\">About</Link>\n              </div>\n              <div\n                onClick={() => setShowMenu(true)}\n                className=\"cursor-pointer ms-auto flex items-center gap-2 lg:hidden font-medium\"\n              >\n                <Zap className=\"size-4\" />\n                Menu\n              </div>\n            </div>\n          </div>\n          <div className=\"w-full relative -ml-[25px] lg:flex justify-end pe-8 hidden\">\n            <Frame\n              enableBackdropBlur\n              className=\"drop-shadow-2xl\"\n              paths={JSON.parse(\n                `[{\n                  \"show\":true,\n                  \"style\":{\"strokeWidth\":\"1\",\"stroke\":\"${primaryStroke}80\",\"fill\":\"rgba(79,70,229,0.1)\"},\n                  \"path\":[[\"M\",\"19\",\"0\"],[\"L\",\"100% - 5\",\"0\"],[\"L\",\"100% + 0\",\"0% + 7\"],[\"L\",\"100% - 36\",\"100% - 20\"],[\"L\",\"0\",\"100% - 20\"],[\"L\",\"25\",\"8.999992370605469\"],[\"L\",\"19\",\"1\"]]\n                },{\n                  \"show\":true,\n                  \"style\":{\"strokeWidth\":\"1\",\"stroke\":\"${primaryStroke}3B\",\"fill\":\"transparent\"},\n                  \"path\":[[\"M\",\"25\",\"100% - 14\"],[\"L\",\"100% - 32\",\"100% - 13\"],[\"L\",\"100% - 15\",\"36\"]]\n                }]`,\n              )}\n            />\n            <div className=\"flex items-center -mt-3.5\">\n              <FutureButton\n                shape=\"flat\"\n                className=\"font-normal px-9 py-[0.45rem] text-xs text-foreground\"\n              >\n                <div className=\"me-10\">Search Docs…</div>\n                <div className=\"ms-auto\">⌘+k</div>\n              </FutureButton>\n              <a\n                target=\"_blank\"\n                href=\"https://github.com/afsar-dev/Nurui/stargazers\"\n              >\n                <FutureButton shape=\"flat\" className=\"py-[0.45rem] px-6 ms-1 \">\n                  <Github className=\"size-4\" />\n                </FutureButton>\n              </a>\n            </div>\n          </div>\n        </div>\n        <div className=\"size-full relative -ml-[18px] hidden lg:block\">\n          <Frame\n            paths={JSON.parse(\n              `[{\n                \"show\":true,\n                \"style\":{\"strokeWidth\":\"1\",\"stroke\":\"${primaryStroke}E6\",\"fill\":\"rgba(79,70,229,0.08)\"},\n                \"path\":[[\"M\",\"12\",\"0\"],[\"L\",\"100% + 0\",\"0\"],[\"L\",\"100% + 0\",\"0% + 16\"],[\"L\",\"0\",\"100% - 42\"],[\"L\",\"18\",\"7\"],[\"L\",\"12\",\"0\"]]\n              },{\n                \"show\":true,\n                \"style\":{\"strokeWidth\":\"1\",\"stroke\":\"${primaryStroke}3B\",\"fill\":\"transparent\"},\n                \"path\":[[\"M\",\"3\",\"100% - 36\"],[\"L\",\"100% + 0\",\"20\"]]\n              }]`,\n            )}\n          />\n        </div>\n      </div>\n    </MobileMenuContext.Provider>\n  );\n}\n\nexport default FutureNavbar;\n",
       "type": "registry:component"
     },
     {

public/r/neural-background.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "neural-background",
+  "type": "registry:component",
+  "dependencies": [
+    ""
+  ],
+  "devDependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "./src/components/nurui/hacker-background.tsx",
+      "content": "\"use client\";\nimport React, { useEffect, useRef } from \"react\";\n\ninterface HackerBackgroundProps {\n  color?: string;\n  fontSize?: number;\n  className?: string;\n  speed?: number;\n}\n\nconst HackerBackground: React.FC<HackerBackgroundProps> = ({\n  color = \"#3ca2fa\",\n  fontSize = 15,\n  className = \"\",\n  speed = 1,\n}) => {\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n\n    const ctx = canvas.getContext(\"2d\");\n    if (!ctx) return;\n\n    const resizeCanvas = () => {\n      canvas.width = window.innerWidth;\n      canvas.height = window.innerHeight;\n    };\n\n    resizeCanvas();\n    window.addEventListener(\"resize\", resizeCanvas);\n\n    let animationFrameId: number;\n\n    const columns = Math.floor(canvas.width / fontSize);\n    const drops: number[] = new Array(columns).fill(1);\n\n    const chars =\n      \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%^&*()_+\";\n\n    let lastTime = 0;\n    const interval = 33; // ~30 fps\n\n    const draw = (currentTime: number) => {\n      animationFrameId = requestAnimationFrame(draw);\n\n      if (currentTime - lastTime < interval) return;\n      lastTime = currentTime;\n\n      ctx.fillStyle = \"rgba(0, 0, 0, 0.05)\";\n      ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n      ctx.fillStyle = color;\n      ctx.font = `${fontSize}px monospace`;\n\n      for (let i = 0; i < drops.length; i++) {\n        const text = chars[Math.floor(Math.random() * chars.length)];\n        ctx.fillText(text, i * fontSize, drops[i] * fontSize);\n\n        if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {\n          drops[i] = 0;\n        }\n        drops[i] += speed; // Use the speed prop to control fall rate\n      }\n    };\n\n    animationFrameId = requestAnimationFrame(draw);\n\n    return () => {\n      window.removeEventListener(\"resize\", resizeCanvas);\n      cancelAnimationFrame(animationFrameId);\n    };\n  }, [color, fontSize, speed]);\n\n  return (\n    <canvas\n      ref={canvasRef}\n      className={`pointer-events-none ${className}`}\n      style={{\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        width: \"100%\",\n        height: \"100%\",\n      }}\n    />\n  );\n};\n\nexport default HackerBackground;\n",
+      "type": "registry:component"
+    }
+  ]
+}

registry-cli.json

@@ -305,6 +305,19 @@
         }
       ]
     },
+    {
+      "name": "neural-background",
+      "type": "registry:component",
+      "devDependencies": [],
+      "dependencies": [""],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "./src/components/nurui/hacker-background.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
 
     {
       "name": "magnet-button",

registry.json

@@ -414,6 +414,19 @@
         }
       ]
     },
+    {
+      "name": "neural-background",
+      "type": "registry:component",
+      "devDependencies": [],
+      "dependencies": [""],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "./src/components/nurui/hacker-background.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
 
     {
       "name": "magnet-button",

src/app/preview/[component]/components-preview-registry.tsx

@@ -107,6 +107,9 @@ export const componentsPreviewRegistry: Record<
   "hacker-background": {
     component: dynamic(() => import("@/components/nurui/hacker-background")),
   },
+  "neural-background": {
+    component: dynamic(() => import("@/components/nurui/neural-background")),
+  },
   // texts
   "gradient-text": {
     component: dynamic(() => import("@/components/nurui/gradient-text-demo")),