ParticleButton

import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';

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

const ParticleButton: React.FC = () => {
  const [particles, setParticles] = useState<Particle[]>([]);
  const [exploded, setExploded] = useState(false);

  const explode = () => {
    if (!exploded) {
      setExploded(true);
      const newParticles: Particle[] = [];
      for (let i = 0; i < 50; i++) {
        newParticles.push({
          x: 50,
          y: 50,
          vx: Math.random() * 2 - 1,
          vy: Math.random() * 2 - 1,
          radius: Math.random() * 2 + 1,
          color: '#C9A84C',
        });
      }
      setParticles(newParticles);
    }
  };

  useEffect(() => {
    let animationFrame: number;
    const updateParticles = () => {
      if (exploded) {
        const newParticles: Particle[] = particles.map((particle) => ({
          ...particle,
          x: particle.x + particle.vx,
          y: particle.y + particle.vy,
        }));
        setParticles(newParticles);
      }
      animationFrame = requestAnimationFrame(updateParticles);
    };
    updateParticles();
    return () => {
      cancelAnimationFrame(animationFrame);
    };
  }, [exploded, particles]);

  return (
    <div className="relative" onClick={explode}>
      <button className="bg-gold py-2 px-4 rounded-lg text-black" >Click me</button>
      {particles.map((particle, index) => (
        <motion.div
          key={index}
          className="absolute rounded-full"
          style={{
            left: `${particle.x}px`,
            top: `${particle.y}px`,
            width: `${particle.radius}px`,
            height: `${particle.radius}px`,
            backgroundColor: particle.color,
          }}
        />
      ))}
    </div>
  );
};

export default ParticleButton;

Component info

Dependencies

About

A React button component that explodes into small gold particles on click, utilizing the requestAnimationFrame API for a smooth animation effect. The component is designed to work seamlessly on a dark background, and it is built using TypeScript for enhanced type safety and maintainability. With its unique visual effect, this button is perfect for adding a touch of creativity and interactivity to any web application. The particles are randomly generated and move in different directions, creating a stunning explosion effect. The component is also highly customizable, allowing developers to easily adjust the particle size, color, and animation speed to fit their specific needs. Overall, the ParticleButton component is a great way to add some visual interest and engagement to any website or web application.