TrailCursor

import { useEffect, useState } from 'react';

interface Dot {
  x: number;
  y: number;
  opacity: number;
}

const TrailCursor = () => {
  const [dots, setDots] = useState<Dot[]>([]);
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handleMouseMove = (event: MouseEvent) => {
      setMousePosition({ x: event.clientX, y: event.clientY });
    };

    document.addEventListener('mousemove', handleMouseMove);

    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
    };
  }, []);

  useEffect(() => {
    const animate = () => {
      const newDots: Dot[] = [...dots];

      newDots.push({ x: mousePosition.x, y: mousePosition.y, opacity: 1 });

      if (newDots.length > 12) {
        newDots.shift();
      }

      newDots.forEach((dot, index) => {
        if (index > 0) {
          dot.opacity -= 0.08;
        }
      });

      setDots(newDots);

      requestAnimationFrame(animate);
    };

    animate();
  }, [mousePosition, dots]);

  return (
    <div
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        backgroundColor: '#0A0A0A',
        overflow: 'hidden',
      }}
    >
      {dots.map((dot, index) => (
        <div
          key={index}
          style={{
            position: 'absolute',
            left: dot.x,
            top: dot.y,
            width: '4px',
            height: '4px',
            borderRadius: '50%',
            backgroundColor: `rgba(201, 168, 76, ${dot.opacity})`,
          }}
        />
      ))}
    </div>
  );
};

export default TrailCursor;

Component info

Dependencies

About

A React component that creates a trail of 12 small fading dots following the mouse cursor, utilizing requestAnimationFrame for smooth animation. Perfect for adding a touch of elegance to your application. The dots seamlessly transition from gold to transparent, creating a sense of depth on a dark background. This component is built with TypeScript, ensuring robustness and maintainability.