Motion

SpotlightSurface

A surface that acknowledges the pointer. The light layer sits above the surface colour but below the content, at single-digit alpha, so nothing you need to read ever loses contrast.

Playground

Move the pointer across the surface. Nothing animates on its own; the light only exists while you are interacting.

Controls

Spot size

Tone

Surface

Rendered as

<SpotlightSurface size={320} tone="accent" surface="default">

Portfolio overview

+4.2%

Net asset value

30d

Text contrast is untouched: the light never exceeds 7% alpha.

Listeners are attached per surface, rAF-throttled, and removed when the pointer leaves. Coarse pointers get the calm version.

<SpotlightSurface size={320} tone="accent" surface="default">
  <Card>Content under the light</Card>
</SpotlightSurface>

In a grid

Used on a few flagship surfaces, never on all of them. Three lights competing is noise.

Live signals

spotlight

Each surface tracks its own pointer position and writes two CSS variables.

Risk monitor

spotlight

Each surface tracks its own pointer position and writes two CSS variables.

Data quality

spotlight

Each surface tracks its own pointer position and writes two CSS variables.

Static / print

Pass `static` where the surface is rendered to an image or printed — no listeners are attached at all.

static

Deterministic output for screenshots and PDFs.

SpotlightSurface vs BorderGlow

SpotlightSurface

Is a surface. It brings its own background, border and radius, and puts the light between the background and the content.

BorderGlow

Wraps one. It paints only the 1px perimeter and reads the wrapped element's radius throughborder-radius: inherit.

API

Component props
Prop	Type	Default	Notes
`size`	`number`	`320`	Spotlight diameter in px. Larger is softer.
`tone`	`"accent" \| "neutral"`	`"accent"`	Neutral uses a low-alpha foreground tint instead.
`surface`	`"default" \| "raised" \| "sunken"`	`"default"`	The surface treatment under the light.
`radius`	`"md" \| "lg" \| "xl"`	`"lg"`	Matches the Card radius scale.
`static`	`boolean`	`false`	Skips pointer tracking entirely.

Rules

Keep the alpha under 10% — it is a shimmer, not a lamp.
Use it on one or two surfaces per view.
Let it sit behind the content so charts stay readable.

Don't

Add a list of pointer listeners to a 60-row table.
Use a white radial “blob” over text.
Rely on the light to signal that something is interactive.