PixelCursor

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

interface PixelCursorProps {
  color: string;
}

const PixelCursor: React.FC<PixelCursorProps> = ({ color }) => {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
  const [isGlitching, setIsGlitching] = useState(false);

  const handleMouseMove = (e: React.MouseEvent) => {
    setMousePosition({ x: e.clientX, y: e.clientY });
    if (Math.abs(e.movementX) > 10 || Math.abs(e.movementY) > 10) {
      setIsGlitching(true);
      setTimeout(() => {
        setIsGlitching(false);
      }, 100);
    }
  };

  return (
    <div>
      <motion.div
        className="cursor"
        style={{
          backgroundColor: color,
          position: 'absolute',
          left: mousePosition.x,
          top: mousePosition.y,
          width: '10px',
          height: '10px',
          borderRadius: '50%',
          zIndex: 1000,
        }}
        initial={{ x: 0, y: 0 }}
        animate={{ x: mousePosition.x, y: mousePosition.y }}
        transition={{
          type: 'spring',
          damping: 10,
          stiffness: 100,
        }}
      >
        {isGlitching && (
          <motion.div
            className="glitch"
            style={{
              backgroundColor: color,
              position: 'absolute',
              left: '-5px',
              top: '-5px',
              width: '20px',
              height: '20px',
              borderRadius: '50%',
              zIndex: 1001,
            }}
            initial={{ x: 0, y: 0 }}
            animate={{ x: Math.random() * 10, y: Math.random() * 10 }}
            transition={{
              type: 'spring',
              damping: 10,
              stiffness: 100,
            }}
          />
        )}
      </motion.div>
    </div>
  );
};

export default PixelCursor;

Component info

Dependencies

About

A premium React component featuring an 8-bit pixelated gold cursor that glitches on fast movement, perfect for retro-themed websites or applications. With a dark background, this component is sure to add a unique touch to your project. The PixelCursor component is built with TypeScript and utilizes the latest React 18 features for optimal performance. It is compatible with Tailwind CSS for easy styling and customization.