NeonGlowCursor

import React, { useEffect, useState } from 'react';
import './NeonGlowCursor.css';

interface Props {
  children: React.ReactNode;
}

const NeonGlowCursor: React.FC<Props> = ({ children }) => {
  const [cursorX, setCursorX] = useState<number>(0);
  const [cursorY, setCursorY] = useState<number>(0);

  const handleMouseMove = (e: React.MouseEvent) => {
    setCursorX(e.clientX);
    setCursorY(e.clientY);
  };

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

  return (
    <div
      style={{
        cursor: 'none',
        backgroundColor: '#0A0A0A',
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      {children}
      <div
        className="neon-glow-cursor"
        style={{
          left: `${cursorX}px`,
          top: `${cursorY}px`,
          mixBlendMode: 'screen',
          backgroundColor: '#C9A84C',
        }}
      />
    </div>
  );
};

export default NeonGlowCursor;

Component info

Dependencies

About

Add a futuristic touch to your website with the NeonGlowCursor component. This React component replaces the default cursor with a golden neon halo effect, creating a mesmerizing visual experience. The cursor effect is achieved using the blend-mode screen and is set against a dark background, making it perfect for websites that want to stand out. With its unique design, the NeonGlowCursor component is sure to captivate your audience and leave a lasting impression. The component is built using React 18, TypeScript, and Tailwind CSS, ensuring a seamless and efficient user experience. Whether you're building a personal website, a portfolio, or a business website, the NeonGlowCursor component is a great way to add some personality and flair to your design.