Framer code component

A spotlight that follows the cursor

Cover an image — or any layer — with a dimming overlay, then open a soft, eased spotlight wherever the pointer goes. It dims with colour, with a blur, or both.

Any layer or image

Reveal or conceal

Colour, blur or both

Touch ready

Dimming

Three ways to hold the room dark

The overlay can dim with a colour, with a backdrop blur and desaturation, or with both at once. Hover any panel.

Colour

Dim With: Colour — Opacity 0.9

Blur

Dim With: Blur — 14px, Saturation 0.08

Colour + Blur

Both together, each eased back

Shape & mode

One number turns the circle into a beam

Aspect stretches the spotlight wide or tall, and Conceal inverts the whole effect so the cursor casts a shadow instead.

Wide beam

Aspect 3.4 — Radius 12

Tall beam

Aspect 0.35 — Radius 20

Conceal

Mode: Conceal — the cursor casts a shadow

Soft glow

Glow Strength 0.6 — Size 110

Properties

Everything is a property

Twenty-one controls, grouped so the panel only shows what the current mode uses.

Content

A Slot for any Framer layer, or a built-in Image with its own backdrop colour.

Mode

Reveal clears the overlay under the cursor. Conceal darkens it instead.

Shape

Radius, feather, and one aspect number that turns the circle into a wide or tall beam.

Dim With

A colour, a backdrop blur with optional desaturation, or both together.

Glow

A soft additive bloom at the cursor, with five blend modes.

Easing

How far the spotlight lags behind the pointer. Zero is instant.

On Leave

Close, stay where it was, or recentre when the pointer leaves.

On Touch

Follows the finger, shows everything, or stays centred on phones.

Performance

Position is written to CSS variables from one rAF loop, so nothing re-renders per frame.

Cursor Spotlight

One code component — no external libraries — works over any Framer layer