SpotlightCursor

import React from 'react';

interface SpotlightCursorProps {
  children: React.ReactNode;
}

const SpotlightCursor: React.FC<SpotlightCursorProps> = ({ children }) => {
  return (
    <div className="spotlight-cursor" style={{
      position: 'relative',
      overflow: 'hidden',
      backgroundColor: '#0A0A0A',
      maskImage: 'radial-gradient(100px at var(--x) var(--y), #fff, transparent)',
      maskSize: '1000px 1000px',
      maskPosition: 'var(--x) var(--y)',
      maskRepeat: 'no-repeat',
    }}>
      {children}
      <div className="spotlight-cursor__cursor" style={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        pointerEvents: 'none',
      }}>
        <div className="spotlight-cursor__cursor-circle" style={{
          position: 'absolute',
          borderRadius: '50%',
          backgroundColor: 'transparent',
          border: '2px solid #C9A84C',
          width: '100px',
          height: '100px',
          transform: 'translate(-50%, -50%)',
        }} />
      </div>
    </div>
  );
};

export default SpotlightCursor;

Component info

Dependencies

About

SpotlightCursor is a React component that reveals dark masked content around the cursor using a CSS radial-gradient mask, creating a dramatic reveal effect. The component is built with TypeScript and does not include any console logs. It is designed to work on a dark background, specifically #0A0A0A, and is perfect for adding an interactive and engaging element to your website. With its sleek and modern design, SpotlightCursor is sure to capture the attention of your users and leave a lasting impression. The component is fully customizable and can be easily integrated into your existing React project.