Skip to content
Pinky UI

overlays

Spotlight Overlay

A soft scrim lowers surrounding noise while a selected source remains the reason for the contextual layer.

  • overlays
  • spotlight
  • scrim
  • focus
Related pattern

A source-led local focus layer, distinct from onboarding tours and spotlight card lighting.

Live preview

Quick usage

usage
import { SpotlightOverlay } from "@pinky-ui/systems";

<SpotlightOverlay />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems 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/systems

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

Props

PropTypeDefaultDescription
classNamestring—Styles the bounded spotlight stage.

Accessibility

  • Keyboard and touch paths match the pointer interaction.
  • Stable labels and values remain available without motion.

Performance

  • The scrim is local to its stage rather than a global viewport layer.
  • The highlighted source remains in the same document context.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Focused explanation or action around a selected workspace object

When not to use

  • Product tours that need a multi-step route or blocking modal work

Skill

Purpose

Use a spotlight overlay when one local source should become the clear focus while surrounding content remains part of the same workspace.

Interaction anatomy

  • The source opens a bounded soft scrim.
  • A context panel explains or acts on the selected source.
  • The source identity remains visible behind the layer.

Good for

Focused workspace explanation, a selected object or a short contextual action.

Avoid

Multi-step onboarding tours, global modal work or decorative dimming without a useful action.

Live example

Choose a target to lower the surrounding noise and keep that target as the context anchor.

Usage

tsx
<SpotlightOverlay />

Tune

Use the lightest scrim that establishes focus, keep the context panel short, and ensure the source remains understandable underneath.

Accessibility and reduced motion

Provide a labelled dialog or region, a close button and Escape. The focus path must not depend on seeing the scrim. Reduced motion preserves the scrim and context immediately.

Open this skill on its own page