Particle Animation

export default function ParticleAnimationExample() {
  const animationRef = useRef<ParticleAnimationHandle>(null);

  const handleStart = () => {
    animationRef.current?.startAnimation();
  };

  const handlePause = () => {
    animationRef.current?.pauseAnimation();
  };

  const handleResume = () => {
    animationRef.current?.resumeAnimation();
  };

  const handleStop = () => {
    animationRef.current?.stopAnimation();
  };

  return (
    <div className="space-y-4">
      <ParticleAnimation
        width={400}
        height={400}
        numParticles={150}
        minRadius={100}
        maxRadius={180}
        backgroundColor="rgba(0, 0, 0, 0.1)"
        particleColor="#3B82F6"
        brightParticleColor="#60A5FA"
        showCenter={true}
        showBorders={true}
        className="w-full"
        ref={animationRef}
      />
      
      <div className="flex gap-2">
        <button onClick={handleStart}>Start</button>
        <button onClick={handlePause}>Pause</button>
        <button onClick={handleResume}>Resume</button>
        <button onClick={handleStop}>Stop</button>
      </div>
    </div>
  )
}

interface ParticleAnimationProps {
  width?: number;
  height?: number;
  numParticles?: number;
  minRadius?: number;
  maxRadius?: number;
  backgroundColor?: string;
  particleColor?: string;
  brightParticleColor?: string;
  showCenter?: boolean;
  showBorders?: boolean;
  className?: string;
}

interface ParticleAnimationHandle {
  startAnimation: () => void;
  pauseAnimation: () => void;
  resumeAnimation: () => void;
  stopAnimation: () => void;
}