shadcn/app/public/registry/styles/default/particles-background.json

{
  "name": "particles-background",
  "description": "Particle effects background",
  "dependencies": [
    "tsparticles",
    "@tsparticles/react"
  ],
  "files": [
    {
      "name": "particles-background.tsx",
      "content": "\"use client\"\n\nimport React, { useCallback, useEffect, useRef } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface Particle {\n  x: number\n  y: number\n  vx: number\n  vy: number\n  size: number\n}\n\ninterface ParticlesBackgroundProps {\n  className?: string\n  particleCount?: number\n  particleColor?: string\n  lineColor?: string\n  particleSize?: number\n  speed?: number\n  connectionDistance?: number\n  opacity?: number\n  enableMouseInteraction?: boolean\n  mouseRadius?: number\n}\n\nexport function ParticlesBackground({\n  className,\n  particleCount = 50,\n  particleColor = \"rgba(255, 255, 255, 0.6)\",\n  lineColor = \"rgba(255, 255, 255, 0.2)\",\n  particleSize = 2,\n  speed = 0.5,\n  connectionDistance = 100,\n  opacity = 1,\n  enableMouseInteraction = true,\n  mouseRadius = 150,\n}: ParticlesBackgroundProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const particlesRef = useRef<Particle[]>([])\n  const mouseRef = useRef({ x: 0, y: 0 })\n  const rafRef = useRef<number | undefined>(undefined)\n\n  const initializeParticles = useCallback(\n    (width: number, height: number) => {\n      particlesRef.current = Array.from({ length: particleCount }, () => ({\n        x: Math.random() * width,\n        y: Math.random() * height,\n        vx: (Math.random() - 0.5) * speed,\n        vy: (Math.random() - 0.5) * speed,\n        size: Math.random() * particleSize + 1,\n      }))\n    },\n    [particleCount, speed, particleSize]\n  )\n\n  const drawParticle = useCallback(\n    (ctx: CanvasRenderingContext2D, particle: Particle) => {\n      ctx.globalAlpha = opacity\n      ctx.fillStyle = particleColor\n      ctx.beginPath()\n      ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2)\n      ctx.fill()\n    },\n    [particleColor, opacity]\n  )\n\n  const drawConnection = useCallback(\n    (\n      ctx: CanvasRenderingContext2D,\n      p1: Particle,\n      p2: Particle,\n      distance: number\n    ) => {\n      const alpha = Math.max(0, 1 - distance / connectionDistance)\n      ctx.globalAlpha = alpha * opacity\n      ctx.strokeStyle = lineColor\n      ctx.lineWidth = 0.5\n      ctx.beginPath()\n      ctx.moveTo(p1.x, p1.y)\n      ctx.lineTo(p2.x, p2.y)\n      ctx.stroke()\n    },\n    [lineColor, connectionDistance, opacity]\n  )\n\n  const updateParticle = useCallback(\n    (\n      particle: Particle,\n      width: number,\n      height: number,\n      mouseX: number,\n      mouseY: number\n    ) => {\n      // Update position\n      particle.x += particle.vx\n      particle.y += particle.vy\n\n      // Bounce off edges\n      if (particle.x < 0 || particle.x > width) {\n        particle.vx *= -1\n        particle.x = Math.max(0, Math.min(width, particle.x))\n      }\n      if (particle.y < 0 || particle.y > height) {\n        particle.vy *= -1\n        particle.y = Math.max(0, Math.min(height, particle.y))\n      }\n\n      // Mouse interaction\n      if (enableMouseInteraction) {\n        const dx = mouseX - particle.x\n        const dy = mouseY - particle.y\n        const distance = Math.sqrt(dx * dx + dy * dy)\n\n        if (distance < mouseRadius) {\n          const force = (mouseRadius - distance) / mouseRadius\n          const angle = Math.atan2(dy, dx)\n          particle.vx -= Math.cos(angle) * force * 0.2\n          particle.vy -= Math.sin(angle) * force * 0.2\n        }\n      }\n\n      // Damping to prevent excessive speeds\n      particle.vx *= 0.99\n      particle.vy *= 0.99\n    },\n    [enableMouseInteraction, mouseRadius]\n  )\n\n  const animate = useCallback(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n\n    const ctx = canvas.getContext(\"2d\")\n    if (!ctx) return\n\n    const { width, height } = canvas\n    const particles = particlesRef.current\n    const { x: mouseX, y: mouseY } = mouseRef.current\n\n    // Clear canvas\n    ctx.clearRect(0, 0, width, height)\n\n    // Update and draw particles\n    particles.forEach((particle) => {\n      updateParticle(particle, width, height, mouseX, mouseY)\n      drawParticle(ctx, particle)\n    })\n\n    // Draw connections\n    for (let i = 0; i < particles.length; i++) {\n      for (let j = i + 1; j < particles.length; j++) {\n        const dx = particles[i].x - particles[j].x\n        const dy = particles[i].y - particles[j].y\n        const distance = Math.sqrt(dx * dx + dy * dy)\n\n        if (distance < connectionDistance) {\n          drawConnection(ctx, particles[i], particles[j], distance)\n        }\n      }\n    }\n\n    rafRef.current = requestAnimationFrame(animate)\n  }, [updateParticle, drawParticle, drawConnection, connectionDistance])\n\n  const handleMouseMove = useCallback((event: MouseEvent) => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n\n    const rect = canvas.getBoundingClientRect()\n    mouseRef.current = {\n      x: event.clientX - rect.left,\n      y: event.clientY - rect.top,\n    }\n  }, [])\n\n  const handleResize = useCallback(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n\n    const rect = canvas.getBoundingClientRect()\n    canvas.width = rect.width\n    canvas.height = rect.height\n\n    initializeParticles(canvas.width, canvas.height)\n  }, [initializeParticles])\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n\n    // Set initial canvas size\n    handleResize()\n\n    // Start animation\n    rafRef.current = requestAnimationFrame(animate)\n\n    // Event listeners\n    window.addEventListener(\"resize\", handleResize)\n    if (enableMouseInteraction) {\n      canvas.addEventListener(\"mousemove\", handleMouseMove)\n    }\n\n    return () => {\n      if (rafRef.current) {\n        cancelAnimationFrame(rafRef.current)\n      }\n      window.removeEventListener(\"resize\", handleResize)\n      if (enableMouseInteraction) {\n        canvas.removeEventListener(\"mousemove\", handleMouseMove)\n      }\n    }\n  }, [animate, handleResize, handleMouseMove, enableMouseInteraction])\n\n  return (\n    <canvas\n      ref={canvasRef}\n      className={cn(\"fixed inset-0 pointer-events-none\", className)}\n      style={{ zIndex: -1 }}\n    />\n  )\n}\n\nParticlesBackground.displayName = \"ParticlesBackground\"\n"
    }
  ],
  "type": "components:animation"
}