"use client"

import React, { useEffect, useRef, useCallback } from "react"
import { cn } from "@/lib/utils"

interface Particle {
  x: number
  y: number
  vx: number
  vy: number
  radius: number
  color: string
  alpha: number
  life: number
}

interface InteractiveParticleSystemProps {
  className?: string
  particleCount?: number
  connectionDistance?: number
  mouseInteractionRadius?: number
  colors?: string[]
  backgroundColor?: string
  children?: React.ReactNode
}

export default function InteractiveParticleSystem({
  className,
  particleCount = 100,
  connectionDistance = 100,
  mouseInteractionRadius = 150,
  colors = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981"],
  backgroundColor = "#000000",
  children
}: InteractiveParticleSystemProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const animationRef = useRef<number | null>(null)
  const particlesRef = useRef<Particle[]>([])
  const mouseRef = useRef({ x: -1000, y: -1000, isActive: false })

  const createParticle = useCallback((canvas: HTMLCanvasElement): Particle => {
    return {
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      vx: (Math.random() - 0.5) * 2,
      vy: (Math.random() - 0.5) * 2,
      radius: Math.random() * 3 + 1,
      color: colors[Math.floor(Math.random() * colors.length)],
      alpha: Math.random() * 0.5 + 0.5,
      life: 1
    }
  }, [colors])

  const updateParticles = useCallback((canvas: HTMLCanvasElement) => {
    const particles = particlesRef.current
    const mouse = mouseRef.current

    particles.forEach((particle, index) => {
      // Mouse interaction
      const dx = mouse.x - particle.x
      const dy = mouse.y - particle.y
      const distance = Math.sqrt(dx * dx + dy * dy)

      if (distance < mouseInteractionRadius && mouse.isActive) {
        const force = (mouseInteractionRadius - distance) / mouseInteractionRadius
        const angle = Math.atan2(dy, dx)
        particle.vx -= Math.cos(angle) * force * 2
        particle.vy -= Math.sin(angle) * force * 2
        particle.alpha = Math.min(particle.alpha + 0.1, 1)
      }

      // Update position
      particle.x += particle.vx
      particle.y += particle.vy

      // Bounce off walls
      if (particle.x < 0 || particle.x > canvas.width) {
        particle.vx *= -1
        particle.x = Math.max(0, Math.min(canvas.width, particle.x))
      }
      if (particle.y < 0 || particle.y > canvas.height) {
        particle.vy *= -1
        particle.y = Math.max(0, Math.min(canvas.height, particle.y))
      }

      // Apply friction
      particle.vx *= 0.99
      particle.vy *= 0.99

      // Fade out if life is low
      particle.life -= 0.001
      if (particle.life <= 0) {
        particles[index] = createParticle(canvas)
      }
    })
  }, [createParticle, mouseInteractionRadius])

  const drawParticles = useCallback((ctx: CanvasRenderingContext2D) => {
    const particles = particlesRef.current

    // Draw connections
    particles.forEach((particle1, i) => {
      particles.slice(i + 1).forEach((particle2) => {
        const dx = particle1.x - particle2.x
        const dy = particle1.y - particle2.y
        const distance = Math.sqrt(dx * dx + dy * dy)

        if (distance < connectionDistance) {
          const opacity = (1 - distance / connectionDistance) * 0.5
          ctx.strokeStyle = `rgba(255, 255, 255, ${opacity})`
          ctx.lineWidth = 1
          ctx.beginPath()
          ctx.moveTo(particle1.x, particle1.y)
          ctx.lineTo(particle2.x, particle2.y)
          ctx.stroke()
        }
      })
    })

    // Draw particles
    particles.forEach((particle) => {
      ctx.save()
      ctx.globalAlpha = particle.alpha * particle.life
      ctx.fillStyle = particle.color
      ctx.beginPath()
      ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2)
      ctx.fill()
      ctx.restore()
    })
  }, [connectionDistance])

  const animate = useCallback(() => {
    const canvas = canvasRef.current
    if (!canvas) return

    const ctx = canvas.getContext("2d")
    if (!ctx) return

    // Clear canvas
    ctx.fillStyle = backgroundColor
    ctx.fillRect(0, 0, canvas.width, canvas.height)

    updateParticles(canvas)
    drawParticles(ctx)

    animationRef.current = requestAnimationFrame(animate)
  }, [backgroundColor, updateParticles, drawParticles])

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

    const handleResize = () => {
      canvas.width = canvas.offsetWidth
      canvas.height = canvas.offsetHeight
      particlesRef.current = Array.from({ length: particleCount }, () =>
        createParticle(canvas)
      )
    }

    const handleMouseMove = (e: MouseEvent) => {
      const rect = canvas.getBoundingClientRect()
      mouseRef.current.x = e.clientX - rect.left
      mouseRef.current.y = e.clientY - rect.top
      mouseRef.current.isActive = true
    }

    const handleMouseLeave = () => {
      mouseRef.current.isActive = false
    }

    handleResize()
    window.addEventListener("resize", handleResize)
    canvas.addEventListener("mousemove", handleMouseMove)
    canvas.addEventListener("mouseleave", handleMouseLeave)

    animate()

    return () => {
      window.removeEventListener("resize", handleResize)
      canvas.removeEventListener("mousemove", handleMouseMove)
      canvas.removeEventListener("mouseleave", handleMouseLeave)
      if (animationRef.current) {
        cancelAnimationFrame(animationRef.current)
      }
    }
  }, [particleCount, createParticle, animate])

  return (
    <div className={cn("relative w-full h-full overflow-hidden", className)}>
      <canvas
        ref={canvasRef}
        className="absolute inset-0 w-full h-full"
        style={{ background: backgroundColor }}
      />
      <div className="absolute inset-0 pointer-events-none">
        {React.Children.map(children, (child) => (
          <div className="relative z-10">{child}</div>
        ))}
      </div>
    </div>
  )
}
Interactive Particle System

Dependencies

Files

Installation
