Skip to content

neural background added #89

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
afsar-dev merged 1 commit into from
Aug 20, 2025
Merged

neural background added #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion public/r/future-navbar.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
{
Expand Down
17 changes: 17 additions & 0 deletions public/r/neural-background.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
]
}
13 changes: 13 additions & 0 deletions registry-cli.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
13 changes: 13 additions & 0 deletions registry.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
3 changes: 3 additions & 0 deletions src/app/preview/[component]/components-preview-registry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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")),
Expand Down
8 changes: 0 additions & 8 deletions src/app/test/page.tsx
View file
Open in desktop

This file was deleted.

Loading