Spotlight

A radial gradient that tracks the pointer through two CSS custom properties. glow adds light around the cursor; mask dims everything except a circle around it.

Live props — bound to the real component

Mode

Radius240

Softness0.6

Alpha0.09

Follow lag0.35

Ease

Install

npx shadcn@latest add @pointerui/spotlight

# Copy three folders out of the repo
src/lib/engine/                 ->  lib/pointerui/engine/
src/registry/provider/          ->  components/pointerui/provider/
src/registry/variants/spotlight/   ->  components/pointerui/spotlight/

# Then fix the two aliases the CLI would have rewritten
#   @/lib/engine     ->  @/lib/pointerui/engine
#   ../../provider   ->  @/components/pointerui/provider

import { createEngine } from "./lib/pointerui/engine";

// The engine has no React imports at all, so it runs anywhere.
const engine = createEngine();
const el = document.createElement("div");
document.body.append(el);

const layer = engine.registerLayer(el, { duration: 0.15, ease: "power3" });
const stop = engine.onTick((state) => {
  layer.setX(state.x);
  layer.setY(state.y);
});

// Spotlight's own layer setup is the same call with its own options.

Usage

app/page.tsx

import { CursorProvider } from "@/components/pointerui/provider";
import { Spotlight } from "@/components/pointerui/spotlight";

export default function Page() {
  return (
    <CursorProvider>
      <Spotlight />

      <button data-cursor="grow">Hover me</button>
    </CursorProvider>
  );
}

Props

Generated from spotlight/types.ts and the component's own defaults, so this table cannot drift from the code you are about to copy.

Prop	Type	Default	Description
mode	"glow" \| "mask"	"glow"	- `glow` adds light around the pointer, leaving the page otherwise untouched - `mask` dims everything except a circle around the pointer
radius	number	240	Gradient circle radius in px.
softness	number	0.6	Edge softness, 0–1. The gradient holds its peak out to `(1 - softness) × 70%` of the radius and reaches full transparency at 70%. Higher values give a longer, softer falloff.
alpha	number	0.09	Peak alpha at the centre, 0–1.
color	string	"var(--cursor-color, currentColor)"	Any CSS colour. Defaults to `--cursor-color`, falling back to `currentColor` — never hardcode a hex.
maskColor	string	"rgba(0, 0, 0, 0.82)"	Colour used to dim the page in `mask` mode.
lag	number	0.35	Follow duration in seconds.
ease	string	"power3"	GSAP ease for the follow tween. Any ease string GSAP understands works — `"power3"`, `"expo.out"`, `"circ"`, `"none"` for a linear follow. This is the shape of the lag, where `lag` is its length. Changing it changes the character of the cursor more than any other prop.

Data attributes

Mark any element with one of these and this variant responds when the pointer enters it. Values it does not understand are ignored.

data-cursor="grow": Widens the gradient radius.
data-cursor="hide": Fades the layer out.

Notes & caveats

This is the one variant that writes CSS custom properties rather than transforms. The gradient is repainted, not composited, so keep the radius sane on very large viewports.
At page scale the default 240px radius is right; inside a small panel it covers everything and reads as a flat wash. The gallery tile uses mask mode at a smaller radius for that reason.