{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dot-background", "type": "registry:block", "title": "Dot background", "description": "Dot background", "files": [ { "path": "components/usages/dotbackgroundusage.tsx", "content": "import React from \"react\";\nimport { Button } from \"../ui/button\";\nimport { ArrowRight, Github, Linkedin, Mail } from \"lucide-react\";\nimport Link from \"next/link\";\nimport { GradientGridHero } from \"@/registry/open-source/dot-background\";\n\nconst GradientHero = () => {\n return (\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n \n Software Engineer & Creative Developer\n \n \n
\n
\n

\n Hi, I'm\n \n Afsar Mahmud\n \n

\n

\n I craft exceptional digital experiences with code, creativity, and a\n passion for innovation.\n

\n
\n \n \n Contact Me\n \n
\n
\n \n \n \n GitHub\n \n \n \n \n \n LinkedIn\n \n \n \n \n \n Email\n \n \n
\n
\n
\n \n
\n
\n\n
\n
\n
\n
\n
\n
\n );\n};\n\nexport default GradientHero;", "type": "registry:block", "target": "~/example.tsx" }, { "path": "components/usages/dotbackgroundusage.tsx", "content": "import React from \"react\";\nimport { Button } from \"../ui/button\";\nimport { ArrowRight, Github, Linkedin, Mail } from \"lucide-react\";\nimport Link from \"next/link\";\nimport { GradientGridHero } from \"@/registry/open-source/dot-background\";\n\nconst GradientHero = () => {\n return (\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n \n Software Engineer & Creative Developer\n \n \n
\n
\n

\n Hi, I'm\n \n Afsar Mahmud\n \n

\n

\n I craft exceptional digital experiences with code, creativity, and a\n passion for innovation.\n

\n
\n \n \n Contact Me\n \n
\n
\n \n \n \n GitHub\n \n \n \n \n \n LinkedIn\n \n \n \n \n \n Email\n \n \n
\n
\n
\n \n
\n
\n\n
\n
\n
\n
\n
\n
\n );\n};\n\nexport default GradientHero;", "type": "registry:ui" }, { "path": "components/ui/button.tsx", "content": "import * as React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nconst buttonVariants = cva(\r\n\t\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm text-white hover:text-gray-400 font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\r\n\t{\r\n\t\tvariants: {\r\n\t\t\tvariant: {\r\n\t\t\t\tsimple:\r\n\t\t\t\t\t\"bg-secondary relative z-10 bg-transparent hover:border-secondary hover:bg-secondary/50 border border-transparent dark:text-white text-sm md:text-sm transition font-medium duration-200 rounded-md px-4 py-2 flex items-center justify-center\",\r\n\t\t\t\tdefault: \"bg-primary text-primary-foreground hover:bg-primary/90\",\r\n\t\t\t\tdestructive:\r\n\t\t\t\t\t\"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\r\n\t\t\t\toutline:\r\n\t\t\t\t\t\"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\r\n\t\t\t\tsecondary:\r\n\t\t\t\t\t\"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n\t\t\t\tghost: \"hover:bg-accent hover:text-black hover:stroke-black dark:text-white text-black\",\r\n\t\t\t\tlink: \"text-primary underline-offset-4 hover:underline\",\r\n\t\t\t},\r\n\t\t\tsize: {\r\n\t\t\t\tdefault: \"h-10 px-4 py-2\",\r\n\t\t\t\tsm: \"h-9 rounded-md px-3\",\r\n\t\t\t\tlg: \"h-11 rounded-md px-8\",\r\n\t\t\t\ticon: \"h-10 w-10\",\r\n\t\t\t},\r\n\t\t},\r\n\t\tdefaultVariants: {\r\n\t\t\tvariant: \"default\",\r\n\t\t\tsize: \"default\",\r\n\t\t},\r\n\t}\r\n);\r\n\r\nexport interface ButtonProps\r\n\textends React.ButtonHTMLAttributes,\r\n\t\tVariantProps {\r\n\tasChild?: boolean;\r\n}\r\n\r\nconst Button = React.forwardRef(\r\n\t({ className, variant, size, asChild = false, ...props }, ref) => {\r\n\t\tconst Comp = asChild ? Slot : \"button\";\r\n\t\treturn (\r\n\t\t\t\r\n\t\t);\r\n\t}\r\n);\r\nButton.displayName = \"Button\";\r\n\r\nexport { Button, buttonVariants };\r\n", "type": "registry:ui" }, { "path": "registry/utilities/cn.ts", "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n", "type": "registry:ui" }, { "path": "registry/open-source/dot-background.tsx", "content": "\"use client\"\r\n\r\nimport { useEffect, useRef } from \"react\"\r\nimport { motion } from \"framer-motion\"\r\n\r\nexport function GradientGridHero() {\r\n const canvasRef = useRef(null)\r\n\r\n useEffect(() => {\r\n const canvas = canvasRef.current\r\n if (!canvas) return\r\n\r\n const ctx = canvas.getContext(\"2d\")\r\n if (!ctx) return\r\n\r\n let devicePixelRatio: number\r\n\r\n // Set canvas dimensions\r\n const setCanvasDimensions = () => {\r\n devicePixelRatio = window.devicePixelRatio || 1\r\n const rect = canvas.getBoundingClientRect()\r\n\r\n canvas.width = rect.width * devicePixelRatio\r\n canvas.height = rect.height * devicePixelRatio\r\n\r\n ctx.scale(devicePixelRatio, devicePixelRatio)\r\n }\r\n\r\n setCanvasDimensions()\r\n window.addEventListener(\"resize\", setCanvasDimensions)\r\n\r\n // Mouse position\r\n let mouseX = 0\r\n let mouseY = 0\r\n let targetX = 0\r\n let targetY = 0\r\n\r\n window.addEventListener(\"mousemove\", (e) => {\r\n const rect = canvas.getBoundingClientRect()\r\n targetX = e.clientX - rect.left\r\n targetY = e.clientY - rect.top\r\n })\r\n\r\n // Particle class\r\n class Particle {\r\n x: number\r\n y: number\r\n size: number\r\n baseX: number\r\n baseY: number\r\n density: number\r\n color: string\r\n distance: number\r\n\r\n constructor(x: number, y: number) {\r\n this.x = x\r\n this.y = y\r\n this.baseX = x\r\n this.baseY = y\r\n this.size = Math.random() * 5 + 2\r\n this.density = Math.random() * 30 + 1\r\n this.distance = 0\r\n\r\n // Create a gradient from purple to pink\r\n const hue = Math.random() * 60 + 270 // 270-330 range for purples and pinks\r\n this.color = `hsl(${hue}, 70%, 60%)`\r\n }\r\n\r\n update() {\r\n // Calculate distance between mouse and particle\r\n const dx = mouseX - this.x\r\n const dy = mouseY - this.y\r\n this.distance = Math.sqrt(dx * dx + dy * dy)\r\n\r\n const forceDirectionX = dx / this.distance\r\n const forceDirectionY = dy / this.distance\r\n\r\n const maxDistance = 100\r\n const force = (maxDistance - this.distance) / maxDistance\r\n\r\n if (this.distance < maxDistance) {\r\n const directionX = forceDirectionX * force * this.density\r\n const directionY = forceDirectionY * force * this.density\r\n\r\n this.x -= directionX\r\n this.y -= directionY\r\n } else {\r\n if (this.x !== this.baseX) {\r\n const dx = this.x - this.baseX\r\n this.x -= dx / 10\r\n }\r\n if (this.y !== this.baseY) {\r\n const dy = this.y - this.baseY\r\n this.y -= dy / 10\r\n }\r\n }\r\n }\r\n\r\n draw(ctx: CanvasRenderingContext2D | null) {\r\n if (!ctx) return\r\n ctx.fillStyle = this.color\r\n ctx.beginPath()\r\n ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)\r\n ctx.closePath()\r\n ctx.fill()\r\n }\r\n }\r\n\r\n // Create particle grid\r\n const particlesArray: Particle[] = []\r\n const gridSize = 30\r\n\r\n function init() {\r\n particlesArray.length = 0\r\n\r\n if (!canvas) return;\r\n\r\n const canvasWidth = canvas.width / devicePixelRatio\r\n const canvasHeight = canvas.height / devicePixelRatio\r\n\r\n const numX = Math.floor(canvasWidth / gridSize)\r\n const numY = Math.floor(canvasHeight / gridSize)\r\n\r\n for (let y = 0; y < numY; y++) {\r\n for (let x = 0; x < numX; x++) {\r\n const posX = x * gridSize + gridSize / 2\r\n const posY = y * gridSize + gridSize / 2\r\n particlesArray.push(new Particle(posX, posY))\r\n }\r\n }\r\n }\r\n\r\n init()\r\n\r\n // Animation loop\r\n const animate = () => {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height)\r\n\r\n // Smooth mouse following\r\n mouseX += (targetX - mouseX) * 0.1\r\n mouseY += (targetY - mouseY) * 0.1\r\n\r\n // Draw connections\r\n for (let i = 0; i < particlesArray.length; i++) {\r\n particlesArray[i].update()\r\n particlesArray[i].draw(ctx)\r\n\r\n // Draw connections\r\n for (let j = i; j < particlesArray.length; j++) {\r\n const dx = particlesArray[i].x - particlesArray[j].x\r\n const dy = particlesArray[i].y - particlesArray[j].y\r\n const distance = Math.sqrt(dx * dx + dy * dy)\r\n\r\n if (distance < 30) {\r\n ctx.beginPath()\r\n ctx.strokeStyle = `rgba(180, 120, 255, ${0.2 - distance / 150})`\r\n ctx.lineWidth = 0.5\r\n ctx.moveTo(particlesArray[i].x, particlesArray[i].y)\r\n ctx.lineTo(particlesArray[j].x, particlesArray[j].y)\r\n ctx.stroke()\r\n }\r\n }\r\n }\r\n\r\n requestAnimationFrame(animate)\r\n }\r\n\r\n animate()\r\n\r\n // Handle window resize\r\n window.addEventListener(\"resize\", init)\r\n\r\n return () => {\r\n window.removeEventListener(\"resize\", setCanvasDimensions)\r\n window.removeEventListener(\"resize\", init)\r\n }\r\n }, [])\r\n\r\n return (\r\n \r\n \r\n \r\n )\r\n}", "type": "registry:ui" } ] }