Skip to content
Pinky UI

cursor

Cursor Spotlight

A subtle region-level light following the pointer.

  • cursor

Live preview

Move across this panel

Quick usage

usage
import { CursorSpotlight } from "@pinky-ui/effects";

<CursorSpotlight />

Install

Add @pinky-ui/effects as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/effects

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Motion never carries the only meaning; the underlying content remains in the DOM.
  • Pair pointer effects with an equivalent focus or keyboard state where the target is interactive.

Reduced motion

The effect resolves to a static readable state when motion is reduced.

When to use

  • As a restrained enhancement to meaningful content.

When not to use

  • When the content or control would be unclear without motion.

Skill

Purpose

CursorSpotlight is a region-level light that follows the pointer across a hero, gallery or feature section. Unlike a spotlight card, it describes the whole region rather than selecting one card.

Choose container for a bounded section and viewport only for a deliberately atmospheric page background. Start with low intensity (about 0.15–0.35), a broad radius and a restrained tint. Do not use several high-contrast spotlights or place it over controls where it lowers text contrast.

The layer is decorative and pointer-transparent. Reduced motion and touch fall back to the readable children without the moving light. Check contrast against both the light and the unlit state; the spotlight must never carry meaning by itself.

Open this skill on its own page