Skip to content
Pinky UI

backgrounds

Spotlight Grid

A quiet structural grid revealed by a local pointer spotlight.

  • backgrounds
  • grid
  • developer
  • spotlight

Live preview

Structure under light

The content keeps the loudest voice.

Quick usage

usage
import { SpotlightGrid } from "@pinky-ui/experiences";

<SpotlightGrid size={28} intensity={0.18}>{content}</SpotlightGrid>

Presets

Default

The restrained Pinky production default.

Default behaviour

Quiet

A flatter or lower-intensity treatment for dense pages.

intensity={0.1}

Install

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

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
sizenumber28Spacing of the decorative grid lines.
classNamestring—Styles the outer composition without changing its behaviour.
disabledbooleanfalseUses the static, readable composition.

Accessibility

  • Content remains in logical DOM order and motion never carries the only meaning.
  • Interactive descendants retain native link or button semantics and visible focus.

Performance

  • The grid is two CSS gradients rather than repeated nodes.
  • Pointer response uses the shared spotlight source.

Reduced motion

Spatial or continuous movement is removed while content, selection and controls remain available.

When to use

  • Developer, docs and structured product sections

When not to use

  • Neon styling or body-copy-heavy surfaces

Skill

Purpose

SpotlightGrid combines a quiet grid with a local reveal, suitable for developer Heroes, documentation intros and structured product sections.

Use low-contrast lines and a broad, restrained spotlight. Avoid neon cyber styling, fine grids behind body copy or using the grid as the only indication of interactivity. Pair it with simple content, not another pointer-following background.

The surface is decorative and pointer-transparent while foreground semantics stay unchanged. Keyboard, touch and reduced-motion users receive a readable static grid. Shared pointer infrastructure avoids per-frame React work; keep the covered area bounded when possible.

Open this skill on its own page