{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "quantum-field-background",
  "type": "registry:ui",
  "title": "Quantum Field Background",
  "description": "Dynamic canvas particle constellation with nodes drifting and interconnecting dynamically.",
  "category": "backgrounds",
  "dependencies": [],
  "files": [
    {
      "path": "registry/backgrounds/quantum-field-background/quantum-field-background.tsx",
      "type": "registry:ui",
      "target": "components/ui/quantum-field-background.tsx",
      "content": "import React, { useRef, useEffect } from 'react';\n\nexport const QuantumFieldBackground: React.FC = () => {\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    const ctx = canvas.getContext('2d');\n    if (!ctx) return;\n\n    let animId: number;\n    let isVisible = true;\n    const count = 28;\n    const particles = Array.from({ length: count }, () => ({\n      x: Math.random() * canvas.width,\n      y: Math.random() * canvas.height,\n      vx: (Math.random() - 0.5) * 0.8,\n      vy: (Math.random() - 0.5) * 0.8,\n    }));\n\n    const render = () => {\n      if (!isVisible) return;\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n      particles.forEach((p, idx) => {\n        p.x += p.vx;\n        p.y += p.vy;\n        if (p.x < 0 || p.x > canvas.width) p.vx *= -1;\n        if (p.y < 0 || p.y > canvas.height) p.vy *= -1;\n\n        ctx.fillStyle = '#6366f1';\n        ctx.beginPath();\n        ctx.arc(p.x, p.y, 2, 0, Math.PI * 2);\n        ctx.fill();\n\n        for (let j = idx + 1; j < count; j++) {\n          const p2 = particles[j];\n          const dist = Math.hypot(p.x - p2.x, p.y - p2.y);\n          if (dist < 55) {\n            ctx.strokeStyle = `rgba(99, 102, 241, ${1 - dist / 55})`;\n            ctx.lineWidth = 0.8;\n            ctx.beginPath();\n            ctx.moveTo(p.x, p.y);\n            ctx.lineTo(p2.x, p2.y);\n            ctx.stroke();\n          }\n        }\n      });\n\n      animId = requestAnimationFrame(render);\n    };\n\n    animId = requestAnimationFrame(render);\n\n    const handleResize = () => {\n      const rect = canvas.getBoundingClientRect();\n      if (rect.width > 0 && rect.height > 0) {\n        canvas.width = rect.width;\n        canvas.height = rect.height;\n      }\n    };\n    handleResize();\n    const resizeObserver = new ResizeObserver(handleResize);\n    resizeObserver.observe(canvas);\n\n    const observer = new IntersectionObserver(([entry]) => {\n      const wasVisible = isVisible;\n      isVisible = entry.isIntersecting;\n      if (isVisible && !wasVisible) {\n        animId = requestAnimationFrame(render);\n      }\n    }, { threshold: 0.05 });\n    observer.observe(canvas);\n\n    return () => {\n      cancelAnimationFrame(animId);\n      observer.disconnect();\n      resizeObserver.disconnect();\n    };\n  }, []);\n\n  return (\n    <div className=\"relative w-full h-44 rounded-3xl overflow-hidden border border-zinc-200 dark:border-white/10 bg-[#09090f] flex items-center justify-center\">\n      <canvas ref={canvasRef} className=\"absolute inset-0 w-full h-full\" />\n      <span className=\"relative z-10 text-xs font-mono font-bold tracking-widest text-indigo-300\">\n        QUANTUM CONSTELLATION\n      </span>\n    </div>\n  );\n};\n"
    }
  ]
}