Cursor Spotlight

Cursor spotlight effect. Dimmed background with bright radial gradient following cursor.

Component

"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

interface CursorSpotlightProps {
  children?: React.ReactNode;
  className?: string;
  spotlightSize?: number;
  spotlightOpacity?: number;
  baseColor?: string;
  falloff?: string;
  childrenClassName?: string;
}

export function CursorSpotlight({
  children,
  className,
  spotlightSize = 100,
  spotlightOpacity = 0.25,
  baseColor = "rgb(2 6 23)",
  falloff = "60%",
  childrenClassName,
}: CursorSpotlightProps) {
  const [pos, setPos] = useState({ x: 50, y: 50 });
  const [hovering, setHovering] = useState(false);

  return (
    <div
      role="img"
      aria-hidden={true}
      className={cn("relative overflow-hidden", className)}
      onMouseMove={(e) => {
        const rect =
          e.currentTarget.getBoundingClientRect();
        setPos({
          x: ((e.clientX - rect.left) / rect.width) * 100,
          y: ((e.clientY - rect.top) / rect.height) * 100,
        });
        setHovering(true);
      }}
      onMouseLeave={() => setHovering(false)}
    >
      <div
        className="absolute inset-0"
        style={{ backgroundColor: baseColor }}
      />
      <div
        className="pointer-events-none absolute inset-0 transition-opacity duration-150"
        style={{
          background: `radial-gradient(circle ${spotlightSize}px at ${pos.x}% ${pos.y}%, rgba(255,255,255,${spotlightOpacity}) 0%, transparent ${falloff})`,
          opacity: hovering ? 1 : 0,
        }}
      />
      {children && (
        <div className={cn("relative", childrenClassName)}>
          {children}
        </div>
      )}
    </div>
  );
}

Installation

1. Copy the component file

"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

interface CursorSpotlightProps {
  children?: React.ReactNode;
  className?: string;
  spotlightSize?: number;
  spotlightOpacity?: number;
  baseColor?: string;
  falloff?: string;
  childrenClassName?: string;
}

export function CursorSpotlight({
  children,
  className,
  spotlightSize = 100,
  spotlightOpacity = 0.25,
  baseColor = "rgb(2 6 23)",
  falloff = "60%",
  childrenClassName,
}: CursorSpotlightProps) {
  const [pos, setPos] = useState({ x: 50, y: 50 });
  const [hovering, setHovering] = useState(false);

  return (
    <div
      role="img"
      aria-hidden={true}
      className={cn("relative overflow-hidden", className)}
      onMouseMove={(e) => {
        const rect =
          e.currentTarget.getBoundingClientRect();
        setPos({
          x: ((e.clientX - rect.left) / rect.width) * 100,
          y: ((e.clientY - rect.top) / rect.height) * 100,
        });
        setHovering(true);
      }}
      onMouseLeave={() => setHovering(false)}
    >
      <div
        className="absolute inset-0"
        style={{ backgroundColor: baseColor }}
      />
      <div
        className="pointer-events-none absolute inset-0 transition-opacity duration-150"
        style={{
          background: `radial-gradient(circle ${spotlightSize}px at ${pos.x}% ${pos.y}%, rgba(255,255,255,${spotlightOpacity}) 0%, transparent ${falloff})`,
          opacity: hovering ? 1 : 0,
        }}
      />
      {children && (
        <div className={cn("relative", childrenClassName)}>
          {children}
        </div>
      )}
    </div>
  );
}

2. Import and use

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

<CursorSpotlight>Content</CursorSpotlight>;

Usage

Import

Add the CursorSpotlight import.

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

Use

Wrap content. Spotlight follows cursor.

<CursorSpotlight>Content</CursorSpotlight>;

Guidelines

Wrap content as children. Spotlight follows cursor within the container.
spotlightSize and spotlightOpacity control the effect.
baseColor sets the dimmed background color.

Props

All props are optional unless marked required. Use these to customize every aspect of the component.

Prop	Type	Default	Description
className	string	-	Additional CSS classes for the container.
spotlightSize	number	100	Spotlight radius in pixels.
spotlightOpacity	number	0.25	Spotlight opacity (0–1).
baseColor	string	"rgb(2 6 23)"	Base dimmed background color.
falloff	string	"60%"	Gradient falloff (e.g. '60%' = transparent at 60% from center).
childrenClassName	string	-	Classes for the children wrapper.

Examples

Basic

Basic spotlight container.

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

<CursorSpotlight className="h-48 rounded-2xl border">
  <div className="flex h-full items-center justify-center">
    <span className="text-sm text-white/50">
      Move cursor for spotlight
    </span>
  </div>
</CursorSpotlight>;

Last updated on Mar 5