Spotlight Cursor

The SpotlightCursor component tracks the user's mouse position and renders a dynamic background layer that follows the cursor, illuminating or interacting with the content beneath it. Now with 5 visual effects and optimized React event handlers.

Live Preview

Installation

Props

Effects

| Effect | Description | Best For | |---|---|---| | glow | Soft radial gradient flashlight | Subtle illumination | | reveal | Darkens container, reveals underneath | "Scratch off" interactions | | border | Combines soft glow with hard CSS mask | Complex layered UIs | | gradient| Multi-stop complex gradient | Vibrant, colorful themes | | halo | Hollow ring effect | Minimalist dark modes |

How It Works

The component uses an absolute positioned <motion.div> as the spotlight layer sitting between the background and your children. On mousemove, the local coordinates are captured and used to construct a CSS radial-gradient (or mask-image). mix-blend-mode is utilized in certain effects (like reveal) to naturally composite the lighting over underlying grid patterns or text.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { SpotlightCursor } from "@/components/creative/spotlight-cursor";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { SpotlightCursor } from "@/components/creative/spotlight-cursor";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <SpotlightCursor
        spotlightSize{10}
        spotlightColor="example"
        effect{/* value */}
      >
        <div>Content goes here</div>
      </SpotlightCursor>
    </div>
  );
}