Cursor Spotlight
betaA spotlight that follows the pointer inside a box: a soft glow behind the content, or a flashlight that dims everything but the circle around the pointer.
- Effects & motion
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add cursor-spotlightnpm packages installed: class-variance-authority.
import { CursorSpotlight } from "@/components/ui/cursor-spotlight";Default
Reveal
<CursorSpotlight>
| Prop | Type | Default |
|---|---|---|
colorGlow colour in | string | "primary" |
intensityHow strong the glow, or how deep the dimming, 0–1. Default 0.25 for light, 0.7 for reveal. | number | — |
layerWhether the light passes behind the content or over it. Default: behind for light, over for reveal. | "behind" | "above" | — |
mode | "light" | "reveal" | "light" |
radiusRadius of the spotlight, in pixels. Default 220. | number | 220 |
Plus every attribute of <div>.
Decoration only: the light is aria-hidden and takes no pointer events, the system cursor is left alone, and nothing happens outside the box. It is absent until the pointer is inside, so reveal mode never dims content nobody is pointing at, and keyboard, touch and reduced-motion users see the content exactly as written — it is off for touch and under reduced motion. Never put anything only the spotlight shows.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes