"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { cn } from "@/lib/utils";

interface Particle {
  id: number;
  x: number;
  y: number;
  size: number;
  duration: number;
  delay: number;
  opacity: number;
  xOffset: number;
  yOffset: number;
}

interface ParticleFieldProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
   * Number of particles to render
   * @default 50
   */
  count?: number;
  /**
   * Particle color
   * @default uses primary color
   */
  color?: string;
  /**
   * Minimum particle size in pixels
   * @default 2
   */
  minSize?: number;
  /**
   * Maximum particle size in pixels
   * @default 6
   */
  maxSize?: number;
  /**
   * Speed multiplier for particle movement
   * @default 1
   */
  speed?: number;
  /**
   * Whether particles should connect with lines
   * @default false
   */
  connected?: boolean;
  /**
   * Connection distance threshold
   * @default 100
   */
  connectionDistance?: number;
  /**
   * Whether particles respond to mouse movement
   * @default true
   */
  interactive?: boolean;
}

function generateParticles(
  count: number,
  minSize: number,
  maxSize: number
): Particle[] {
  return Array.from({ length: count }, (_, i) => ({
    id: i,
    x: Math.random() * 100,
    y: Math.random() * 100,
    size: Math.random() * (maxSize - minSize) + minSize,
    duration: Math.random() * 20 + 10,
    delay: Math.random() * 5,
    opacity: Math.random() * 0.5 + 0.3,
    // Pre-calculate random offsets for animation
    xOffset: (Math.random() - 0.5) * 40,
    yOffset: (Math.random() - 0.5) * 40,
  }));
}

function ParticleField({
  count = 50,
  color,
  minSize = 2,
  maxSize = 6,
  speed = 1,
  connected = false,
  connectionDistance = 100,
  interactive = true,
  className,
  children,
  ...props
}: ParticleFieldProps) {
  const containerRef = React.useRef<HTMLDivElement>(null);
  const [mousePosition, setMousePosition] = React.useState({ x: -100, y: -100 });
  const particles = React.useMemo(
    () => generateParticles(count, minSize, maxSize),
    [count, minSize, maxSize]
  );

  // Default color - use a visible color that works on both light and dark
  const particleColor = color || "currentColor";

  const handleMouseMove = React.useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
      if (!interactive || !containerRef.current) return;
      const rect = containerRef.current.getBoundingClientRect();
      setMousePosition({
        x: ((e.clientX - rect.left) / rect.width) * 100,
        y: ((e.clientY - rect.top) / rect.height) * 100,
      });
    },
    [interactive]
  );

  const handleMouseLeave = React.useCallback(() => {
    setMousePosition({ x: -100, y: -100 });
  }, []);

  return (
    <div
      ref={containerRef}
      className={cn("relative h-full w-full overflow-hidden", className)}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      {...props}
    >
      {/* Particles */}
      <div 
        className="pointer-events-none absolute inset-0 text-primary" 
        aria-hidden="true"
      >
        {particles.map((particle) => {
          // Calculate repulsion from mouse
          const dx = particle.x - mousePosition.x;
          const dy = particle.y - mousePosition.y;
          const distance = Math.sqrt(dx * dx + dy * dy);
          const repulsionRadius = 20;
          const repulsionStrength = interactive && distance < repulsionRadius && distance > 0
            ? ((repulsionRadius - distance) / repulsionRadius) * 8
            : 0;
          const repelX = distance > 0 ? (dx / distance) * repulsionStrength : 0;
          const repelY = distance > 0 ? (dy / distance) * repulsionStrength : 0;

          return (
            <motion.div
              key={particle.id}
              className="absolute rounded-full"
              style={{
                width: particle.size,
                height: particle.size,
                backgroundColor: particleColor,
                left: `${particle.x}%`,
                top: `${particle.y}%`,
                marginLeft: -particle.size / 2,
                marginTop: -particle.size / 2,
              }}
              initial={{ opacity: 0, scale: 0 }}
              animate={{
                opacity: particle.opacity,
                scale: 1,
                x: [repelX, particle.xOffset + repelX, -particle.xOffset + repelX, repelX],
                y: [repelY, particle.yOffset + repelY, -particle.yOffset + repelY, repelY],
              }}
              transition={{
                opacity: { duration: 0.5, delay: particle.delay * 0.1 },
                scale: { duration: 0.5, delay: particle.delay * 0.1 },
                x: {
                  duration: particle.duration / speed,
                  repeat: Infinity,
                  ease: "easeInOut",
                },
                y: {
                  duration: particle.duration / speed,
                  repeat: Infinity,
                  ease: "easeInOut",
                },
              }}
            />
          );
        })}

        {/* Connection lines - SVG overlay */}
        {connected && (
          <svg className="absolute inset-0 h-full w-full">
            {particles.map((p1, i) =>
              particles.slice(i + 1).map((p2) => {
                const dx = p1.x - p2.x;
                const dy = p1.y - p2.y;
                const distance = Math.sqrt(dx * dx + dy * dy);
                const maxDist = connectionDistance / 10; // Convert to percentage

                if (distance > maxDist) return null;

                const lineOpacity = (1 - distance / maxDist) * 0.2;

                return (
                  <motion.line
                    key={`${p1.id}-${p2.id}`}
                    x1={`${p1.x}%`}
                    y1={`${p1.y}%`}
                    x2={`${p2.x}%`}
                    y2={`${p2.y}%`}
                    stroke={particleColor}
                    strokeWidth={1}
                    initial={{ opacity: 0 }}
                    animate={{ opacity: lineOpacity }}
                    transition={{ duration: 1 }}
                  />
                );
              })
            )}
          </svg>
        )}
      </div>

      {/* Content */}
      {children && <div className="relative z-10 h-full">{children}</div>}
    </div>
  );
}

export { ParticleField };
Particle Field

Dependencies

Files

Installation
