Spotlight Reveal

Two layers stacked, with a soft spotlight that follows your cursor and punches a hole in the top one — revealing whatever sits beneath. Idle, the spotlight drifts to invite a hover; click to pin it in place. Move across the panel below.

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/spotlight-reveal.json"

The cover layer is masked with a feathered radial gradient whose centre is eased toward the pointer in a single requestAnimationFrame loop — the lag gives the spotlight a liquid feel. When idle, the centre drifts in a slow ellipse.

Usage

import { SpotlightReveal } from "@/components/godui/spotlight-reveal";

Pass the hidden layer to reveal and the cover layer as children.

<SpotlightReveal reveal={<HiddenLayer />}>
  <CoverLayer />
</SpotlightReveal>

Tuning the light

radius sizes the spotlight, softness feathers its edge, and ease controls how much the light lags the cursor (lower = more lag).

<SpotlightReveal radius={220} softness={0.7} ease={0.1} reveal={<A />}>
  <B />
</SpotlightReveal>

Accessibility

Both layers are real DOM, so their text remains selectable and readable to assistive tech. When prefers-reduced-motion is set, the mask is dropped and the cover simply sits at a calm, slightly transparent blend over the layer beneath.

Props

The cover layer is passed as children. SpotlightReveal also forwards every standard <div> attribute to the root element.