← Components/Animations & Cursors

PixelCursor

8-bitpixelatedglitchcursor
pixel-cursor-v1.tsx
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

CategoryAnimations & Cursors
Frameworkreact
TierPREMIUM
Views6
Copies0

Dependencies

npm install framer-motion

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.

Pro component
Unlock this component and 17,500+ more with Empire UI Pro.
Get Pro →