ParticleCursor

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

interface Particle {
  x: number;
  y: number;
  velocityX: number;
  velocityY: number;
}

const ParticleCursor: React.FC = () => {
  const [particles, setParticles] = useState<Particle[]>([]);
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
    setMousePosition({ x: event.clientX, y: event.clientY });
    createParticle(event.clientX, event.clientY);
  };

  const createParticle = (x: number, y: number) => {
    const particle: Particle = {
      x,
      y,
      velocityX: Math.random() * 2 - 1,
      velocityY: Math.random() * 2 - 1,
    };
    setParticles((prevParticles) => [
      particle,
      ...prevParticles.slice(0, 19),
    ]);
  };

  const updateParticles = () => {
    setParticles((prevParticles) =>
      prevParticles.map((particle) => ({
        ...particle,
        x: particle.x + particle.velocityX,
        y: particle.y + particle.velocityY,
      })).filter((particle) =>
        Math.abs(particle.x - mousePosition.x) < 100 &&
        Math.abs(particle.y - mousePosition.y) < 100
      )
    );
  };

  useEffect(() => {
    const intervalId = setInterval(updateParticles, 16);
    return () => clearInterval(intervalId);
  }, [mousePosition]);

  return (
    <div
      style={{
        position: 'absolute",
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        backgroundColor: '#0A0A0A',
        overflow: 'hidden',
      }}
      onMouseMove={handleMouseMove}
    >
      {particles.map((particle, index) => (
        <motion.div
          key={index}
          initial={{ x: particle.x, y: particle.y }}
          animate={{ x: particle.x, y: particle.y }}
          transition={{ duration: 0.1 }}
          style={{
            position: 'absolute",
            width: '2px',
            height: '2px',
            backgroundColor: '#C9A84C',
            borderRadius: '50%',
          }}
        />
      ))}
    </div>
  );
};

export default ParticleCursor;

Component info

Dependencies

About

A React component that creates a mesmerizing effect of small gold particles bursting from the cursor on mouse movement. The component is built using TypeScript and utilizes the power of React to create a seamless user experience. With a maximum of 20 particles, this component is sure to add a touch of elegance to any website or application. The dark background #0A0A0A provides a stunning contrast to the gold particles, making it a visually appealing addition to any project.