{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "string-art-background",
"type": "registry:block",
"title": "String art background",
"description": "String art background",
"files": [
{
"path": "components/usages/stringartbackgroundusage.tsx",
"content": "import React from 'react';\nimport { IoChevronForward } from \"react-icons/io5\";\nimport StringArt from '@/registry/open-source/string-art-background';\nconst App = () => {\n return (\n \n \n \n ✨ Introducing ZenUI v2.3\n \n\n \n Open-Source UI Components & Templates Library\n \n\n \n ZenUI Library is an Tailwind CSS components library for any needs. Comes with UI examples &\n blocks,\n templates, Icons, Color Palette and more.\n \n\n \n \n Browse Components\n \n \n \n Browse Templates\n \n \n \n \n \n );\n};\n\nexport default App;\n",
"type": "registry:block",
"target": "~/example.tsx"
},
{
"path": "components/usages/stringartbackgroundusage.tsx",
"content": "import React from 'react';\nimport { IoChevronForward } from \"react-icons/io5\";\nimport StringArt from '@/registry/open-source/string-art-background';\nconst App = () => {\n return (\n \n \n \n ✨ Introducing ZenUI v2.3\n \n\n \n Open-Source UI Components & Templates Library\n \n\n \n ZenUI Library is an Tailwind CSS components library for any needs. Comes with UI examples &\n blocks,\n templates, Icons, Color Palette and more.\n \n\n \n \n Browse Components\n \n \n \n Browse Templates\n \n \n \n \n \n );\n};\n\nexport default App;\n",
"type": "registry:ui"
},
{
"path": "registry/open-source/string-art-background.tsx",
"content": "import { useRef, useEffect, useState } from \"react\"\n\n// Credit:\n// https://zenui.net/animations/background-animations\n\nconst StringArt = ({ children }) => {\n const canvasRef = useRef(null)\n const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })\n const [dimensions, setDimensions] = useState({ width: 0, height: 0 })\n const anchorPointsRef = useRef([])\n const animationRef = useRef(null)\n\n useEffect(() => {\n const canvas = canvasRef.current\n const ctx = canvas.getContext(\"2d\")\n\n const handleResize = () => {\n const dpr = window.devicePixelRatio || 1\n const width = window.innerWidth\n const height = window.innerHeight\n\n canvas.width = width * dpr\n canvas.height = height * dpr\n canvas.style.width = `${width}px`\n canvas.style.height = `${height}px`\n\n ctx.setTransform(1, 0, 0, 1, 0, 0)\n ctx.scale(dpr, dpr)\n\n setDimensions({ width, height })\n generateAnchorPoints(width, height)\n }\n\n const generateAnchorPoints = (width, height) => {\n const points = []\n const pointCount = width < 768 ? 40 : 60\n const radius = Math.min(width, height) * 0.3\n const centerX = width / 2\n const centerY = height / 2\n\n for (let i = 0; i < pointCount; i++) {\n const angle = (i / pointCount) * Math.PI * 2\n const x = centerX + Math.cos(angle) * radius\n const y = centerY + Math.sin(angle) * radius\n points.push({ x, y })\n }\n\n anchorPointsRef.current = points\n }\n\n handleResize()\n window.addEventListener(\"resize\", handleResize)\n return () => {\n window.removeEventListener(\"resize\", handleResize)\n if (animationRef.current) cancelAnimationFrame(animationRef.current)\n }\n }, [])\n\n useEffect(() => {\n const handleMouseMove = (e) => {\n const rect = canvasRef.current.getBoundingClientRect()\n setMousePosition({\n x: e.clientX - rect.left,\n y: e.clientY - rect.top,\n })\n }\n\n window.addEventListener(\"mousemove\", handleMouseMove)\n return () => window.removeEventListener(\"mousemove\", handleMouseMove)\n }, [])\n\n useEffect(() => {\n if (!dimensions.width) return\n const canvas = canvasRef.current\n const ctx = canvas.getContext(\"2d\")\n\n const animate = () => {\n ctx.clearRect(0, 0, dimensions.width, dimensions.height)\n\n const anchorPoints = anchorPointsRef.current\n\n ctx.fillStyle = \"rgba(255, 255, 255, 0.5)\"\n for (const point of anchorPoints) {\n ctx.beginPath()\n ctx.arc(point.x, point.y, 2.5, 0, Math.PI * 2)\n ctx.fill()\n }\n\n for (const point of anchorPoints) {\n const dx = point.x - mousePosition.x\n const dy = point.y - mousePosition.y\n const distance = Math.sqrt(dx * dx + dy * dy)\n const angle = Math.atan2(dy, dx)\n const skipFactor = Math.abs(Math.sin(angle * 5)) < 0.3\n if (skipFactor) continue\n\n const maxDistance = Math.max(dimensions.width, dimensions.height) * 0.7\n const opacity = 0.1 + 0.4 * (1 - Math.min(1, distance / maxDistance))\n const hue = ((angle * 180) / Math.PI + 180) % 360\n\n ctx.beginPath()\n ctx.moveTo(point.x, point.y)\n ctx.lineTo(mousePosition.x, mousePosition.y)\n ctx.strokeStyle = `hsla(${hue}, 70%, 60%, ${opacity})`\n ctx.lineWidth = 0.6\n ctx.stroke()\n }\n\n const gradient = ctx.createRadialGradient(\n mousePosition.x,\n mousePosition.y,\n 0,\n mousePosition.x,\n mousePosition.y,\n 30\n )\n gradient.addColorStop(0, \"rgba(33,33,33,0.2)\")\n gradient.addColorStop(1, \"rgba(0, 0, 0, 0.1)\")\n\n ctx.fillStyle = gradient\n ctx.beginPath()\n ctx.arc(mousePosition.x, mousePosition.y, 30, 0, Math.PI * 2)\n ctx.fill()\n\n animationRef.current = requestAnimationFrame(animate)\n }\n\n animate()\n return () => {\n if (animationRef.current) cancelAnimationFrame(animationRef.current)\n }\n }, [dimensions, mousePosition])\n\n return (\n \n\n \n\n {children}\n \n )\n}\n\nexport default StringArt;\n",
"type": "registry:ui"
}
]
}