proNew178 lines · framer-motion

Cursor Spotlight

A flashlight for whatever you're hiding. A bounded dark demo panel with a pattern and tagline normally hidden under a dark overlay; a spring-following radial spotlight cut into that overlay reveals the content underneath wherever the pointer passes.

Use it for: A playful reveal for a feature teaser, changelog entry or easter-egg panel, where hovering should feel like discovery rather than a static hover state.
Themes: Light + dark
License: Commercial use

Live

Pointer reveal

Move your pointer over the panel to reveal what's underneath.

tsx

"use client";

import * as React from "react";
import { motion, useMotionTemplate, useMotionValue, useReducedMotion, useSpring } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * A bounded demo panel with a dark stage and a pattern + tagline normally
 * hidden under a dark obscuring layer. A radial "spotlight" cut into that
 * layer's CSS mask follows the pointer on a spring, revealing the content
 * underneath wherever it passes, like a flashlight. The pointer is tracked
 * only while it is over the stage element itself (never `window`), and the
 * whole effect is skipped — falling back to the plain, fully revealed panel
 * with the normal cursor — on touch devices and under
 * `prefers-reduced-motion`.

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Pointer position inside the panel drives a spring-smoothed spotlight (percentage coordinates, so it holds up at any panel size), never a rigid 1:1 follow.
→The spotlight is a CSS mask-image radial-gradient cut into the dark obscuring layer; inside the mask's hole the overlay is transparent and the hidden pattern + tagline underneath show through.
→radius sets the hole's size and feather its edge softness; dim sets how dark the obscuring layer is.
→A second radial-gradient ring, tinted with the color token, glows right at the spotlight's edge while hovering and fades out on pointer leave.
→Pointer tracking is bound to the panel element via onPointerMove/onPointerEnter/onPointerLeave — never window — so nothing happens outside the bounded box.
→On touch devices (pointer: coarse or hover: none) and under prefers-reduced-motion, the overlay and ring are not rendered at all: the panel just shows its pattern and tagline plainly, with the normal cursor.

Accessibility

✓The hidden pattern, marks and tagline are purely decorative and `aria-hidden`; the point of the block is already conveyed by the always-visible `caption` text above the panel.
✓All overlay/ring layers are `pointer-events-none` so they never intercept input.
✓No OS cursor is ever hidden and nothing is tracked outside the bounded panel.
✓Honours prefers-reduced-motion.